CODEWITHSUNDEEP
google-chrome-extensionsupabasesupabase-js
Elias Benjamin
Elias Benjamin

Reputation: 11

Supabase password reset for Chrome extension is missing access_token and refresh_token in URL

I'm building an extension for Google Chrome and using supabase-js to handle the authentication. I'm creating the supabase client and interacting with it from the service worker.

I'm having issues with the reset password flow. Since the user is not authenticated by the time they are resetting their password, no session exists, and I get an ""Auth Session Missing"" error when calling supabase.auth.updateUser()

To solve, I am trying to create a new session before calling updateUser(). The issue is the access_token and refresh_token are missing from the URL in the email sent from Supabase. The email structure is shown below:

https://abc123.supabase.co/auth/v1/verify?token=abc123&type=recovery&redirect_to=https://abc123.org/

How am I supposed to create a new session if there isn't an access_token and refresh_token? What is the token I'm being sent?

It seems like supabase is expecting supabase.auth.onAuthStateChange to get triggered, and I'd call the function from there, but it is not receiving the event. (possibly because it's being forwarded to a new tab and not the extension popup).

Is there a different function I should be using to get the access_token and refresh_token in the URL?

Thanks

Upvotes: 0

Views: 314

Answers (2)

The Codesmith
The Codesmith

Reputation: 1

If you are still facing the issue, turns out it was not you, it was supabase who messed up. The issue was in supabase/ssr package (0.4.0) and it has been fixed in the 0.5.0 version. Here is the PR:

https://github.com/supabase/ssr/commit/7dc1837dc4aba870b32792586969316df980ce07

Here is PR description:

What is the current behavior?

When resetting a user's password with an email template which has a URL defining the type value as recovery, and using the verifyOtp method to process the token_hash and type, the SSR server client's onAuthStateChange function does not recognize the PASSWORD_RECOVERY event that verifyOtp fires. This prevents the code here from running; resulting in the new session not being saved to cookies, and the user is not considered logged in.

What is the new behavior?

User is logged in.

Upvotes: 0

Elias Benjamin
Elias Benjamin

Reputation: 11

I found the answer. Although it only appeared to have a token in the URL, a hash map was able to parse it out into an access_token and a refresh_token:

export function parseUrlHash(url: string) {
  const hashParts = new URL(url).hash.slice(1).split('&');
  const hashMap = new Map(
    hashParts.map(part => {
      const [name, value] = part.split('=');
      return [name, value];
    }),
  );

I used this guide to help fix: https://pustelto.com/blog/supabase-auth/#basic-setup

Upvotes: 0

Related Questions