react-auth-kit: Warning: Cannot update a component (`AuthProvider`)

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:

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 21 (3 by maintainers)

Most upvoted comments

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

kyzima-spb on Feb 11, 2023

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

darkmatter18 on Apr 21, 2023

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.

ukasyah99 on Sep 20, 2022