AuthStatus is not changing from configuring state using amplify ui react

Question

I'm using AWS amplify UI react to create the authentication flow in the react application. I followed the document and made the navigation flow using the doc below.

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

However, after logging in, I was able to see the login page flickering each time when I access any other route. To solve this, I followed one of the answers from the below question.

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

Unfortunately now, the page is always stuck in the "configuring" state and the authStatus never getting changed at all. How do I handle this scenario to automatically redirect to the login page if not authenticated and not show the login page each time user refreshes the page?

NOTE: This question is related to amplify-ui react with Authenticator.provider component.

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 />;
    }
}

And few routes in appRoutes.

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

Answer 1

Unfortunately, this appears to be a known bug with <Authenticator.Provider> and <Authenticator/>.

Until the bug is fixed, there is a known workaround that involves always including the <Authenticator/> component within the active dom structure and then hiding it using CSS. It's pretty terrible, but, worked for me:

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

In the future, I am planning to write a custom UI and handle the authentication in my backend before dropping these components altogether.