One of the most crucial aspects of user management is ensuring users can regain access to their accounts and that their email addresses are legitimate. Supabase Auth makes handling both password resets and email verification remarkably straightforward.
Lost passwords happen to the best of us! Supabase Auth provides a built-in mechanism for initiating password reset flows. When a user forgets their password, you can trigger a password reset email to be sent to their registered email address. This email will contain a secure link that guides them through the process of setting a new password.
You can initiate a password reset from your client-side application using the Supabase JavaScript client. The resetPasswordForEmail method is all you need. You'll provide the user's email address, and Supabase will handle the rest, including sending the email. Remember to configure your email provider in the Supabase dashboard for this to work.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)
async function handlePasswordReset(email) {
const { error } = await supabase.auth.resetPasswordForEmail(email)
if (error) {
console.error('Error sending password reset email:', error.message)
} else {
console.log('Password reset email sent. Check your inbox.')
}
}
// Example usage:
handlePasswordReset('user@example.com')The password reset email will contain a unique token and a confirmation URL. When the user clicks this link, they will be directed to a page in your application where they can enter their new password. Your application will then use the updateUser method with the password argument to finalize the reset. The confirmation URL typically includes the type (password_reset) and the token as query parameters.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)
async function completePasswordReset(password, token) {
const { error } = await supabase.auth.updateUser({ password: password }, token)
if (error) {
console.error('Error updating password:', error.message)
} else {
console.log('Password updated successfully!')
}
}
// Example usage (assuming you've extracted token and new password):
// completePasswordReset('newSecurePassword123!', 'YOUR_RESET_TOKEN')Email verification is essential for ensuring that the email addresses associated with your users are valid and that they are indeed the owners of those addresses. This helps prevent spam and improves the overall security and integrity of your user base. Supabase Auth offers a robust email verification flow.
When a user signs up, or if you want to prompt an existing user to verify their email, you can send a verification email using the sendEmailVerificationLink method. Similar to password resets, this requires your email provider to be configured in Supabase.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)
async function sendVerificationEmail(userEmail) {
const { error } = await supabase.auth.admin.auth.api.getUserByEmail(userEmail).then(({ data, error }) => {
if (error) throw error
return supabase.auth.admin.auth.api.email(data.id).sendVerificationEmail()
})
if (error) {
console.error('Error sending verification email:', error.message)
} else {
console.log('Verification email sent. Please check your inbox.')
}
}
// Example usage:
sendVerificationEmail('new.user@example.com')The verification email will contain a link with a verification token. When the user clicks this link, they'll be directed to a page in your application. You'll need to extract the type (email_change or email_verify) and token from the URL. Then, you can use the verifyEmail method to confirm their email address. This method will update the user's record in Supabase, marking their email as verified.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)
async function verifyUserEmail(token) {
const { error } = await supabase.auth.verifyEmail(token)
if (error) {
console.error('Error verifying email:', error.message)
} else {
console.log('Email verified successfully!')
}
}
// Example usage (assuming you've extracted the token from the URL):
// verifyUserEmail('YOUR_VERIFICATION_TOKEN')You can also check the verification status of a user's email by fetching their user data and inspecting the email_confirmed_at field. If this field is populated, their email is verified.
async function checkEmailVerification() {
const { data: { user }, error } = await supabase.auth.getUser()
if (error) {
console.error('Error fetching user:', error.message)
return
}
if (user && user.email_confirmed_at) {
console.log('Email is verified.')
} else {
console.log('Email is not verified.')
}
}
checkEmailVerification()graph TD;
A[User forgets password] --> B{Trigger Password Reset}; B --> C[Supabase sends reset email]; C --> D[User clicks reset link]; D --> E{User enters new password}; E --> F[Supabase updates password]; F --> G[User can log in again];
H[User signs up] --> I{Send Verification Email}; I --> J[Supabase sends verification email]; J --> K[User clicks verification link]; K --> L{Supabase verifies email}; L --> M[User's email is marked as verified];