Error trying to login on Azure: BrowserAuthError-CodePudding

I'm getting an error trying to login with Azure TypeScript/JavaScript. The problem is when the user logs in and needs to get redirected to another page. When the response from login is OK, the page remains blank and I need to refresh manually.

This is my config file:

import { Configuration, LogLevel } from "@azure/msal-browser"

export const msalConfig:Configuration = {
    auth: {
        clientId: process.env.AZURE_CLIENT_LOGIN || "",
        authority: "https://login.microsoftonline.com/"   process.env.AZURE_AUTH_LOGIN,
        redirectUri: "/admin/dashboard"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {   
        loggerOptions: {    
            loggerCallback: (level: any, message: any, containsPii: any) => {   
                if (containsPii) {      
                    return;     
                }       
                switch (level) {        
                    case LogLevel.Error:        
                        console.error(message);     
                        return;     
                    case LogLevel.Info:     
                        console.info(message);      
                        return;     
                    case LogLevel.Verbose:      
                        console.debug(message);     
                        return;     
                    case LogLevel.Warning:      
                        console.warn(message);      
                        return;     
                }   
            }   
        }   
    }
}

export const loginRequest = {
    scopes: ["User.Read"]
};

export const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
};

And this is my index page:

import React, { useEffect } from 'react';
import type { NextPage } from "next";
import { useRouter } from 'next/router';


import { useMsal } from '@azure/msal-react';
import { useIsAuthenticated } from '@azure/msal-react';
import { loginRequest } from '../services/azureLoginApi';


const Home: NextPage = () => {
  const router = useRouter()

  const { instance } = useMsal()
  const isAuthenticated = useIsAuthenticated()

  const redirectToAzureLogin = () => {
    instance.loginRedirect(loginRequest).catch((e:any) => {
      console.log(e);
    });
  }

  const redirectToDashboard = () => {
    router.push('/admin/dashboard')
  }

  useEffect(()=>{
    if(isAuthenticated)
      redirectToDashboard()
    else
      redirectToAzureLogin()
  },[])
  return (
      <div className="index">
      </div>
  );
};

export default Home;

On console, I get this message:

BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.
    at BrowserAuthError.AuthError [as constructor] (AuthError.js?d98c:27:1)
    at new BrowserAuthError (BrowserAuthError.js?be02:197:1)
    at Function.BrowserAuthError.createInteractionInProgressError (BrowserAuthError.js?be02:264:1)
    at BrowserCacheManager.setInteractionInProgress (BrowserCacheManager.js?6011:886:23)
    at PublicClientApplication.ClientApplication.preflightInteractiveRequest (ClientApplication.js?9c57:777:1)
    at PublicClientApplication.ClientApplication.preflightBrowserEnvironmentCheck (ClientApplication.js?9c57:762:1)
    at PublicClientApplication.eval (ClientApplication.js?9c57:220:1)
    at step (_tslib.js?89f4:75:1)
    at Object.eval [as next] (_tslib.js?89f4:56:46)
    at eval (_tslib.js?89f4:49:1)
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js?89f4:45:1)
    at PublicClientApplication.ClientApplication.acquireTokenRedirect (ClientApplication.js?9c57:214:25)
    at PublicClientApplication.eval (PublicClientApplication.js?1b7b:63:1)
    at step (_tslib.js?89f4:75:1)
    at Object.eval [as next] (_tslib.js?89f4:56:46)
    at eval (_tslib.js?89f4:49:1)
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js?89f4:45:1)
    at PublicClientApplication.loginRedirect (PublicClientApplication.js?1b7b:58:25)
    at redirectToAzureLogin (index.tsx?db76:18:14)
    at eval (index.tsx?db76:31:7)
    at invokePassiveEffectCreate (react-dom.development.js?61bb:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js?61bb:23574:1)
    at unstable_runWithPriority (scheduler.development.js?3069:468:1)
    at runWithPriority$1 (react-dom.development.js?61bb:11276:1)
    at flushPassiveEffects (react-dom.development.js?61bb:23447:1)
    at eval (react-dom.development.js?61bb:23324:1)
    at workLoop (scheduler.development.js?3069:417:1)
    at flushWork (scheduler.development.js?3069:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?3069:157:1)

The page remains blank until I give a manual refresh on it. With the manual refresh, the redirect works, but without it the page remains freezed.

I've tried some solutions on StackOverflow and other blogs but didn't work out.

Thank you all for any help you may give!

CodePudding user response：

change instance.loginRirect to instance.loignPopup, that would solve that

CodePudding user response：

Problem solved: the point was the useEffect without dependencies. Adding it solved the problem, now the redirect works without needing to manually update the page.