[Needs update for otp to work] Not logging in. Auth token stays in url

[silverbackdan]

Version

@nuxtjs/supabase: 0.3.8 nuxt: 3.6.5

Reproduction Link

See here https://github.com/supabase/gotrue-js/issues/455#issuecomment-1652553296

Steps to reproduce

New project, install Nuxt and supabase and tryu to use magic link login

What is Expected?

Logged in.

What is actually happening?

Not logged in, auth token in URL

Can we update https://github.com/nuxt-modules/supabase/blob/main/package.json#L29 to 2.31.0?

[stlbucket]

https://github.com/nuxt-modules/supabase/issues/215

This is most likely related.

[silverbackdan]

@stlbucket it is indeed. Workaround for now is to do overrides.

https://github.com/supabase/gotrue-js/issues/455#issuecomment-1652250165

https://github.com/supabase/gotrue-js/issues/455#issuecomment-1649505404

[stlbucket]

@silverbackdan unfortunately that workaround didn't help

[stlbucket]

[stlbucket]

i just cloned this repo, updated the supabase js client, built it and linked with pnpm:

    "@nuxtjs/supabase": "file:~/work/nuxt-modules/supabase",

i got the same result, however

npm list in @nuxt/supabase:

so would this mean it is an issue with gotrue or supabase-js?

[stlbucket]

I added this button to the pages/index.vue file of this repo:

  <button @click="client.auth.signInWithOtp({ email: '[email protected]', options: { emailRedirectTo: 'http://localhost:3000/confirm'} })">
    LogIn OTP
  </button>

this results in the same error with supabase-js 2.31.0

[stlbucket]

https://github.com/supabase/supabase/issues/16100

[stlbucket]

the bug happens here - maybe someone can verify they get the same behavior with this repo?

https://github.com/stlbucket/supabase-cli-bug

this is a sanity check to take nuxt out of the loop - i think this verifies it's a problem with the nuxt plugin:

https://github.com/stlbucket/vue-supabase-initialize

[stlbucket]

not sure who to ask about this... @larbish ?

[stlbucket]

i have done a couple of other tests, and i think this is actually due to the state of my local supabase project.

isolating vue/supabase and nuxt/supabase in the above projects, and building fresh supabase environments for each seems to make the issues go away.

i am still trying to isolate the problem, though.

[stlbucket]

here is a clue - but now i'm afraid i'm going in circles...

[stlbucket]

i think this issue can be closed

[danielward]

@silverbackdan Keen to know whether you resolved this issue? I've been finding that the confirm page my end has the access token in the path, yet the session is null every time. I'm quite new to Nuxt/Vue, but I've been working through various suggested combinations of package versions, but I'm no still further.

[silverbackdan]

@danielward So if the access token is in the path then it usually seems to indicate that the session will not be set/saved. v 1.0.2 seems to work for me - although I need to make sure that the URL clicked in the email will open in the SAME browser as the link was sent from. Otherwise it won't work, but I'm not sure where that issue is - I haven't investigated. That's as much info as I have for now, but hopefully using the latest version and updating all deps will help you resolve this issue now.

[danielward]

@silverbackdan Hmm, I have 1.0.2 and am making sure the email link opens in the same browser (even the same tab) with the same problem. I've followed the documentation to the letter and then explored other package versions to help with no success; the session isn't updated with a user so I'm stuck at the first hurdle. That said, I'm considering going down the email/password sign in route with Supabase initially, esp. as they seem to limit magic links to 100 per hour or something (likely before billing for it), so I imagine this problem will go away for now. Doesn't help though if I would like to support this still, which ideally I would.

[danielward]

I wonder if this helps in any way? It certainly reads like it could be the cause. Interestingly that doesn't appear in Safari on Mac, but it does appear for Chrome on Mac.

[danielward]

Maybe not, I think that's a smoke screen coming from a password manager to be fair.

[danielward]

The issue also applies to password reset links not being parsed and erased from the URL.

[danielward]

Thus far, the only conclusion I've drawn is that it feels like there's no middleware active to pull access tokens from the router's path. If I detect and parse the access token data from the path and provide that to set the session with Supabase auth, that works just fine.

[pguerrero-at-wiris]

I think I'm having the same issue. I just followed to the letter this tutorial: https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3

I'm using magic links to authenticate users but every time I click the links sent by Supabase I got redirected to the login component. @danielward your conclusion seems right to me, it is as if there's no middleware that fetches the tokens in the URL from the magic links. From the tutorial I get that useSupabaseUser() should retrieve this information and login the user... but no luck.

[silverbackdan]

I've moved to handling the token on my own website personally. Microsoft recently started detecting the verify link back to supabase and was either not delivering emails or it was triggering them to go into junk.

See: https://github.com/supabase/supabase/issues/16964

Some more info is here: https://supabase.com/docs/guides/auth/auth-email-templates#redirecting-the-user-to-a-server-side-endpoint

And in my case all I needed was a page at pages/login/[token].vue having this module installed and this is my page:

<script setup lang="ts">
import HomePage from '../index.vue'
import {AuthApiError} from "@supabase/gotrue-js";
const route = useRoute()
const token = route.params.token
const supabase = useSupabaseClient()
const authError = ref<undefined|AuthApiError>()
const loggingIn = ref(true)

async function login () {
  loggingIn.value = true
  authError.value = undefined
  const {  error } = await supabase.auth.verifyOtp({ token_hash: token, type: 'email' })
  if (error) {
    authError.value = error
    loggingIn.value = false
    console.error(error)
  }
}

onMounted(async () => {
  await login()
})
</script>

<template>
  <HomePage :error="authError" :logging-in="loggingIn" />
</template>

In my home page I still have

const user = useSupabaseUser()
const authPaths = useAuthPaths()
watchEffect(() => {
  if (user.value && !usePreventRedirects().value) {
    navigateTo(authPaths.account)
  }
})

But really I need to refactor and just clean up the page roles so it is not mixed up.

But if you have an understanding of vue/nuxt/supabase and this module then you should be able to grab out what you need.

[stlbucket]

@pguerrero-at-wiris - https://supabase.nuxtjs.org/authentication - you may want to look at this instead

I think the recent changes to remove implicit flow has effected you as it did me. I originally implemented using the link you show. It got so broken that I re-implemented my auth, but using the link I have provided. It seems to be working much better.

[danielward]

@stlbucket No luck so far on my end, same issue again where the token information is left in the URL and not handled, so the confirm page just sits on 'Waiting for login...'.

[stlbucket]

@danielward - this sounds like you are trying to use implicit flow. if you are using pkce, from the link above:

All you need to do is to create a login.vue and confirm.vue page in the pages folder.

and they give you examples of what to do.