Set up social login in JavaScript apps

This page shows how to use the JavaScript SDK with authentication journeys that provide social login and registration.

The first callback your app encounters is the SelectIdPCallback, which lets the user choose their IdP. Use the getProviders() method to display the available providers, and setProvider() when the user makes a choice:

// Within your login flow
const cb = step.getCallbackOfType(‘SelectIdPCallback’)
const providers = cb.getProviders();

// display providers
// user makes choice

// Sets provider on the callback within `step`
cb.setProvider(chosenProvider);

FRAuth.next(step);

The next callback is the RedirectCallback. Detect the presence of the callback, and call a special redirect() method on the FRAuth class, passing the whole step object as the argument:

// Within your login flow
if (step.getCallbackOfType('RedirectCallback')) {
  FRAuth.redirect(step);
}

This triggers a full browser redirect to the IdP. When the user authenticates with the IdP, they are redirected back to the app. When your application handles this redirect, check for the query parameters code and state for Facebook and Google, or form_post_entry for Apple. If they are present, call the resume() method on the FRAuth class:

// Application route handler for redirection from provider
// `code`, `state` and `form_post_entry` are "variablized" from URL
if ((code && state) || form_post_entry) {
  step = FRAuth.resume(window.location.href);
}

The resume() method gathers the appropriate URL information, and information from the previous step saved to browser storage prior to the redirect in order to properly resume the authentication journey.

ForgeRock Developer Experience

Set up social login in JavaScript apps