Nuxt Supabase Cookie Management Script

NuxtSupabaseCookieMgmt.vue

<script setup lang="ts">
// Copied from https://github.com/nuxt-modules/supabase/issues/300#issuecomment-1793667652
/**
 * Handle Auth Cookies
 */
const supabase = useSupabaseClient()

// get cookie options
const config = useRuntimeConfig().public.supabase;
const { cookieOptions } = config;

const accessToken = useCookie('sb-access-token', {
  maxAge: cookieOptions.maxAge,
  path: "/",
  sameSite: <boolean | "lax" | "strict" | "none" | undefined>cookieOptions.sameSite,

  // secure: cookieOptions.secure // if this is enabled it doesn't work anymore
})

const refreshToken = useCookie('sb-refresh-token', {
  maxAge: cookieOptions.maxAge,
  path: "/",
  sameSite: <boolean | "lax" | "strict" | "none" | undefined>cookieOptions.sameSite,
})

// listen for auth changes, set/delete cookies
supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT') {
    // delete cookies on sign out
    accessToken.value = null
    refreshToken.value = null
  } else if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
    // set cookies on sign in
    accessToken.value = session?.access_token
    refreshToken.value = session?.refresh_token
  }
})

</script>