React MSAL Library msal-react : Issue in persisting the login session in different user-policies B2C application

Question

I am using msal-react in my single page B2C application to sign in. I used the loginRedirect() function to login.

const { instance } = useMsal();
let {idToken} = await instance.loginRedirect();

This is allowing me to login successfully.

After login when I check if the user is authenticated using the following function it is returning true.

import {useIsAuthenticated,} from "@azure/msal-react";
const isAuthenticated = useIsAuthenticated();

That means that the user is authenticated.

But, when I try to access another user-policy url from the app. It is asking for entering the user credentials again. Is there any way to use the same user session from the single page application to not ask the credentials again while accessing other user-policy urls?

I am just redirecting the user to the policy url directly from the app. See the code below.

function UserPolicyRedirect() {
  useEffect(() => {
    const timeout = setTimeout(() => {
      // ️ redirects to an external URL
      window.location.replace(
        "user-policy url"
      );
    }, 3000);

    return () => clearTimeout(timeout);
  }, []);

  return <>Redirecting...</>;
}

And in the app.js for the redirecting the user I have set the route as follows.

<Route path="/profile" element={<UserPolicyRedirect/>}></Route>

Any suggestion on how to avoid asking the credentials again in this case?

Answer 1

I think that you need to use loginRedirect (or loginPopup) for navigating to other policy.