Warning: Cannot update a component (`AuthProvider`)

[SamHoque]

Describe the bug

Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at RequireAuth (http://localhost:3000/static/js/bundle.js:15439:21)
    at Routes (http://localhost:3000/static/js/bundle.js:76253:5)
    at Router (http://localhost:3000/static/js/bundle.js:76186:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:74995:5)
    at AuthProvider (http://localhost:3000/static/js/bundle.js:15341:21)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:27492
scheduleUpdateOnFiber @ react-dom.development.js:25498
dispatchReducerAction @ react-dom.development.js:17452
isAuth @ PrivateRoute.tsx:44
RequireAuth @ PrivateRoute.tsx:50
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651

To Reproduce Steps to reproduce the behavior:

1. Bug happens after using signOut();

Expected behavior No error to be shown in console.

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version Latest

[darkmatter18]

I was not able to reproduce the bug, can you give me some codebase along with detailed steps?

[say8425]

<AuthProvider authType="localstorage" authName="_auth">
    <QueryClientProvider client={queryClient}>
        <DndProvider backend={HTML5Backend}>
            <div className="App">
                <NavigationBar />
                <NavigationMenuBar />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route
                        path="/products"
                        element={
                            <RequireAuth loginPath={"/sign-in"}>
                                <Products />
                            </RequireAuth>
                        }
                    />
                    <Route path="/products/:id" element={<ProductDetail />} />
                    <Route path="/sign-in" element={<SignIn />} />
                </Routes>
            </div>
        </DndProvider>
    </QueryClientProvider>
</AuthProvider>

I have same bugs, when redirected by RequireAuth, then console warn this message

react_devtools_backend.js:4026 Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at RequireAuth (http://localhost:3000/node_modules/.vite/deps/react-auth-kit.js?v=c3de6d14:433:21)
    at Routes (http://localhost:3000/node_modules/.vite/deps/chunk-XANHZZRR.js?v=1ade920d:1141:5)
    at div
    at DndProvider2 (http://localhost:3000/node_modules/.vite/deps/react-dnd.js?v=a35811c2:1443:9)
    at QueryClientProvider (http://localhost:3000/node_modules/.vite/deps/@tanstack_react-query.js?v=990b3ad5:2638:3)
    at AuthProvider (http://localhost:3000/node_modules/.vite/deps/react-auth-kit.js?v=c3de6d14:399:21)
    at RecoilRoot_INTERNAL (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8c47a31c:2681:3)
    at RecoilRoot (http://localhost:3000/node_modules/.vite/deps/recoil.js?v=8c47a31c:2798:5)
    at App
    at Router (http://localhost:3000/node_modules/.vite/deps/chunk-XANHZZRR.js?v=1ade920d:1088:15)
    at BrowserRouter (http://localhost:3000/node_modules/.vite/deps/chunk-XANHZZRR.js?v=1ade920d:1218:5)

[SamHoque]

Hey, I was able to fix this bug, however I don't remember how I did it.

[ukasyah99]

Here's a sandbox:

https://codesandbox.io/s/cocky-driscoll-82kqk0?file=/src/AppRoutes.js

The warning appears when visiting a page wrapped by RequireAuth.

[Netskill89]

Got the same issue here. Is there any solution yet ?

[lampard7824]

still happens to me, in fact, the example in this repo also has the same warnings.

https://github.com/react-auth-kit/react-auth-kit/tree/master/examples/create-react-app

[gabohc]

Same happens to me. As @ukasyah99 says, it appears when you visit a paged wrapped by RequireAuth

[ghost]

Any solution on this?

[oguisantosilva]

is the issue solved?

[berryfd1995]

I am having the same issue, I spent around 4 hours yesterday attempting to find a work around. To the best of my knowledge. It happens in isUseAuthenticated and PrivateRoute isUseAuthenticated PrivateRoute

[oguisantosilva]

I am having the same issue, I spent around 4 hours yesterday attempting to find a work around. To the best of my knowledge. It happens in isUseAuthenticated and PrivateRoute isUseAuthenticated PrivateRoute

i fixed it using this

const PrivateRoute = ({ Component }) => { const isAuthenticated = useIsAuthenticated(); const auth = isAuthenticated(); return auth ? <Component /> : <Navigate to="/login" />; };

[berryfd1995]

i fixed it using this

const PrivateRoute = ({ Component }) => { const isAuthenticated = useIsAuthenticated(); const auth = isAuthenticated(); return auth ? <Component /> : <Navigate to="/login" />; };

So I attempted this before, I still received it when using react router 6 <Outlet/> and within one of the child components using useIsAuthenticated method

[ghost]

i fixed it using this

const PrivateRoute = ({ Component }) => { const isAuthenticated = useIsAuthenticated(); const auth = isAuthenticated(); return auth ? <Component /> : <Navigate to="/login" />; };

this worked for me!!

[davidbro-in]

Same problem here while trying to use the documentation example.

i fixed it using this

const PrivateRoute = ({ Component }) => { const isAuthenticated = useIsAuthenticated(); const auth = isAuthenticated(); return auth ? <Component /> : <Navigate to="/login" />; };

I implemented like this:

const App = () => {
    //https://github.com/react-auth-kit/react-auth-kit/issues/1023
    const PrivateRoute = ({ Component }) => {
        const isAuthenticated = useIsAuthenticated();
        const auth = isAuthenticated();
        return auth ? <Component /> : <Navigate to="/login" />;
    };

    return (
        <AuthProvider authType={'cookie'}
            authName={'_auth'}
            cookieDomain={window.location.hostname}
            cookieSecure={window.location.protocol === "https:"}>
            <BrowserRouter>
                <div className="App">
                    <Navigation />
                    <Routes>
                        <Route path="/login" element={<Login />} />
                        <Route path="/home" element={<PrivateRoute Component={Home} />}></Route>
                    </Routes>
                </div>
            </BrowserRouter>
        </AuthProvider>
    )
}
export default App

[kyzima-spb]

I implemented like this:

IMHO, this is a cleaner solution:

const App = () => {
  const PrivateRoute = ({ children, loginPath }) => {
    const isAuthenticated = useIsAuthenticated();
    const location = useLocation();

    if (isAuthenticated()) {
      return children;
    }

    return <Navigate
      to={loginPath}
      state={{from: location}}
      replace
    />;
  };

  return (
    <AuthProvider
      authType={'cookie'}
      authName={'_auth'}
      cookieDomain={window.location.hostname}
      cookieSecure={window.location.protocol === "https:"}
    >
      <BrowserRouter>
        <div className="App">
          <Navigation />
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route
              path="/home"
              element={<PrivateRoute loginPath="/login"><Home /></PrivateRoute>}
            />
          </Routes>
        </div>
      </BrowserRouter>
    </AuthProvider>
  );
};

export default App

[LupuC]

Was this bug fixed?

[oguisantosilva]

Was this bug fixed?

i don't think so.

[SaswatArabinda]

Here the issue is, the signIn method, takes time to update the context/cookie. In between if the user gets redirected to ProtectedRoute, it fails to authenticate if (!isAuthenticated(context.authState)) {} and forces the user to sign out.

    if (!isAuthenticated(context.authState)) {
        // Redirect them to the /login page, but save the current location they
        // were trying to go to when they were redirected. This allows us to
        // send them along to that page after they login, which is a nicer
        // user experience than dropping them off on the home page.
        context.dispatch(doSignOut());
        return React.createElement(Navigate, { to: loginPath, state: { from: location }, replace: true });
    }

We are completely blocked because of this. Is there any ETA for this bug?

[darkmatter18]

I am trying my best to solve the issue. If any of you have any better solution, let me know here. It'll fast-forward the fixing the bug. Thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aldrinqantas]

had same issue