Vibestacks LogoVibestacks
Authentication

Authentication Overview

Complete identity management with Better Auth - supporting email/password, magic links, Google OAuth, email verification, and Stripe integration.

Vibestacks uses Better Auth for authentication - a modern, type-safe auth library built for Next.js. It handles user registration, sign-in, sessions, and integrates directly with Stripe for subscription management.

Supported Methods

MethodStatusDescription
Email & PasswordEnabledTraditional username/password authentication
Magic LinkEnabledPasswordless sign-in via email link
Google OAuthEnabledSocial sign-in with Google
GitHub OAuthConfigurableSocial sign-in with GitHub
Email VerificationEnabledRequires email confirmation before access
Two-Factor AuthConfigurableTOTP-based 2FA

All methods can be enabled or disabled via configuration.

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         Your Application                         │
├─────────────────────────────────────────────────────────────────┤
│   Auth Pages              Better Auth              Database      │
│   └─ /sign-in            └─ Session management    └─ PostgreSQL │
│   └─ /sign-up            └─ Token handling        └─ Users      │
│   └─ /forgot-password    └─ OAuth flows           └─ Sessions   │
│   └─ /reset-password     └─ Email sending         └─ Accounts   │
├─────────────────────────────────────────────────────────────────┤
│                        External Services                         │
│   └─ Resend (emails)     └─ Google (OAuth)        └─ Stripe     │
└─────────────────────────────────────────────────────────────────┘

API Endpoint

All authentication operations route through a single endpoint:

/api/auth/[...all]

This handles sign-in, sign-up, sign-out, OAuth callbacks, email verification, password reset, and session management automatically.

Client-Side Hooks

Vibestacks provides React hooks for auth operations:

useSession

const { data: session, isPending } = useSession()

if (isPending) return <Loading />
if (!session) return <SignInPrompt />

return <Dashboard user={session.user} />

useSignIn

const { signIn, isPending } = useSignIn()

// Email/password
await signIn.email({ email, password })

// Magic link
await signIn.magicLink({ email })

// OAuth
await signIn.social({ provider: "google" })

useSignUp

const { signUp, isPending } = useSignUp()

await signUp.email({ name, email, password })

Security Features

  • Password Hashing - Automatic secure hashing via Better Auth
  • HTTP-Only Cookies - Prevents XSS token theft
  • SameSite Policy - CSRF protection
  • Token Expiration - Time-limited verification/reset tokens
  • Email Enumeration Protection - Same response for existing/non-existing emails
  • Session Tracking - IP and user agent logged per session

Password Requirements

RequirementValue
Minimum Length8 characters
Maximum Length128 characters
UppercaseRequired
LowercaseRequired
NumberRequired
Special CharacterOptional

The sign-up form includes a real-time password strength indicator (5-level scale from Very Weak to Very Strong).

Email Templates

TemplatePurposeSubject Line
Magic LinkPasswordless sign-in"Sign in to Your App"
Verify EmailEmail confirmation"Verify your email for Your App"
Reset PasswordPassword recovery"Reset your password for Your App"

All templates are built with React Email for consistent styling.

Next Steps