supabase: Auth middleware example from docs does not work

The demo has been updated with the last version of both Nuxt and Supabase Module. It’s deployed on Netlify. It’s using middleware as it is explained in the doc. Please let me know if you are still experiencing this issue on your own project. A reproduction is needed to help 🙏

@brandondtaylor01 For authentification purpose (client.auth methods) , you should use the useSupabaseAuthClient. Then you can fetch your data with the useSupabaseClient.

I did also notice that, even when using that composable, the middleware still did not receive the data of the user until those cookies were created. And that still required a tab-out and tab-in to accomplish. I managed to get it to work by altering the middleware to this:

export default defineNuxtRouteMiddleware(async (to) => {
  const client = useSupabaseAuthClient();

  if(!(await client.auth.getUser()).data.user) {
    return navigateTo('/sign-in/');
  }

  // no need to redirect, continue.
  // ...
});

It may not be optimal, but it works.

Same here, I’m using the useSupabaseAuthClient to login and logout, and it works locally. But on Netlify it doesn’t.

I fixed it by using useSupabaseAuthClient() instead of useSupabaseClient() to sign in and out.

I am also experiencing this issue. It does not occur when testing locally, only when hosted on Vercel.

Strangly enough this does not solve the issue for me locally. I tried creating a minimal example but you can’t really do this without running Supabase itself, otherwise there is nothing to login to.

My setup is really simple and I fail to see what it incorrect. My login component looks like:

const authClient = useSupabaseAuthClient();
const router = useRouter();

// Local state
const userEmailLogin = ref("");
const userPasswordLogin = ref("");

// Methods
// Login method using email
const login = async () => {
    const { error } = await authClient.auth.signInWithPassword({
        email: userEmailLogin.value,
        password: userPasswordLogin.value
    })
    if (error) {
        return alert('Something went wrong during login!')
    }
    router.push("/dashboard");
}

And the middleware file is exactly the same as in the official example in the docs:

export default defineNuxtRouteMiddleware((_to, _from) => {
    const user = useSupabaseUser();

    if (!user.value) {
        return navigateTo("/login");
    }
})

I don’t think we should close this issue just yet. Any ideas what this could be?

Thanks!