Reset 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.