Let user login into my SPA (Reactjs) based on IdToken using Okta-React SDK

Hi there. First you want to make sure you have you app setup for IDP initiated flow with the following settings:

Screen Shot 2021-02-22 at 11.50.18 AM

The Initiate Login URI is where the user will be taken when they click the application tile. In your code at this endpoint, you will want to do a session check to see if the user has an Okta session. Then, you will want to initiate the OIDC flow to retrieve tokens if that session exists. Here’s an example:

const oktaAuthClient = widget.authClient;
oktaAuthClient.session.exists()
  .then((exists) => {
    oktaAuthClient.token.getWithoutPrompt({
      responseType: ['token', 'id_token'],
    })
      .then((res) => {
        oktaAuth.handleLoginRedirect(res.tokens);
      });
  });

//if no session, render sign-in widget

widget.showSignInToGetTokens({
  el: widgetRef.current,
  scopes,
}).then((tokens) => {
  oktaAuth.handleLoginRedirect(tokens);
}).catch((err) => {
  throw err;
});

Hopefully you can apply this to your particular use case/codebase.

1 Like