基于MSAL的React应用SSO登录后自动返回登录页问题求助

我在Azure中创建了一个Web应用，使用MSAL React库配置单点登录（SSO）。点击SSO按钮完成认证后，页面几秒内自动返回登录页，无法跳转到Home页面。

Azure端配置：已将重定向URI设为http://localhost:5173/home，并添加了openid、email、profile作用域。

相关代码文件 #

Authconfig.js #

export const msalConfig = {
  auth: {
    clientId: "client-id",
    authority: "https://login.microsoftonline.com/tenant-id",
    redirectUri: "http://localhost:5173/home",
  },
  cache: {
    cacheLocation: "sessionStorage", // Use sessionStorage to avoid localStorage issues
    storeAuthStateInCookie: false,
  },
};

LoginButton.js #

import React from 'react';
import { useMsal } from "@azure/msal-react";

const LoginButton = () => {
  const { instance } = useMsal();

  const handleLogin = () => {
    instance.loginPopup().catch(e => {
      console.error(e);
    });
  };

  return (
    <button onClick={handleLogin} style={styles.button}>Sign in with SSO</button>
  );
};

const styles = {
  button: {
    padding: "10px 20px",
    backgroundColor: "#0078d4",
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  },
};

export default LoginButton;

App.js #

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import LoginButton from './components/LoginButton';
import Home from './components/Home';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<LoginButton />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

index.js #

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import { msalConfig } from './authConfig';

const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.handleRedirectPromise().then(response => {
  if (response) {
    console.log('User successfully logged in');
  }
}).catch(err => {
  console.error(err);
});

ReactDOM.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
  document.getElementById('root')
);

Home.js #

// src/pages/Home.js
import React from 'react';

const Home = () => {
  return (
    <div>

export default Home;

1. 弹窗登录后手动处理页面跳转 #

loginPopup()属于弹窗式登录，不需要依赖redirectUri配置，登录成功后需手动触发页面跳转：

修改LoginButton.js：

import React from 'react';
import { useMsal } from "@azure/msal-react";
import { useNavigate } from 'react-router-dom';

const LoginButton = () => {
  const { instance } = useMsal();
  const navigate = useNavigate();

  const handleLogin = () => {
    instance.loginPopup()
      .then(() => {
        // 登录成功后跳转至Home页面
        navigate('/home');
      })
      .catch(e => {
        console.error(e);
      });
  };

  return (
    <button onClick={handleLogin} style={styles.button}>Sign in with SSO</button>
  );
};

const styles = {
  button: {
    padding: "10px 20px",
    backgroundColor: "#0078d4",
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  },
};

export default LoginButton;

2. 用MSAL组件自动管理登录状态 #

使用MSAL React提供的AuthenticatedTemplate和UnauthenticatedTemplate，自动根据登录状态渲染对应页面，避免手动跳转的逻辑问题：

修改App.js：

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import LoginButton from './components/LoginButton';
import Home from './components/Home';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';

function App() {
  return (
    <Router>
      <AuthenticatedTemplate>
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="*" element={<Navigate to="/home" />} />
        </Routes>
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <Routes>
          <Route path="/" element={<LoginButton />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </UnauthenticatedTemplate>
    </Router>
  );
}

export default App;

3. 修复Home.js语法错误 #

原Home.js存在未闭合标签的语法问题，修正后才能正常渲染：

// src/pages/Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>欢迎访问Home页面</h1>
    </div>
  );
};

export default Home;

4. 调整重定向URI配置（可选） #

如果后续改用loginRedirect()重定向式登录，需确保Azure门户中的重定向URI与代码一致，且建议设置为应用根路径（如http://localhost:5173），重定向完成后再导航到Home页面，避免直接重定向到Home导致的状态丢失问题。

内容的提问来源于stack exchange，提问作者Airin Anil