useSupabaseUser() returns null on page load after oauth redirect

[nddr]

Version

@nuxtjs/supabase: v1.0.2 nuxt: v3.6.5

Steps to reproduce

This happens when logging in with both Discord and Google OAuth.

• Sign in with OAuth provider (Redirect to provider)
• Authorize (Redirect back to app)
• Check useSupabaseUser

What is Expected?

Before v1.0.0 useSupabaseUser would return the logged in user.

What is actually happening?

When being redirected back from authorization, useSupabaseUser returns null on page load.

My Nuxt/Supabase config

  supabase: {
    redirectOptions: {
      login: '/',
      callback: '/',
      exclude: ['/agents', ... '/oauth'],
    },
  },

[Aietes]

Try a separate login and callback page. Handling everything on one page can lead to problems with the auth flow. Please also ensure that your login function redirects to the confirm page via the redirectTo option, like so:

const signInWithOAuth = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: 'https://<your.domain>/confirm',
    },
  })
  if (error) console.log(error)
} 

Make sure that the URL you use here is explicitly configured in your Supabase Authentication -> URL Configuration settings, otherwise the redirect defaults to your site URL. Please also note that a fully qualified URL is needed here.

[nddr]

Thanks @Aietes

[nddr]

@Aietes, interesting find, I didn't have to use the redirectTo option for it to work. I only needed to change the callback in the redirectOptions to '/confirm'. I also didn't need to create a confirm page.

[Aietes]

Thank you for sharing, I'm glad it works now! I'm not quite sure why it works without a confirm page, but since the session is extracted from the URL on callback, it might not matter if you actually have a page or not. However, you might want to use a confirm route at some point, for example, if you want to route users back to the page they were on before authentication.