Nuxt•4w ago

Nuxt Supabase and remembering session

I have successfully setup Nuxt + Supabse module. After doing a refresh in my browser it forces me back to the login page. I am wondering if there is a way to make this persistent until the browser closes. I haven't been able to find any documentation on this.

6 Replies

kapa.ai•4w ago

Hi @sleepy jamie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about making the Nuxt + Supabase session persistent until the browser closes, there are a few approaches you can consider: 1. Use the cookieStore experimental feature: Nuxt 3.10 introduced an experimental feature called cookieStore that can help with automatically refreshing cookie values, including authentication tokens. You can enable this in your nuxt.config.ts file:

   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })

This feature allows Nuxt to listen for cookie updates and refresh useCookie ref values automatically Docs: Experimental Features (https://nuxt.com/docs/guide/going-further/experimental-features#cookiestore). 2. Use useCookie composable: Instead of relying on localStorage, you can use the useCookie composable to store the user session information. This approach can help avoid hydration mismatches and persist the state between reloads:

   export const useUser = () => useCookie<User | null>('user', {
     default: () => null,
     watch: true,
   })

   export const useUser = () => useCookie<User | null>('user', {
     default: () => null,
     watch: true,
   })

Stack Overflow: Persist State Between Reloads in Nuxt v3 (https://stackoverflow.com/questions/77882887) 3. Check Supabase module configuration: Ensure that your Supabase module configuration in nuxt.config.ts is not set to automatically redirect to the login page. You might want to adjust the redirectOptions:

   supabase: {
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
       exclude: ['/*'],
     },
   }

   supabase: {
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
       exclude: ['/*'],
     },
   }

Stack Overflow: Supabase oauth redirectUrl not working | Nuxt 3 (https://stackoverflow.com/questions/78707068) 4. Implement a custom auth middleware: You can create a custom auth middleware that checks for the user's session and only redirects to the login page if the session is truly invalid. Be careful with the implementation to avoid unnecessary server-side calls:

   export default defineNuxtRouteMiddleware(async (to, from) => {
     if (process.client) {
       const user = await getCurrentUser();
       if (!user) {
         return navigateTo({
           path: "/login",
         });
       }
     }
   });

   export default defineNuxtRouteMiddleware(async (to, from) => {
     if (process.client) {
       const user = await getCurrentUser();
       if (!user) {
         return navigateTo({
           path: "/login",
         });
       }
     }
   });

Stack Overflow: How to use Nuxt VueFire Session Cookie with App Check and browser key restrictions? (https://stackoverflow.com/questions/78466983) Remember to handle token refresh logic appropriately to maintain the session even after the initial token expires. The Supabase module should handle this for you, but you may need to ensure it's configured correctly. If these approaches don't solve your issue, you might need to investigate further into how your Supabase authentication is set up and how the tokens are being stored and refreshed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

gabrielstuff•5d ago

Got the same king of issue with persisting the session. And It starting to drive me nuts. Got a nuxt project which works perfectly fine with nuxt-supabase but in an other project it does not work. The session is not persisting. The cookies are there, the configuration is the same. only diff are the uri and the app (going to try this) I'm deep in this. Already tried this solution. Tested in production (eg. not a localhost and it did not fix anything) Here is what I tried : - Changed the port - Deploy in production - Change the version down to v1.3.5 - Add supabase.cookieOptions.secure in nuxtConfig - Tried the experimental.cookieStore = true in nuxtConfig I'm running out of idea just made a plugin to overide the document.cookie usage found out it's somewhere else that this is happening

gabrielstuff•5d ago

People complening here (for Strapi) about the same behavior : https://github.com/nuxt-modules/strapi/issues/382

GitHub

Nuxt 3 Cookie Disappears on page reload · Issue #382 · nuxt-modules...

On user login, the cookie gets set. However, on page refresh the cookie is deleted. Also, the expiry doesn't appear be to taking place. This is my nuxt.config. Any ideas. On the following post ...

gabrielstuff•5d ago

how do you force a specific version ? I'm using nuxt-supabase ok let's try out ! Oh god ! let me try on the new site Lord thank you @l422y it is fixed

gabrielstuff•5d ago

Lost 5 hours on this… don’t get why my minimal repro was working even after I removed the pnpmlock file and clear module and cache. I guess there is an other cache somewhere

Gaming

Programming

Nuxt Supabase and remembering session