Reset password
Give users the possible to reset a forgotten password
In your project, there is a folder called Reset. This page is used to reset a user's password. Users will be navigated here after receiving a confirmation email.
We use the default functionality from Supabase, which means we have to set up a couple things to get it to work fully.
Setting up the Redirect URL
While the folder is /reset, you still need to add your own website to the code. On top of this you also need to inform Supabase about your redirect URL.
First we go to the code, you can find this part of the code in /app/(auth)/login/login.tsx
You will need to update the function handleReset, specifically the part after redirectTo.
const handleReset = async (e: any) => {
// This function makes it possible for users to log in to the application with Password
e.preventDefault()
setLoading(true)
const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: '<your_url>/reset'
});
if (error) {
setMessage(error.message)
console.log(error)
setLoading(false)
}
router.refresh();
setLoading(false)
};
In my example, redirectTo will look like:
const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: 'https://demo-v1.supaboost.dev/reset'
});
Now that we have set up the code, we need to make sure Supabase is ready also!
Setup redirect URL in Supabase
Open https://supabase.com/ and navigate to your project. In the menu select 'Authentication'.
In the additional side bar, navigate to URL Configuration. On this page, click on Add URL on the Redirect URLs submenu.
In here add your redirect url, that you have setup. In my example, this is 'https://demo-v1.supaboost.dev/reset'
Update the Email Template
Still within Authentication, there is also Email templates. In Supabase you have the possibility to update your custom email templates.
The default Email template combines all existing functionality, but its nice to give your personal touch.
You can update it with basic HTML.