How to prevent login page from flashing for a moment when using authentication?

[iammarkps]

I use https://swr.vercel.app/examples/auth example from swr official documentation. On that page it seem fine, when I change path to / it redirect immediately to dashboard without even showing a moment of login page. But when I used it on my project, it show index page for a moment. How to fix this?

This is my useUser() hooks.

import useSWR from 'swr'

export default function useUser() {
  const { data, mutate, error } = useSWR('http://localhost:1323/user')

  const loading = !data && !error
  const loggedOut = data === 'Unauthorized'

  return {
    loading,
    loggedOut,
    user: loggedOut ? null : data,
    mutate,
  }
}

I cannot use loggedOut the same way in the example because fetch won't return error even with my API returning 401 HTTP response. Instead it return the data as text.

Any idea how to fix this?

[iammarkps]

This my repo iammarkps/register.triamudom.club

[vvo]

Here's how vercel.com/ does it at least:

This is an inline JavaScript redirect in the source code sent by servers from vercel.com. It only checks if user is authed and then redirect to dashboard. Is it what you're looking for?

If I was to implement this though, I'd store the "is logged in" in a different cookie than the main session cookie, otherwise you have to set your session cookie to non http-only which can be an issue security wise I guess.

[iammarkps]

Yes! this is exactly what I'm looking for.

And one quick question. Detecting other cookie that session cookie itself, will have any downsides?

[vvo]

There's no downsides of detecting cookies. What I wanted to say is that, by default, session cookies are better saved as "http-only". And when doing so you can't access cookies with document.cookie. So if you want to implement what's inside the screenshot, you will have to create a different cookie than your session cookie I believe.

[tomaszferens]

I tried to do something similar but that still resulted in a flash.

See this comment: vercel/next.js#11346 (comment)

My guess is that you need to set proper headers in order to cache the page that you are about to redirect to. That way, when you change window.location.href, it won't reload the page - the redirect will happen instantly instead.

[nandorojo]

Any idea if this type of thing is possible with Firebase auth? As far as I know, I can only get the firebase ID token asynchronously, which always results in a flash.

[timfuhrmann]

@nandorojo I know this is a bit late, but in case anyone else is wondering, you could use Firebase' session cookies to handle authorization server-side or the way it's described here