MSAL 2.0 Auth in React JS - Incognito issue

user_3261825 0
Viewed 1324

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.

error

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.

msal.js msal reactjs azure javascript
1 Answers

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;
user_32618250
Related