Email/Password Authentication 🔐

Email/Password authentication is the traditional method of authenticating users by verifying their credentials through email and password. This method also supports user registration, password reset, and email verification.

You can refer to the official Supabase documentation for more detailed information on email/password authentication.

✨ Features

• User Registration with Email Verification: New users can sign up using their email and password. After registration, a verification email is sent to confirm the user's email address.
• Login with Email/Password: Users can log in using their email and password.
• Forgot-Password/Password-Reset: Users can reset their password if they forget it. A reset link is sent to their registered email.
• Email Verification with Resend Capability: If the user does not verify their email, they can request a resend of the verification email.

⚙️ Configuration

Make sure the environment variables for email/password authentication are properly configured. In your .env file, define the following variables:

NEXT_PUBLIC_AUTH_PASSWORD = true

🛠️ Implementation

Below are the code examples for different functionalities related to email/password authentication.

1. Sign-Up

The sign-up process involves the user registering with their email and password. Example usage for sign-up can be found in the apps/web/src/app/(front)/auth/register/PasswordSignUpForm.tsx file:

import { usePasswordSignUp } from '@repo/auth/sign-up'

const { handleSignUp, error, isSuccess, ... } = usePasswordSignUp({
  emailRedirectTo: 'email_redirect_to_url',
  verifyEmailRedirectTo: 'verify_email_route'
})

await handleSignUp(
  {
    email: 'user_email',
    password: 'user_password',
    'confirm-password': 'user_confirm_password'
  },
  all_users_data
)

2. Sign-In

The sign-in process allows the user to log in using their email and password. Example usage for sign-in can be found in the apps/web/src/app/(front)/auth/login/PasswordSignInForm.tsx file:

import { usePasswordSignIn } from '@repo/auth/sign-in'

const { handleSignIn, error, isSuccess, ... } = usePasswordSignIn('verify_email_route')

await handleSignIn(
  {
    email: 'user_email',
    password: 'user_password'
  },
  all_users_data
)

3. Resending Verification Email

If the user has not verified their email, you can resend the verification email. Example usage for resending verification email can be found in the apps/web/src/app/(front)/auth/verify-email/ResendVerifyEmailButton.tsx file:

import { verifyEmail } from '@/app/(front)/auth/actions'

const { data, error } = await verifyEmail('user_email', 'email_redirect_to_url')

4. Forgot Password / Password Reset

If the user forgets their password, they can request a password reset. When the user clicks the password reset link from the email, they will be automatically logged in and redirected to the page where they can reset their password.

Example usage for forgot-password/password-reset can be found in the apps/web/src/app/(front)/auth/forgot-password/ForgotPasswordForm.tsx file:

import { useForgotPassword } from '@repo/auth/forgot-password'

const { handleForgotPassword, error, isSuccess, ... } = useForgotPassword('password_reset_route')

await handleForgotPassword({ email: 'user_email' })

✅ Conclusion

Email/Password authentication is a reliable and secure method to manage user logins and registrations. The integration is simple and customizable, with support for essential features like email verification, password resets, and more.