Auth session is not persistent

[bart]

Version

@nuxtjs/supabase: ^1.0.2
nuxt: ^3.7.1

Reproduction Link

https://github.com/bart/test-supabase

Steps to reproduce

1. Add SUPABASE_URL and SUPABASE_KEY to your .env file
2. npm run dev
3. localhost:3000 should redirect you to the login page. Enter username and password and click Login button
4. You should be redirected to /
5. Give it a refresh and you are logged out (redirected back to /login) again

What is Expected?

Auth session should be persistent. Auth guard should not redirect to login page as long session isn't expired or user does not sign out manually.

What is actually happening?

Auth guard redirects back to login page assuming user isn't logged in.

[phillipmohr]

I can confirm that this happens since v1.0.0

[Dmytro-Tihunov]

Same here, it is a problem

[ivanushkaPr]

Same here. Version 1.1.0 and 1.0.0.
But sometimes i get slightly different behavior.
On first login it redirects me to '/' and oAuth token is present in applications.

But after logging out, then i try to login again, i got redirected back to login page. And no token is present in application.
The only thing i can see is auth-token-code-verifier.

[tomasmorello]

Same issue here.

[bart]

I think the reason for that redirect is an empty user object (null) loaded in the middleware on server-side page loads (for example on a hard refresh). You can verify it by using a custom middleware and logging useSupabaseUser() On client side it's value is set but on server-side it is null.

A work around would be a custom middleware that only gets executed on client side but in my opinion that's not a rock solid solution:

// /middleware/auth.js
export default defineNuxtRouteMiddleware((to, _from) => {
    const user = useSupabaseUser()
    if (!user.value && process.client) {
        return navigateTo('/login')
    }
})

If I also add a custom server-side auth middleware (in /server/middleware folder) that tries to load await serverSupabaseUser(event) I'm getting the same error as described in #238

I think we need a solution for this issue as soon as possible. Otherwise this Nuxt module doesn't make any sense - at least for authentication.

[philliphartin]

Same issue here and I'm using the implicit flow.

I've attached some screenshots of the Analytics being reported locally.

When a page is refreshed, we get redirected to /login.
After a second my watch function kicks in and then redirects me to /

  watch(
    user,
    () => {
      if (user.value) {
        return navigateTo('/')
      }
    },
    { immediate: true }
  )

It makes local development a massive pain.

The number of strange behaviours has been multiplying the past few weeks, but I presume it's because of recent updates at supabases end too.

[ammuench]

Posting here as well since it seems related, I just put up PR #272 to address the invalid claim: missing sub claim I was getting that seemed to be caused by a race condition in the useSupabaseUser composable when making an API call right after login that tried to read the user cookie to get some user data on an internal API route.

By changing the useSupabaseUser composable to an async function and properly handling the promise called within it, I eliminated the errors I was seeing on my end.

I updated my example "confirmation" code from the example to this:

const user = await useSupabaseUser();
watch(
  user,
  async () => {
    if (user.value) {
      const { data } = await useFetch("/api/user", useCookieHeader());
      console.log(data);
    }
  },
  { immediate: true }
);

I properly received the data from the endpoint I no longer had these issues

---

Hopefully this helps anyone else currently stuck on this

[jawngee]

@ammuench's async useSupabaseUser solved MFA headaches for me in SSR.

[jawngee]

I lifted his pull request into a composable that I use now instead of useSupabaseUser:

import type { User } from "@supabase/supabase-js";
import { useState } from "#imports";

export default async function useAsyncSupabaseUser() {
  const supabase = useSupabaseClient();

  const user = useState<User | null>("supabase_user", () => null);
  const sessionData = await supabase?.auth.getSession();
  const session = sessionData.data.session;

  if (session) {
    if (JSON.stringify(user.value) !== JSON.stringify(session.user)) {
      user.value = session.user;
    } else {
      user.value = null;
    }
  }

  return user as Ref<User | null>;
}

Thanks @ammuench!

[bart]

But it still means we have to use a custom guard, right?

[guarenty]

Same issue here I think. Anything new?

Issues:

1. Getting redirected to '/login' after login
2. When I try await serverSupabaseUser(event) I get invalid claim: missing sub claim - see Upgrade @nuxtjs/supabase from 0.3.x to 1.0.x: 500 error > invalid claim: missing sub claim #238

I tried a bunch of stuff and and also looked back into an older project where it is working. I think the issue here is that the sb-access-token and sb-refresh-token cookie do not get set. Can anyone with more experience can confirm this?

Without this working this Nuxt module doesn't make any sense for authentication, like @bart mentioned earlier.

Edit:
I added this code to my new and my older project as app.vue. In my Older Project cookies get set, in my newer project not.

<template>
  {{ data }}
</template>

<script setup lang="ts">
const supabase = useSupabaseClient()

const { data, error } = await supabase.auth.signInWithPassword({
  email: "tester@test.de",
  password: "password"
})
</script>

Version older Project: 0.3.8
Version newer Project: 1.1.3

[fdarkaou]

I have this issue as well, any fixes for this?

[guarenty]

@fdarkaou I don't know if it is a proper fix, but it is working for me. See #300