MSAL 2.0 Auth in React JS - Incognito issue

Question

Im using azure-msal-react for user-auth in react. The code snippet used is as follows.

import React, { useEffect } from 'react';
import { useMsal, useIsAuthenticated, useMsalAuthentication } from '@azure/msal-react';
import './App.scss';
import { useDispatch } from 'react-redux';
import { InteractionType } from '@azure/msal-browser';
import { AuthActions } from './store/actions/authActions';

import Routes from './routes';

function App() {
  const { instance, accounts } = useMsal();
  const dispatch = useDispatch();
  const isAuthenticated = useIsAuthenticated();
  const request = {
    scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
  };
  useMsalAuthentication(InteractionType.Redirect, request);

  useEffect(() => {
    async function getTokenSilently() {
      const tokenRequest = {
        scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
        loginHint: accounts[0].username,
      };
      const res = await instance.ssoSilent(tokenRequest);
      dispatch({ type: AuthActions.SET_TOKEN, payload: res.accessToken });

      dispatch({ type: AuthActions.SET_CLAIMS, payload: accounts[0].username });

   
    }
    if (isAuthenticated) {
      getTokenSilently();
    }
  }, [isAuthenticated]);

  return <Routes />;
}
export default App;

It throws the following error in incognito mode.

Can someone point me in right direction to fix this issue? Is there a better way to achieve redirect auth using msal?

Can someone point me to any code snippet that does msal 2.0 auth in react. Most of the articles available are really old.

Answer 1

The reason the loop is happening is that ssoSilent will always make a network request by opening a hidden iframe. This will always fail since most likely 3p cookies are blocked, which results in the popup being called again.

You should change the ssoSilent call to acquireTokenSilent() instead. See the sample here for more info.

Github issue link here

import React, { useEffect } from 'react';
import { useMsal, useIsAuthenticated, useMsalAuthentication, useAccount } from '@azure/msal-react';
import './App.scss';
import { useDispatch } from 'react-redux';
import { InteractionType } from '@azure/msal-browser';
import { AuthActions } from './store/actions/authActions';

import Routes from './routes';

function App() {
  const { instance, accounts, inProgress } = useMsal();
  const account = useAccount(accounts[0] || {});

  const dispatch = useDispatch();
  const isAuthenticated = useIsAuthenticated();
  const request = {
    scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
  };
  useMsalAuthentication(InteractionType.Redirect, request);

  useEffect(() => {
    async function getTokenSilently() {
      const tokenRequest = {
        scopes: ['User.Read', 'User.ReadBasic.All', 'email'],
        // loginHint: accounts[0].username,
        account,
      };

      const res = await instance.acquireTokenSilent(tokenRequest);
      dispatch({ type: AuthActions.SET_TOKEN, payload: res.accessToken });

      dispatch({ type: AuthActions.SET_CLAIMS, payload: accounts[0].username });

 
    }
    if (isAuthenticated && inProgress === 'none') {
      getTokenSilently();
    }
  }, [isAuthenticated]);

  return <Routes />;
}
export default App;