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> 
Top comments (0)