在MSAL反应重定向到AZURE AD B2C之后，请在NextJS应用程序中预防错误页面的闪光灯。

Question

上下文＆amp;可重复的方案

我正在使用这些库和工具的组合：

• NextJs 12+（基于React 18+）
• MSAL-BROWSER 2.25+和MSAL-REACT 1.6+（ Microsoft's libs用于azure b2c ）

我正在使用 auth code + pkce 重定向流，因此这是用户的流程：

1. 他们降落在/，主页

2. 他们单击/me 路由器链接

3. 他们转到Azure B2C登录，因为所述页面具有此逻辑：

    ＆lt; msalauthenticationTemplate
     InteractionType = {InteractionType.redirect}
     AuthenticationRequest = {loginRequest}＆gt;
    

   其中 loginrequest.state 设置为 router.aspath （“预期”页面：/me ）

   请注意，该页面也包裹在 a ＆lt; nossr＆gt; 基于stack溢出的组件。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<' /a>

4. 用户在Azure B2C上登录，在/（root）上重定向回我的应用程序

5. ：现在用户简要介绍/（主页）页面

6. 在很短的时间后，用户将发送到/me ，其中将其签名为< /p>

MSAL文档中签名的地方似乎在OIDC或THE的 State 属性上没有太多内容重定向行为，我在。

简而言之：问题

如何确保我的nextJS应用程序中的msal反应将用户立即发送到启动上的“预期”页面，而不会简短地显示root Page的身份服务器重定向到位置？

相关的额外信息

这是我的自定义 _app.js 组件，这似乎是相关的，因为使重定向到预期的页面：

export default function MyApp({ Component, pageProps }) {
  return (
    <MsalProvider instance={msalInstance}>
      <PageHeader></PageHeader>
      <Component {...pageProps} />
    </MsalProvider>
  );
}

ps。为了帮助人们在线搜索的人们找到以下问题：该行为是由 navigatetoginrequesturl触发的：true （是默认值）。将其设置为 false 明确完全禁用将用户完全发送到预期的页面。

使用中间件的尝试解决方案

我根据 app_initializer 在Angular中工作的方式尝试 ，使用中间件在某个时候这样：

// From another file:
// export const msalInstance = new PublicClientApplication(msalConfig);

export async function middleware(_request) {
    const targetUrlAfterLoginRedirect = await msalInstance.handleRedirectPromise()
        .then((result) => {
            if (!!result && !!result.state) {
                return result.state;
            }
            return null;
        });

    console.log('Found intended target before login flow: ', targetUrlAfterLoginRedirect);

    // TODO: Send user to the intended page with router.
}

但是，这会在服务器的控制台上登录：

在登录流之前找到了预期的目标：null

因此中间件似乎还为时过早， msal-reactct 无法应对？耻辱，因为中间件将是完美的，可以为目标页面提供尽可能多的SSR。

这不是更改B2C方面重定向URL的选择，因为我将不断地向需要此行为的应用添加新路由。

请注意，我还尝试使用中间件来嗅出状态，但是由于中间件在节点上运行，因此无法访问哈希片段。

动画gif显示闪烁的主页

这是一个动画gif，显示/home 页面在/me 之前已正确打开。警告，gif是一个浮躁的杂草，所以在扰流板标签中：

从浏览器中，问题“> 使用自定义 navigationclient 尝试解决方案

的 添加自定义 navigationclient 以更紧密地模仿Microsoft存储库中的NextJS示例，例如：

import { NavigationClient } from "@azure/msal-browser";

// See: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/performance.md#how-to-configure-azuremsal-react-to-use-your-routers-navigate-function-for-client-side-navigation
export class CustomNavigationClient extends NavigationClient {
  constructor(router) {
    super();
    this.router = router;
  }

  async navigateInternal(url, options) {
    console.log('