Not able to renew token for okta sso login using MSAL in the React js application through the Azure b2c

Question

Find the login flow in the diagram.

Actually, we used the msal package in the frontend application to login. The login functionality working correctly for both B2C and Okta, but the renew token functionality is not working only for Okta.

The first issue is the account details not available in the msal instance after the successful login

The second one is the token details are not saved in the local storage.

Configuration details:

Frontend:

msal config:

 {
   auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    knownAuthorities: [b2cPolicies.authorityDomain], // taking from constant
    authority: b2cPolicies.authorities.signUpSignIn.authority, // taking from constant
    redirectUri: window.location.origin,
    postLogoutRedirectUri: '/', 
    navigateToLoginRequestUrl: true, 
  },
  cache: {
    cacheLocation: 'localStorage', 
    storeAuthStateInCookie: true, 
  }
}

Scope: openid, offline_access

the B2C policy configured for Okta as an identity provider includes

 
<Item Key="response_types">code</Item>
 <Item Key="scope">openid profile email offline_access</Item>

I also tried with response type as id_token and code token

Okta admin console

Offline_access scope is enabled.

We have this issue only for Okta, for B2C it is working.

The below are the redirect URL format to the forntend application from b2c

B2c User login: http://localhost:3000/#state=*&client_info=&code

Okta user login: http://localhost:3000/sign-in#id_token=

Answer 1

Hi @Ashok Kumar

Based on the information you provided, it seems that you are experiencing an issue with the renew token functionality in the MSAL package for Okta. The account details are not available in the MSAL instance after a successful login, and the token details are not saved in the local storage.

After a successful login call, you can use the getAllAccounts() function to retrieve information about the currently signed-in users:

const myAccounts: AccountInfo[] = msalInstance.getAllAccounts();

To store a JWT in local storage after receiving it, please run the following code:

const config = {
  auth: {
    clientId: "1111-2222-3333-4444-55555555",
  },
  cache: {
    cacheLocation: "localStorage",
  },
};
const msalInstance = new msal.PublicClientApplication(config);

For more information: https://learn.microsoft.com/en-us/entra/identity-platform/msal-js-sso

Hope this helps. Do let us know if you any further queries.

Thanks,

Navya.

---

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.