User only available after middleware has run

Version

@nuxtjs/supabase: v0.1.9 nuxt: v3.0.0-rc.1

Steps to reproduce

create global auth guard like this:

export default defineNuxtRouteMiddleware((to) => {
  const user = useSupabaseUser()
  if (!(user.value) && to.name !== 'login')
    return navigateTo('/login')
})

create login page with logic like this

const client = useSupabaseClient()

const user = useSupabaseUser()

const email = ref('')

const signIn = async() => {
  const { session, error } = await client.auth.signIn({ email: email.value })

}

You’ll get a link like this which redirects you to your page with the credentials to setup a Supabase User.

https://pjbhhvurmrikesghutkr.supabase.co/auth/v1/verify?token=myToken&type=magiclink&redirect_to=http://localhost:3000/

What is Expected?

I should be redirected to the url in the redirect_to query param in the link

What is actually happening?

The user is undefined when the authguard is running its logic and therefore the user is redirected to the login page instead of the original destination. The user only becomes available after the navigation has finished, leaving the user on the login page, even though they are logged in. We could watch the user on the login route and redirect, but this seems unnecessary.

Edit:

Also getting this error on the server side when using the link in the email:

[nuxt] [request error] Auth session missing!
  at ./.nuxt/dev/index.mjs:651:13  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./node_modules/.pnpm/h3@0.7.4/node_modules/h3/dist/index.mjs:417:19  
  at async Server.nodeHandler (./node_modules/.pnpm/h3@0.7.4/node_modules/h3/dist/index.mjs:367:7)

[IIFelix]

Using setTimeout fixed it for me.

const signIn = async () => {
  await client.auth.signIn({
    email: email.value,
    password: password.value,
  })
  await new Promise((resolve) => {
    setTimeout(resolve, 50)
  })
  console.log(user.value)

  navigateTo('/')
}

[mwohlan]

Current workaround for me that works with auth protected routes and magic links:

middleware

export default defineNuxtRouteMiddleware((to) => {
  const user = useSupabaseUser()

  if (!(user.value))
    //reroute to login saving the current destination in the redirect query param
    return navigateTo({ name: 'login', query: { redirect: to.path } })
})

plugin to watch route and user

export default defineNuxtPlugin(() => {
  const user = useSupabaseUser()
// globally watch user and route. If a user and a redirect query param exist: 
  watchEffect(() => {
    if (user.value) {
      const route = useRoute()
      if (route.query.redirect)
        navigateTo({ path: route.query.redirect as string })
    }
  })
})

sign in logic on the login page:

const signIn = async() => {
// the redirectTo param is for magic/confirmation links 
  const { session, error } = await client.auth.signIn({ email: email.value }, { redirectTo: `http://localhost:3000${route.query?.redirect}` })
// this is for username + password sign in to trigger the watchEffect. The component doesnt get rerendered afaik
navigateTo({ name: 'login', query: { redirect: route.query.redirect } })
}

It works for both use cases but is also quite hacky.