Nuxt•2mo ago

@nuxtjs/supabase early redirect with SSG

Hello, I created a simple Project with the Supabase Module installed, a simple Index Page, a Login Page and the confirm Page. Everything works as expected except when I am logged in and refresh the website. I can then see for a short period of time the Login Page. Can this behavior be prevented? I am deploying using nuxt generate.

3 Replies

kapa.ai•2mo ago

Hi @Matrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This behavior is caused by how authentication state is determined during static site generation (SSG) with the @nuxtjs/supabase module. When you refresh the page, the statically generated HTML is served first—often showing the login page—before the client-side JavaScript hydrates and checks your actual authentication state, which then redirects you to the correct page if you are logged in. This "flash" of the login page is a common issue with SSG and client-side authentication. The knowledge sources do not provide a direct, official solution to completely eliminate this flash with @nuxtjs/supabase and SSG. However, they do confirm that the Supabase module automatically redirects unauthenticated users to the login page by default, and this can be controlled via module configuration. You may want to review the Supabase module's redirect options and consider disabling automatic redirects or customizing the logic to better fit SSG scenarios. For example, you can disable all redirects by setting the redirect option to false in your Nuxt config:

export default defineNuxtConfig({
  supabase: {
    redirect: false
  }
})

export default defineNuxtConfig({
  supabase: {
    redirect: false
  }
})

This will prevent the module from automatically redirecting to the login page, allowing you to handle authentication state and redirection manually, potentially reducing or eliminating the flash of the login page on refresh. For more details, see the relevant discussion: Supabase module default redirect behavior ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@293487308945096704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MatrixOP•2mo ago

I did try to disable redirect and handle it myself using Middleware, but useSupabaseSession returns null on page load. Maybe it's somehow possible with the onAuthStateChange Hook by waiting for INITIAL_SESSION? I tried a bit but could not figure it out to work correctly, because when waiting for the hook to trigger, a non logged in user can see a protected site for a brief second. A loading state in the module would probably be good then?

Gaming

Programming

@nuxtjs/supabase early redirect with SSG

Did you find this page helpful?