Email & Password Authentication

• Enable secure register and login using email and password credentials for your SaaS users.
• This method requires the user to enter a valid email and a secure password during registration.
• Once registered, the credentials are stored securely (passwords are hashed), and users can immediately log in to your application using their email and password.
• Email verification can be added optionally using Better Auth's email verification plugin.

Prerequisites

• Database Setup: Ensure you have configured and migrated your database. Better Auth supports automatic database management and migrations. See the Database Setup documentation.

Environment Variables

Add the following variables to your .env file. Create the file if it doesn't exist.

.env

BETTER_AUTH_URL="http://localhost:3000"
BETTER_AUTH_SECRET="your-secret-key-here"
DATABASE_URL="your-database-connection-string"

How It Works

• Users enter their email and password in the register/login form.
• Credentials are sent to Better Auth's built-in API endpoints (/api/auth/sign-in/email or /api/auth/sign-up/email).
• The backend automatically:
  • Hashes passwords using secure algorithms
  • Looks up the email in your database
  • Verifies credentials and creates sessions
• If valid, a secure session is established and managed by Better Auth.

What’s Already Done

• LoginForm component handles login using authClient.signIn.email()
• RegisterForm component handles signup using authClient.signUp.email()
• Form validation is done with zod + react-hook-form
• Password is masked and toggleable with eye icon
• Session management with authClient.useSession() hook
• Google OAuth login is also included
• Errors are handled with UI alerts and toast notifications
• Environment variables for auth behavior are pulled from appConfig

File Overview

• Login Page UI: src/app/login/page.tsx → Renders the <LoginForm />
• Login Form Logic: src/components/forms/auth/login-form.tsx → Handles form rendering, validation, signIn call, and toast notifications.
• Auth Server Instance: lib/auth/auth.ts → Better Auth server configuration with email/password enabled.
• Auth Client Instance: lib/auth/client.ts → Client-side auth functions and hooks.
• API Route: app/api/auth/[...all]/route.ts → Better Auth API handler.

Email Verification

• Better Auth supports email verification through its email verification plugin
• To enable this feature, add the email verification plugin to your Better Auth configuration
• Configure your email provider (SMTP, Resend, Mailgun) in the Better Auth settings