N
Nuxt•2mo ago
funkyj8157

nuxt middleware auth refresh

Hi. How do you guys prevent the quick flash when you refresh the page where a supabase middleware check is on? Right now i first shortly get redirected to te login page and then back to the dashboard. I think this i because the check is with supabase client so not on the server. Is this a normal thing? the code i use == export default defineNuxtRouteMiddleware((to, _from) => { const user = useSupabaseUser() if (!user.value) { return navigateTo('/login') } })
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @funkyj8157. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, the flash you're experiencing when refreshing a page with Supabase authentication middleware is a common issue. This happens because the authentication check is initially happening on the client side after the page has started to load. The problem occurs because when you refresh the page, Nuxt first renders the page, then your middleware runs the authentication check with Supabase client, and only after that does it redirect unauthenticated users to the login page. There are a few approaches to fix this: 1. Use navigateTo instead of useRouter Make sure you're using the navigateTo helper function rather than useRouter().push() for redirects in middleware, as this handles server-side redirects better: 
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser()

  if (!user.value) {
    return navigateTo('/login')
  }
})
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser()

  if (!user.value) {
    return navigateTo('/login')
  }
})
This is already what you're doing, which is good! Stack Overflow confirms this is the correct approach. 2. Configure Supabase redirect options The Supabase module for Nuxt has built-in redirect functionality that might be causing the flash. You can configure or disable these redirects in your nuxt.config.ts: 
supabase: {
  redirectOptions: {
    login: '/login',
    callback: '/confirm',
    exclude: ['/*'],  // Adjust this to exclude routes that don't need auth
  },
}
supabase: {
  redirectOptions: {
    login: '/login',
    callback: '/confirm',
    exclude: ['/*'],  // Adjust this to exclude routes that don't need auth
  },
}
As mentioned in this Stack Overflow post, the Supabase module automatically redirects to login by default, which could be contributing to your issue. 3. Server-side authentication check For a more robust solution, you might want to implement server-side authentication checks. This would prevent the page from even starting to render before the authentication status is determined. You can use the requireUserSession utility if you're using auth-utils, or implement your own server-side check as shown in this Stack Overflow answer: 
const userService = useUserService();
const { data, error } = await useAsyncData('data', () => {
  return userService.getSelf().catch(() => {
    if (import.meta.server) {
      const response = requestEvent.node.res;
      if (!response.headersSent) {
        response.writeHead(302, {Location: '/login'});
        response.end();
      } else {
        router.push('/login');
      }
    }
  })
});
const userService = useUserService();
const { data, error } = await useAsyncData('data', () => {
  return userService.getSelf().catch(() => {
    if (import.meta.server) {
      const response = requestEvent.node.res;
      if (!response.headersSent) {
        response.writeHead(302, {Location: '/login'});
        response.end();
      } else {
        router.push('/login');
      }
    }
  })
});
This approach ensures that on server-side rendering, the redirect happens before any content is sent to the client, eliminating the flash. The flash you're experiencing is indeed normal with client-side authentication checks, but it can be improved with the approaches mentioned above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@587229444641521689> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?