AuthStatus 未从使用 amplify ui react 配置状态更改答案

【问题标题】：AuthStatus is not changing from configuring state using amplify ui reactAuthStatus 未从使用 amplify ui react 配置状态更改
【发布时间】：2022-12-10 09:33:57
【问题描述】：

我正在使用 AWS amplify UI react 在 React 应用程序中创建身份验证流程。我遵循了文档并使用下面的文档制作了导航流程。

https://ui.docs.amplify.aws/react/guides/auth-protected。

但是，登录后，我能够看到登录页面每次都闪烁当我访问任何其他路线时。为了解决这个问题，我遵循了以下问题的答案之一。

Flicker of login page on Authentication - useAuthenticator - React - Amplify Auth。

不幸的是，现在页面总是停留在“正在配置”状态，并且授权状态永远不会改变。如果未通过身份验证，我该如何处理这种情况以自动重定向到登录页面，并且在用户每次刷新页面时不显示登录页面？

注意：这个问题与放大用户界面反应认证者.provider零件。

RequireAuth.tsx - all routes are wrapped inside this
import { useLocation, Navigate } from "react-router-dom";
import { useAuthenticator } from "@aws-amplify/ui-react";
import PageLoader from "../../components/loader/page-loader";

export function RequireAuth({ children }: any) {
    const location = useLocation();
    const { authStatus, user } = useAuthenticator((context) => [
        context.authStatus,
    ]);
    console.log("authStatus:::", authStatus);
    console.log("user:::", user);

    if (authStatus === "authenticated") {
        return <>{children}</>;
    } else if (authStatus === "unauthenticated") {
        return <Navigate to="/login" state={{ from: location }} replace />;
    } else if (authStatus === "configuring") {
        return <PageLoader />;
    } else {
        return <Navigate to="/login" state={{ from: location }} replace />;
    }
}

appRoutes 中的路线很少。

                <Route
                    path="/"
                    element={
                        <RequireAuth>
                            <AppLayout />
                        </RequireAuth>
                    }>
                    <Route
                        index
                        element={
                            <RequireAuth>
                                <Home />
                            </RequireAuth>
                        }
                    />

【问题讨论】：

标签： javascript reactjs aws-amplify

【解决方案1】：

不幸的是，这似乎是 known bug 与 <Authenticator.Provider> 和 <Authenticator/>。

在错误修复之前，有一个 known workaround 涉及始终在活动 dom 结构中包含 <Authenticator/> 组件，然后使用 CSS 隐藏它。这很糟糕，但是对我有用：

[data-amplify-authenticator] {
    display:none;
}

将来，我计划编写一个自定义 UI 并在我的后端处理身份验证，然后再完全删除这些组件。

【讨论】：