When user is authenticated non-private pages flickers

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:

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

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:

Okay… I found a workaround:

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

  useEffect(() => {
    if (!loading && !isPageReady) {
  }, [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