access_token hash remains in URL after sign-in with OAuth provider

[Soviut]

Bug report

Describe the bug

I'm using Vue 3 with Vue Router 4 (latest). I'm using OAuth for sign-in, specifically github. The flow works fine and redirects back, but the #access_token=XXX hash remains visible until I navigate to another page.

This happens regardless of what I set redirectTo. It redirects to that page, but the hash remains on it, regardless of which page I use.

(my workarounds are in the additional details)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

await supabase.auth.signInWithOAuth({
  provider: 'github',
})

2. Sign in to GitHub
3. Get redirected back to /
4. Note the #access_token=xxx hash that remains
5. Click a link to navigate to another page, hash goes away

Expected behavior

Hash will appear briefly, then once supabase is done authenticating the hash should be removed by doing a history.replace() so you can't press the back button to get to the route with the hash in it.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Ubutu 20 (running in WSL2 on Windows 10)
• Browser (if applies) Chrome
• Version of supabase-js: @supabase/supabase-js@2.0.0-rc.4
• Version of Node.js: v16.14.2

Additional context

I've tried two workarounds,

My first workaround was to redirectTo a callback page which immediately redirects to the intended destination without the hash. This works but does a bunch of redirect the user can see.

Next, I tried to use supabase.onAuthStateChange() to check the hash and immediately replace it. This seemed to work at first, but it seems there's a race condition to when the event triggers versus when the hash updates, so checking for the #access_token= presence wasn't reliable.

supabase.auth.onAuthStateChange(() => {
  if (route.hash.startsWith('#access_token=')) {
    router.replace({ hash: '' })
  }
})

Finally, my current workaround is to use a Vue watch to watch the current route's hash for changes.

watch(
  () => route.hash,
  (hash) => {
    if (hash.startsWith('#access_token')) {
      router.replace({ hash: '' })
    }
  },
  { immediate: true }
)

[CodysCodingCloud]

I know that this is regarding v2, however a similar issue occurs in v1.
oddly when using OAuth on local host, the hash does get evaluated immediately and the site would refresh. However when I attempted to deploy to heroku using a custom domain and updating the Site URL in the supabase dashboard, the hash remains the URL.
something I found interesting was that if I were to try OAuth in local host with the deployed Site URL in the dashboard, the hash does get updated. the reverse also allows the hash to be evaluated

[kirbby]

Same for MagicLink Login in Vue 3 and Vue Router 4 using hash routes.
I had the feeling sometimes the access_token gets cleared and everything works and sometimes it stays and then shows my 404 Page not found, because of the hash routing. (only tested locally, not with a built project)

[j4w8n]

I think this more of a framework and/or browser issue. I came across the same thing with SvelteKit.

I do a client-side navigation after sign-in, which resolves this (user's login from /login, so a redirect is warranted anyway). Even if staying on the same url after login, client-side nav doesn't cause any flicker of content. However, the url with hash ends up in the browser history if you don't have a way of clearing it with your framework or natively.

[j4w8n]

I read this too quickly and misunderstood. I was thinking you were saying it was simply leaving the #.

Unfortunately, I haven't been able to reproduce your issue.

[hf]

Will likely get fixed with #574.

[whollacsek]

@hf is this fixed since then? I see that you've reverted #574

[yakhinvadim]

I'm seeing this issue in gotrue-js 2.24.0, access_token remains in the URL after the redirect. I'm using Google provider.

@hf should the issue be reopened?

[KazakovKirill]

I have same issue with Nuxt 3 and supabase OAuth:

[Vue Router warn]: The selector "#access_token=..." is invalid. If you are using an id selector, make sure to escape it. You can find more information about escaping characters in selectors at https://mathiasbynens.be/notes/css-escapes or use CSS.escape (https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape).

Has anyone found a solution how to fix this?

"@nuxtjs/supabase": "^0.3.5",
"nuxt": "^3.4.3"

[staniboy]

I have same issue with Nuxt 3 and supabase OAuth:

[Vue Router warn]: The selector "#access_token=..." is invalid. If you are using an id selector, make sure to escape it. You can find more information about escaping characters in selectors at https://mathiasbynens.be/notes/css-escapes or use CSS.escape (https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape).

Has anyone found a solution how to fix this?

"@nuxtjs/supabase": "^0.3.5", "nuxt": "^3.4.3"

Same problem here with Supabase OAuth (Google provider) and Nuxt 3