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

Questions
, ,
#1

Hi,

Hope you are doing good.

I’m struggling with the user authentication based on IdToken. What I’m trying to do is. If I go to my Okta-Dashboard and click on my application. Okta Redirect me with the IdToken. With that IdToken I’m trying to login-user into my Reactjs SPA.

I should not display the log-in page to the user, instead, I have to validate the ID token received from Okta for authenticity and establish Okta SSO session. I’m already using Okta-React SDK.

I have gone through the number of posts and official docs but unable to find help may be due to my lack of Okta-Domain knowledge.
I’m really stuck in it. Please guide how can we validate the ID token received from Okta-Dashboard => My Apps Section and use the same token for validating the user instead of asking the user to log-in again.

Looking forward to you.

Regards
Adil

#2

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