Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
@forgerock/javascript-sdk
Advanced tools
The ForgeRock JavaScript SDK is a toolkit that allows web developers to easily integrate intelligent authentication using ForgeRock OpenAM and/or ForgeRock Identity Cloud.
npm install @forgerock/javascript-sdk
In most real-world scenarios, you will want to have full control over the UI. In these cases, you can use FRAuth
to obtain typed callback instances from authentication trees and render the UI in whatever way makes sense for your application.
In the following example, a simple React app iteratively calls FRAuth.next()
until either an error occurs or a session token is obtained. The custom React component <UsernamePassword />
is defined to handle an authentication step named "UsernamePassword".
import { FRAuth, Config } from '@forgerock/javascript-sdk';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// Initialize application state
this.state = {
error: undefined,
ssoToken: undefined,
step: undefined,
};
}
componentDidMount() {
// Set configuration defaults
Config.set({
clientId: '<Your OAuth Client ID>',
redirectUri: '<Your Callback URL>',
scope: '<Your Scopes>',
serverConfig: { baseUrl: '<Your AM URL>' },
tree: '<Your Auth Tree in AM>',
});
// Start the authentication flow
this.nextStep();
}
nextStep = async (step) => {
// Get the next step in this authentication tree
step = await FRAuth.next(step).catch(this.onError);
// Update application state based on the response
let ssoToken, error;
if (step.type === 'LoginSuccess') {
ssoToken = step.getSessionToken();
} else if (step.type === 'LoginFailure') {
error = step.getCode();
}
this.setState({ step, ssoToken, error });
};
onError = (error) => {
this.setState({ error });
};
render() {
// Handle init/success/failure states
if (!this.state.step) {
return <p>Loading...</p>;
} else if (this.state.ssoToken) {
return <p>Authenticated!</p>;
} else if (this.state.error) {
return <p>Error: {this.state.error}</p>;
}
// Otherwise, select the correct component for this step
const stage = this.state.step.getStage();
return (
<>
<h1>Sign In</h1>
{stage === 'UsernamePassword' && (
<UsernamePassword step={this.state.step} onSubmit={this.nextStep} />
)}
{/* Create similar components for other stages */}
</>
);
}
}
// Custom UI for rendering the "UsernamePassword" step
function UsernamePassword(props) {
const setUsername = (e) => {
const cb = props.step.getCallbackOfType('NameCallback');
cb.setName(e.target.value);
};
const setPassword = (e) => {
const cb = props.step.getCallbackOfType('PasswordCallback');
cb.setPassword(e.target.value);
};
const onSubmit = () => {
props.onSubmit(props.step);
};
return (
<>
<input type="text" placeholder="Username" onChange={setUsername} />
<input type="password" placeholder="Password" onChange={setPassword} />
<button onClick={onSubmit}>Submit</button>
</>
);
}
export default App;
Prerequisites:
# Add host
echo '127.0.0.1 sdkapp.example.com' | sudo tee -a /etc/hosts
# Install dependencies
npm i
# Build the SDK and watch for changes
npm run watch
# Start the sample webserver
npm run start:samples
# Follow the next section to trust certificate
Access the samples at https://sdkapp.example.com:8443
Trusting the certificate is required to avoid browser warnings and for WebAuthn to work correctly.
Add the certificate to your keychain:
# MacOS
sudo npm run certs:trust
You must restart Chrome for the change to take effect.
Import the certificate to Firefox:
test/certs/ca.crt
and enable option to "Trust this CA to identify websites"This project is configured for multiple forms of tests: unit, integration, and e2e. Compilation and linting occurs as a pre-commit hook, and all tests are run as a pre-push hook.
Node v13.10 or higher is required to run the mock E2E server application.
To run the end-to-end tests, you'll need to add a few more domains to your host file:
# For end-to-end testing this code base, these domains also need to be added
echo '127.0.0.1 auth.example.com api.example.com' | sudo tee -a /etc/hosts
Variable | Purpose |
---|---|
AM_URL | Full URL to your OpenAM instance |
BASE_URL | Base URL for your application |
CLIENT_ID | Your OAuth client ID |
REALM_PATH | The realm in which trees, users, OAuth clients reside |
SCOPE | The scopes to request when getting access tokens |
TREE | The authentication tree name to use for authentication |
USERNAME | The username to use when authenticating |
PASSWORD | The password to use when authenticating |
Running E2E tests require a running server (or "backend") for the necessary request/response relationship. Configuration of the server is done within env.config.ts
file within the tests/e2e/
directory. The default shown below runs the tests against a mock server:
export const AM_URL = 'https://auth.example.com:9443/am';
export const BASE_URL = 'https://sdkapp.example.com:8443';
export const CLIENT_ID = 'WebOAuthClient';
export const PASSWORD = 'ieH034K&-zlwqh3V_';
export const REALM_PATH = 'root';
export const RESOURCE_URL = 'https://api.example.com:9443/account';
export const SCOPE = 'openid profile me.read';
export const TREE = 'BasicLogin';
export const USERNAME = '57a5b4e4-6999-4b45-bf86-a4f2e5d4b629';
If you prefer to test against a live environment, you will need to configure the .env
file to use your OpenAM instance and its public OAuth client.
DOMException: Blocked a frame with origin "{url}" from accessing a cross-origin frame (in browser console)
This occurs when OpenAM returns the authorization code, but the redirect_uri
doesn't match what's configured for the OAuth client. Tests use a path of /callback
, so your OAuth client should be configured with a redirect_uri
of {BASE_URL}/callback
(e.g. https://sdkapp.example.com:8443/_callback).
Our version history can be viewed by visiting our CHANGELOG.md.
FAQs
ForgeRock JavaScript SDK
The npm package @forgerock/javascript-sdk receives a total of 1,780 weekly downloads. As such, @forgerock/javascript-sdk popularity was classified as popular.
We found that @forgerock/javascript-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.