Learning Objectives

Build password reset request flow
Handle password update with tokens
Implement email verification
Create resend verification flow
Handle error states gracefully

1. Password Reset Flow Overview

The password reset flow involves multiple steps to ensure security while providing a smooth user experience. The following diagram shows the complete journey from requesting a reset to successfully changing the password.

User clicks "Forgot Password"
         ↓
Enters email address
         ↓
Supabase sends reset email
         ↓
User clicks link in email
         ↓
Redirected to /auth/callback
         ↓
Callback exchanges code for session
         ↓
Redirected to /reset-password
         ↓
User enters new password
         ↓
Password updated → Dashboard

2. Forgot Password Page

The forgot password page provides a simple interface for users to request a password reset link. It captures the email address and provides clear feedback about the next steps.

Page Component

This server component renders the forgot password page with branding elements, the form component, and a link back to the login page. The layout follows the same pattern as other auth pages for consistency.

// app/(auth)/forgot-password/page.tsx
import Link from 'next/link'
import { ForgotPasswordForm } from './forgot-password-form'

export const metadata = {
  title: 'Forgot Password | RizPay',
  description: 'Reset your RizPay password',
}

export default function ForgotPasswordPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        {/* Logo */}
        <div className="text-center">
          <div className="mx-auto w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-xl">R</span>
          </div>
          <h1 className="mt-4 text-3xl font-bold text-gray-900">
            Forgot your password?
          </h1>
          <p className="mt-2 text-gray-600">
            No worries, we'll send you reset instructions.
          </p>
        </div>

        {/* Form */}
        <ForgotPasswordForm />

        {/* Back to login */}
        <p className="text-center">
          <Link
            href="/login"
            className="text-sm text-primary font-medium hover:underline inline-flex items-center gap-2"
          >
            <ArrowLeftIcon className="w-4 h-4" />
            Back to login
          </Link>
        </p>
      </div>
    </div>
  )
}

function ArrowLeftIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
    </svg>
  )
}

Form Component

The form component handles user input and submission state. After the email is sent, it displays a success message with clear instructions and provides an option to retry if the user doesn't receive the email.

// app/(auth)/forgot-password/forgot-password-form.tsx
'use client'

import { useActionState, useState } from 'react'
import { forgotPassword } from '@/app/actions/auth'
import { Input } from '@/components/ui/Input'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'

const initialState = {
  error: undefined,
  errors: undefined,
  success: undefined,
  message: undefined,
}

export function ForgotPasswordForm() {
  const [state, formAction, isPending] = useActionState(forgotPassword, initialState)
  const [emailSent, setEmailSent] = useState(false)

  // Show success message
  if (state.success || emailSent) {
    return (
      <div className="bg-white p-8 rounded-xl shadow-card space-y-6">
        <div className="text-center">
          <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
            <MailIcon className="w-8 h-8 text-green-600" />
          </div>
          <h2 className="text-xl font-semibold text-gray-900 mb-2">
            Check your email
          </h2>
          <p className="text-gray-600">
            {state.message || "We've sent a password reset link to your email address."}
          </p>
        </div>

        <div className="bg-gray-50 rounded-lg p-4">
          <h3 className="font-medium text-gray-900 mb-2">What's next?</h3>
          <ol className="text-sm text-gray-600 space-y-2 list-decimal list-inside">
            <li>Check your email inbox (and spam folder)</li>
            <li>Click the password reset link</li>
            <li>Create a new password</li>
          </ol>
        </div>

        <Button
          variant="outline"
          className="w-full"
          onClick={() => setEmailSent(false)}
        >
          Didn't receive email? Try again
        </Button>
      </div>
    )
  }

  return (
    <form action={formAction} className="bg-white p-8 rounded-xl shadow-card space-y-6">
      {/* Error */}
      {state.error && (
        <Alert variant="error">{state.error}</Alert>
      )}

      {/* Email Input */}
      <Input
        label="Email Address"
        name="email"
        type="email"
        placeholder="Enter your email address"
        required
        autoComplete="email"
        error={state.errors?.email?.[0]}
      />

      {/* Submit */}
      <Button type="submit" className="w-full" loading={isPending}>
        Send Reset Link
      </Button>
    </form>
  )
}

function MailIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
  )
}

3. Server Action for Password Reset Request

The server action validates the email, sends the reset request to Supabase, and returns a consistent response regardless of whether the email exists. This prevents attackers from discovering which emails are registered in the system (email enumeration attack prevention).

// app/actions/auth.ts
"use server";

import { createClient } from "@/lib/supabase/server";
import { forgotPasswordSchema } from "@/lib/validations/auth";

interface ActionResponse {
  success?: boolean;
  error?: string;
  errors?: Record<string, string[]>;
  message?: string;
}

export async function forgotPassword(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    email: formData.get("email") as string,
  };

  // Validate email
  const result = forgotPasswordSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const supabase = await createClient();

  const { error } = await supabase.auth.resetPasswordForEmail(
    result.data.email,
    {
      redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback?next=/reset-password`,
    }
  );

  if (error) {
    // Don't reveal if email exists or not for security
    if (error.message.includes("rate limit")) {
      return { error: "Too many requests. Please try again later." };
    }

    // Log error but return generic message
    console.error("Password reset error:", error.message);
  }

  // Always return success to prevent email enumeration
  return {
    success: true,
    message:
      "If an account exists with this email, you will receive a password reset link.",
  };
}

4. Auth Callback Handler

The callback route handles the redirect from Supabase after the user clicks the reset link in their email. It exchanges the temporary authorization code for a session and redirects the user to the appropriate page based on success or failure.

// app/auth/callback/route.ts
import { createClient } from "@/lib/supabase/server";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");
  const next = searchParams.get("next") ?? "/dashboard";
  const error = searchParams.get("error");
  const error_description = searchParams.get("error_description");

  // Handle error from Supabase
  if (error) {
    console.error("Auth callback error:", error, error_description);
    return NextResponse.redirect(
      `${origin}/login?error=${encodeURIComponent(error_description || error)}`
    );
  }

  if (code) {
    const supabase = await createClient();

    const { error: exchangeError } =
      await supabase.auth.exchangeCodeForSession(code);

    if (exchangeError) {
      console.error("Code exchange error:", exchangeError.message);
      return NextResponse.redirect(
        `${origin}/login?error=${encodeURIComponent("Invalid or expired link. Please try again.")}`
      );
    }

    // Successful exchange
    const forwardedHost = request.headers.get("x-forwarded-host");
    const isLocalEnv = process.env.NODE_ENV === "development";

    if (isLocalEnv) {
      return NextResponse.redirect(`${origin}${next}`);
    } else if (forwardedHost) {
      return NextResponse.redirect(`https://${forwardedHost}${next}`);
    } else {
      return NextResponse.redirect(`${origin}${next}`);
    }
  }

  // No code provided
  return NextResponse.redirect(`${origin}/login?error=missing_code`);
}

5. Reset Password Page

The reset password page is where users create their new password after clicking the link in their email. It verifies the user has a valid session before allowing them to set a new password.

Page Component

This server component verifies that the user has come from a valid password reset link by checking for an active session. Users without a valid session are redirected back to the forgot password page with an error message.

// app/(auth)/reset-password/page.tsx
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { ResetPasswordForm } from './reset-password-form'

export const metadata = {
  title: 'Reset Password | RizPay',
  description: 'Set your new password',
}

export default async function ResetPasswordPage() {
  // Verify user has a valid session (from password reset link)
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  // If no user, they haven't come from a valid reset link
  if (!user) {
    redirect('/forgot-password?error=expired')
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        {/* Logo */}
        <div className="text-center">
          <div className="mx-auto w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
            <span className="text-white font-bold text-xl">R</span>
          </div>
          <h1 className="mt-4 text-3xl font-bold text-gray-900">
            Set new password
          </h1>
          <p className="mt-2 text-gray-600">
            Your new password must be different from previously used passwords.
          </p>
        </div>

        {/* Form */}
        <ResetPasswordForm />
      </div>
    </div>
  )
}

Form Component

The reset password form includes password strength validation and visibility toggles for better user experience. It uses the PasswordStrength component to provide real-time feedback as users type their new password.

// app/(auth)/reset-password/reset-password-form.tsx
'use client'

import { useActionState, useState } from 'react'
import { resetPassword } from '@/app/actions/auth'
import { Input } from '@/components/ui/Input'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'
import { PasswordStrength } from '@/components/auth/PasswordStrength'

const initialState = {
  error: undefined,
  errors: undefined,
}

export function ResetPasswordForm() {
  const [state, formAction, isPending] = useActionState(resetPassword, initialState)
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)

  return (
    <form action={formAction} className="bg-white p-8 rounded-xl shadow-card space-y-6">
      {/* Error */}
      {state.error && (
        <Alert variant="error">{state.error}</Alert>
      )}

      {/* New Password */}
      <div className="space-y-2">
        <div className="relative">
          <Input
            label="New Password"
            name="password"
            type={showPassword ? 'text' : 'password'}
            placeholder="Enter your new password"
            required
            autoComplete="new-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            error={state.errors?.password?.[0]}
            rightIcon={
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="p-1 hover:bg-gray-100 rounded"
              >
                {showPassword ? (
                  <EyeSlashIcon className="w-5 h-5" />
                ) : (
                  <EyeIcon className="w-5 h-5" />
                )}
              </button>
            }
          />
        </div>
        <PasswordStrength password={password} />
      </div>

      {/* Confirm Password */}
      <Input
        label="Confirm New Password"
        name="confirmPassword"
        type={showPassword ? 'text' : 'password'}
        placeholder="Confirm your new password"
        required
        autoComplete="new-password"
        error={state.errors?.confirmPassword?.[0]}
      />

      {/* Submit */}
      <Button type="submit" className="w-full" loading={isPending}>
        Reset Password
      </Button>
    </form>
  )
}

function EyeIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
    </svg>
  )
}

function EyeSlashIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
    </svg>
  )
}

6. Server Action for Password Update

This server action handles the actual password update. It validates the new password against the schema, ensures it meets security requirements, updates the password in Supabase, and redirects the user to the dashboard with a success message.

// app/actions/auth.ts (add to existing)
"use server";

import { createClient } from "@/lib/supabase/server";
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
import { resetPasswordSchema } from "@/lib/validations/auth";

export async function resetPassword(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    password: formData.get("password") as string,
    confirmPassword: formData.get("confirmPassword") as string,
  };

  // Validate
  const result = resetPasswordSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const supabase = await createClient();

  // Update password
  const { error } = await supabase.auth.updateUser({
    password: result.data.password,
  });

  if (error) {
    if (error.message.includes("same as")) {
      return {
        error: "New password must be different from your current password",
      };
    }
    return { error: error.message };
  }

  // Clear cache and redirect
  revalidatePath("/", "layout");
  redirect("/dashboard?message=password_updated");
}

7. Email Verification Flow

After registration, users need to verify their email address before accessing protected features. This section covers the verification notice page that users see after registration and the resend functionality.

Verify Email Notice

The verify email page displays instructions and provides a way to resend the verification email. It uses URL parameters to personalize the message with the user's email address.

// app/(auth)/verify-email/page.tsx
import { Suspense } from 'react'
import Link from 'next/link'
import { VerifyEmailContent } from './verify-email-content'

export const metadata = {
  title: 'Verify Email | RizPay',
}

export default function VerifyEmailPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full text-center">
        <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
          <MailIcon className="w-8 h-8 text-blue-600" />
        </div>

        <h1 className="text-2xl font-bold text-gray-900 mb-2">
          Verify your email
        </h1>

        <Suspense fallback={<p>Loading...</p>}>
          <VerifyEmailContent />
        </Suspense>

        <div className="mt-8 space-y-4">
          <Link
            href="/login"
            className="text-sm text-primary font-medium hover:underline"
          >
            Back to login
          </Link>
        </div>
      </div>
    </div>
  )
}

function MailIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
  )
}

Verify Email Content

This client component reads the email from URL parameters and displays personalized instructions. It also renders the resend button when an email address is available in the URL.

// app/(auth)/verify-email/verify-email-content.tsx
'use client'

import { useSearchParams } from 'next/navigation'
import { ResendVerificationButton } from './resend-button'

export function VerifyEmailContent() {
  const searchParams = useSearchParams()
  const email = searchParams.get('email')

  return (
    <div className="space-y-4">
      <p className="text-gray-600">
        We've sent a verification email to{' '}
        {email ? (
          <span className="font-medium text-gray-900">{email}</span>
        ) : (
          'your email address'
        )}.
      </p>

      <p className="text-gray-600">
        Click the link in the email to verify your account.
      </p>

      <div className="bg-gray-50 rounded-lg p-4 text-left">
        <h3 className="font-medium text-gray-900 mb-2">Didn't receive the email?</h3>
        <ul className="text-sm text-gray-600 space-y-1">
          <li>Check your spam or junk folder</li>
          <li>Make sure you entered the correct email</li>
          <li>Wait a few minutes and check again</li>
        </ul>
      </div>

      {email && <ResendVerificationButton email={email} />}
    </div>
  )
}

Resend Verification

The resend button component includes rate limiting via a countdown timer to prevent abuse. It provides clear feedback about the request status and disables the button during the cooldown period.

// app/(auth)/verify-email/resend-button.tsx
'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'

interface ResendVerificationButtonProps {
  email: string
}

export function ResendVerificationButton({ email }: ResendVerificationButtonProps) {
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
  const [countdown, setCountdown] = useState(0)

  const handleResend = async () => {
    setLoading(true)
    setMessage(null)

    const supabase = createClient()

    const { error } = await supabase.auth.resend({
      type: 'signup',
      email,
      options: {
        emailRedirectTo: `${window.location.origin}/auth/callback`,
      },
    })

    setLoading(false)

    if (error) {
      if (error.message.includes('rate limit')) {
        setMessage({ type: 'error', text: 'Too many requests. Please wait before trying again.' })
      } else {
        setMessage({ type: 'error', text: error.message })
      }
    } else {
      setMessage({ type: 'success', text: 'Verification email sent!' })
      // Start countdown
      setCountdown(60)
      const interval = setInterval(() => {
        setCountdown((c) => {
          if (c <= 1) {
            clearInterval(interval)
            return 0
          }
          return c - 1
        })
      }, 1000)
    }
  }

  return (
    <div className="space-y-3">
      {message && (
        <Alert variant={message.type}>{message.text}</Alert>
      )}

      <Button
        variant="outline"
        onClick={handleResend}
        loading={loading}
        disabled={countdown > 0}
        className="w-full"
      >
        {countdown > 0
          ? `Resend in ${countdown}s`
          : 'Resend verification email'}
      </Button>
    </div>
  )
}

8. Email Verification Confirmation

After the user clicks the verification link in their email, they are redirected to this confirmation page. It provides a clear success message and a prominent button to proceed to login.

// app/(auth)/email-confirmed/page.tsx
import Link from 'next/link'
import { Button } from '@/components/ui/Button'

export const metadata = {
  title: 'Email Confirmed | RizPay',
}

export default function EmailConfirmedPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
      <div className="max-w-md w-full text-center">
        <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
          <CheckIcon className="w-8 h-8 text-green-600" />
        </div>

        <h1 className="text-2xl font-bold text-gray-900 mb-2">
          Email verified!
        </h1>

        <p className="text-gray-600 mb-8">
          Your email has been successfully verified. You can now sign in to your account.
        </p>

        <Link href="/login">
          <Button className="w-full">
            Sign In
          </Button>
        </Link>
      </div>
    </div>
  )
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
    </svg>
  )
}

9. Change Password (Settings)

Authenticated users can change their password from the settings page. This requires verification of their current password before allowing them to set a new one, providing an extra layer of security.

The change password form validates that the new password is different from the current one and includes the password strength indicator for guidance.

// app/(dashboard)/settings/security/change-password-form.tsx
'use client'

import { useActionState, useState } from 'react'
import { changePassword } from '@/app/actions/auth'
import { Input } from '@/components/ui/Input'
import { Button } from '@/components/ui/Button'
import { Alert } from '@/components/ui/Alert'
import { PasswordStrength } from '@/components/auth/PasswordStrength'

const initialState = {
  error: undefined,
  errors: undefined,
  success: undefined,
}

export function ChangePasswordForm() {
  const [state, formAction, isPending] = useActionState(changePassword, initialState)
  const [newPassword, setNewPassword] = useState('')

  return (
    <form action={formAction} className="space-y-6">
      <h2 className="text-lg font-semibold">Change Password</h2>

      {state.error && (
        <Alert variant="error">{state.error}</Alert>
      )}

      {state.success && (
        <Alert variant="success">Password updated successfully!</Alert>
      )}

      {/* Current Password */}
      <Input
        label="Current Password"
        name="currentPassword"
        type="password"
        placeholder="Enter your current password"
        required
        autoComplete="current-password"
        error={state.errors?.currentPassword?.[0]}
      />

      {/* New Password */}
      <div className="space-y-2">
        <Input
          label="New Password"
          name="newPassword"
          type="password"
          placeholder="Enter your new password"
          required
          autoComplete="new-password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          error={state.errors?.newPassword?.[0]}
        />
        <PasswordStrength password={newPassword} />
      </div>

      {/* Confirm New Password */}
      <Input
        label="Confirm New Password"
        name="confirmNewPassword"
        type="password"
        placeholder="Confirm your new password"
        required
        autoComplete="new-password"
        error={state.errors?.confirmNewPassword?.[0]}
      />

      <Button type="submit" loading={isPending}>
        Update Password
      </Button>
    </form>
  )
}

Change Password Action

The change password server action first verifies the current password by attempting to sign in with it. This ensures users cannot change passwords without knowing the current one, adding an extra layer of security against session hijacking.

// app/actions/auth.ts (add)
import { z } from "zod";

const changePasswordSchema = z
  .object({
    currentPassword: z.string().min(1, "Current password is required"),
    newPassword: z
      .string()
      .min(8, "Password must be at least 8 characters")
      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
      .regex(/[0-9]/, "Password must contain at least one number"),
    confirmNewPassword: z.string(),
  })
  .refine((data) => data.newPassword === data.confirmNewPassword, {
    message: "Passwords do not match",
    path: ["confirmNewPassword"],
  })
  .refine((data) => data.currentPassword !== data.newPassword, {
    message: "New password must be different from current password",
    path: ["newPassword"],
  });

export async function changePassword(
  prevState: ActionResponse,
  formData: FormData
): Promise<ActionResponse> {
  const rawData = {
    currentPassword: formData.get("currentPassword") as string,
    newPassword: formData.get("newPassword") as string,
    confirmNewPassword: formData.get("confirmNewPassword") as string,
  };

  const result = changePasswordSchema.safeParse(rawData);

  if (!result.success) {
    return {
      error: "Validation failed",
      errors: result.error.flatten().fieldErrors,
    };
  }

  const supabase = await createClient();

  // Verify current password by re-authenticating
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user?.email) {
    return { error: "User not found" };
  }

  // Try to sign in with current password to verify
  const { error: signInError } = await supabase.auth.signInWithPassword({
    email: user.email,
    password: result.data.currentPassword,
  });

  if (signInError) {
    return { error: "Current password is incorrect" };
  }

  // Update password
  const { error: updateError } = await supabase.auth.updateUser({
    password: result.data.newPassword,
  });

  if (updateError) {
    return { error: updateError.message };
  }

  return { success: true };
}

10. Complete Email Templates

Customizing email templates improves brand consistency and user trust. Configure these templates in your Supabase dashboard to match your application's branding and provide clear calls to action.

Configure in Supabase Dashboard

Go to Authentication > Email Templates and customize:

Confirm Signup

This email is sent when a new user registers. It includes a clear call-to-action button and alternative link text for users whose email clients don't render buttons properly.

<h2>Welcome to RizPay!</h2>
<p>Hi there,</p>
<p>
  Thanks for signing up! Please confirm your email address by clicking the
  button below:
</p>

<a
  href="{{ .ConfirmationURL }}"
  style="
  display: inline-block;
  background-color: #4F46E5;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  margin: 16px 0;
"
>
  Confirm Email Address
</a>

<p>Or copy and paste this URL into your browser:</p>
<p style="color: #6B7280; word-break: break-all;">{{ .ConfirmationURL }}</p>

<p>This link will expire in 24 hours.</p>

<p>
  If you didn't create an account with RizPay, you can safely ignore this email.
</p>

<p>Best regards,<br />The RizPay Team</p>

Reset Password

This email is sent when a user requests a password reset. It emphasizes the time-sensitive nature of the link and reassures users who didn't request the reset that their account is safe.

<h2>Reset Your Password</h2>
<p>Hi there,</p>
<p>
  We received a request to reset your password. Click the button below to set a
  new password:
</p>

<a
  href="{{ .ConfirmationURL }}"
  style="
  display: inline-block;
  background-color: #4F46E5;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  margin: 16px 0;
"
>
  Reset Password
</a>

<p>Or copy and paste this URL into your browser:</p>
<p style="color: #6B7280; word-break: break-all;">{{ .ConfirmationURL }}</p>

<p>This link will expire in 1 hour.</p>

<p>
  If you didn't request a password reset, you can safely ignore this email. Your
  password will remain unchanged.
</p>

<p>Best regards,<br />The RizPay Team</p>

Additional Resources

Congratulations! You've completed the authentication section. You now have a fully functional authentication system with registration, login, password reset, and email verification.

Next Steps: Continue to build out the bill payment features using the authentication foundation you've created.