When user is authenticated non-private pages flickers

Get Help and Help Others
1

I’m trying to prevent pages’ loading ‘/login’ and ‘/signup’ if user is already authenticated.
As suggested in another thread, I’ve implemented ‘AuthRedirect’ component as follow:

const AuthRedirect = ({ children }) => {
  const { isAuthenticated } = useAuth()

  if (isAuthenticated) {
    return <Redirect to={routes.dashboard()} />
  }

  return children
}

My route’s file is as follow:

<Router>
    <Private unauthenticated="login" wrap={DashboardLayout}>
        <Route path="/dashboard" page={DashboardPage} name="dashboard" />
    </Private>
    <Set wrap={[AuthRedirect, AuthLayout]}>
        <Route path="/signup" page={SignupPage} name="signup" />
        <Route path="/login" page={LoginPage} name="login" />
    </Set>
    <Route notfound page={NotFoundPage} />
</Router>

So far so good.
But the problem is when I visit for the first time ‘/login’ or ‘/signup’ pages. For a while (and before the redirect) the page flickers showing me the AuthLayout.

How can I solve this?
Thanks :slight_smile:

2

Okay… I found a workaround:

const AuthRedirect = ({ children }) => {
  const { isAuthenticated, loading } = useAuth()
  const [isPageReady, setIsPageReady] = useState(false)

  useEffect(() => {
    if (!loading && !isPageReady) {
      setIsPageReady(true)
    }
  }, [loading, isPageReady])

  if (isAuthenticated) {
    return <Redirect to={routes.dashboard()} />
  }
  
  return isPageReady ? children : null
}

Hope It will help those who have the same problem.

If there’s a better way to manage this, please share!

[please note: I’m using Supabase as auth provider]

1 Like