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)