Handling expired token from Supabase when resetting password

[bjorn]

I’m using the built-in templates for reset password with Supabase auth.
When resetting Supabase sends an email with a link which contains a “login token” to identify the user who wants to reset the password.
After the password has been reset I can’t use the link again because it’s expired. That’s fine. But how do I handle that in Weweb? From what I can se I get a link like this (if I try to use an expired link): https://www.mydomain.com/reset-password/#error=access_denied&error_code=403&error_description=Email+link+is+invalid+or+has+expired

Should I use javascript to check if a hash exists in the current URL and if so extract the error message and trigger something based on that? Or is there a simpler way to do it?

[Broberto]

Yes, the only way Supabase can tell you about an error is the hash. That’s the simplest way.

[bjorn]

Great. Just wondering if there was an easier/better way to do it.

This is my solution:
On the reset password page I created an “On page load” workflow with a single “Custom javascript” action. This is the script:

if(window.location.hash){
// Remove # from the hash string.
const hash = window.location.hash.substring(1); //
// Get all params as a dictionary
const params = new URLSearchParams(hash);
// Check if error exists
const error = params.get(‘error’);
if(error){
// Set contentToShow
variables[‘f6eb76c0-9f1e-4c8b-9e3f-87504eea6ce4’] = ‘expired’;
}
}

Depending om my variable “contentToShow” I show different views for the user.

[Broberto]

I think this is very clean and simple, unfortunately WeWeb only has query strings, so this is an okay way of getting the hash

[MathiasS-B]

(Repost for people like me looking for awnsers)

If you want the link to work multible times. This is a solution. The confirm password is not possible multible times.
So i have been working quite abit with the reset token.
The standard flow is.
Supabase emails the user with a url to supabase.
user click link.
Supabase create access token and redirect user to Weweb application,
Weweb looks at the Access token in the URL like: {{WewebsiteURL}}#Access-token= eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30

Weweb saves this token and redirect user to same site with no token in the URL.
User send new password to supabase with AccessToken provided.

---

The Weweb only works if there is a AccessToken provided from supabase.

Some times
A problem arises when the users Mail program like Outlook, and some others: opens the supabase link to verify that its not a virus.
if this happens, supabase gives the MailProgram the AccessToken and the mail program trashes the Accesstoken.
When the User clicks the link, Supabase is like: "nahh bro. This link has already been used, you are not given a AccessToken. but you go to the weweb page and try.

Weweb then cant find the AccessToken in the URL and the user/weweb can’t provide a AccessToken for supabase to reset the Password and supabase returns the Errror No access tokenprovided.

Supabase Writes this in their documentation like this: Email Templates | Supabase Docs

As of now its not totally clear what we need to do in the weweb Documentation.

But I have the solution.

in your Supabase template instead of the {{ .ConfirmationURL }} write the href thing like this:
a href=“{{ .RedirectTo }}?token={{ .Token }}&type=recovery&email={{ .Email }}”"

then in you Weweb page you need to use the workflow Verify OTP in your workflow. Taking the params in from the URL to log in the user with a single sign in operation. This makes the user logged in and the user can send their new password to Supabase.
I made the work flow like this:
Log the user in.

Verify the URL has the otp token and email:

Use weweb to log the user in and get the params

And then the user is logged in.

this will make the Set new password work.

I hope this makes sense.