CODEWITHSUNDEEP
angularvercelsupabasehash-location-strategy
krabochki
krabochki

Reputation: 15

HashLocationStrategy prevents correct open redirectUrl from Supabase

I am making an application using Angular and Supabase. When uploading the application to Vercel, I ran into a problem: after reloading the page, if the user is not on the main page, a 404 error occurred. I solved this error by adding { provide: LocationStrategy, useClass: HashLocationStrategy }. now my paths start like this : ???.vercel.app/#/. Everything works, there is no 404 error after reboot. However, another problem has appeared. I register users as follows:

return database.auth.signUp({
email: user.email,
password: user.password,
options: {
emailRedirectTo:
'???.vercel.app/welcome/',
},
});

And when there is no HashLocationStrategy in the application, the site behaves as expected: after clicking on the confirmation link in the mail, a new session of the authorized user is created, and the current address looks like '???.vercel.app/welcome' + session parameters from supabase. After enabling HashLocationStrategy, I changed the emailRedirectTo link: ???.vercel.app/#/welcome/, and the link confirmation does not open a new session. if you follow the path, then at first it looks like in the first version ('???.vercel.app/welcome' + session parameters), and then after a moment the session parameters from supabase disappear.

As a result, automatic login after confirmation is not possible, since the session is not taken in any way. However, the mail is confirmed and the user can log in by logging in on their own. But the problem is that I still need to take this session after clicking on the link, since there is still, for example, password recovery, for which it is really necessary to get a session

How can I solve the problem of changing the path? Maybe there is a way to get rid of the 404 error in vercel without adding HashLocationStrategy?

Upvotes: 0

Views: 68

Answers (1)

dshukertjr
dshukertjr

Reputation: 18670

You can use the pkce flow on Supabase auth to obtain session without needing to rely on hash in the URL.

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    flowType: 'pkce',
  },
})

Upvotes: 0

Related Questions