Password Reset Page with Supabase and Next.js

In this tutorial, we will create a password reset page using Supabase and Next.js.

We will create two pages: one for requesting a password reset and another for updating the password.

Step 1: Setting up the Request Password Reset Page

First, let's create a page where users can request a password reset. We'll call this page request-reset.tsx.

import { useState } from "react"
import { useSessionContext } from "@supabase/auth-helpers-react"

export default function PasswordReset() {
  const [loading, setLoading] = useState(false)
  const [email, setEmail] = useState("")
  const { supabaseClient } = useSessionContext()

  async function handlePasswordReset(e) {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabaseClient.auth.resetPasswordForEmail(email, {
      redirectTo: `${window.location.origin}/update-password`,
    })

    if (error) {
      alert("Error: ", error.message)
    } else {
      alert("Password reset email sent.")
    }

    setLoading(false)
  }

  return (
    <div>
      <h1>Forgot password</h1>
      <form onSubmit={handlePasswordReset}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Your email"
        />
        <button type="submit" disabled={loading}>
          Submit
        </button>
      </form>
    </div>
  )
}

By using supabaseClient.auth.resetPasswordForEmail, we instruct Supabase to send a password reset email with a link to our second page.

Step 2: Setting up the Update Password Page

Next, let's create a page where users can update their password after they have received the password reset email. We'll call this page update-password.tsx.

import { useState } from "react"
import { useSessionContext, useUser } from "@supabase/auth-helpers-react"
import Router from "next/router"

export default function UpdatePassword() {
  const [loading, setLoading] = useState(false)
  const [password, setPassword] = useState("")
  const { supabaseClient } = useSessionContext()

  const handlePasswordReset = async (e) => {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabaseClient.auth.updateUser({ password })

    if (error) {
      alert("Error: ", error.message)
    } else {
      alert("Password updated successfully")

      // Redirect your user to the app
      Router.push("/")
    }

    setLoading(false)
  }

  return (
    <div>
      <h1>Reset password</h1>
      <form onSubmit={handlePasswordReset}>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="New password"
        />
        <button type="submit" disabled={loading}>
          Submit
        </button>
      </form>
    </div>
  )
}

And that's it! You've got a basic password reset logic using Supabase and Next.js.

You can now add the link to /request-reset on your login page:

<Link href="/request-reset">
  Forgot password?
</Link>