⚔️CritForge
📸

Auth & Notification Examples

Visual examples and screenshots for authentication and notification features

authnotificationsexamplesvisual

This document provides visual examples of what users will see when auth notifications are triggered.

Email Verification (New User)

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ ✓  Welcome to CritForge!                                    │
│                                                               │
│    Your email is verified and you're ready to forge epic    │
│    D&D content!                                              │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Gradient from green-50 to amber-50 (parchment)
  • Border: Green-200
  • Icon: Green checkmark circle
  • Duration: 5 seconds
  • Position: Bottom-right (Sonner default)

Trigger: User clicks email verification link from signup email

URL: /generate/npc?welcome=true&verified=true

Email Verification (Returning User)

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ ✓  Email Verified Successfully                              │
│                                                               │
│    Your email has been confirmed. You're all set!           │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Same green gradient as welcome toast
  • Shorter, more concise message
  • Duration: 5 seconds

Trigger: User verifies email from a resent verification link

URL: /generate/npc?verified=true

Password Reset Success

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ 🔑  Password Reset Complete                                 │
│                                                               │
│     Your password has been updated successfully.            │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Gradient from blue-50 to amber-50
  • Border: Blue-200
  • Icon: Blue key icon
  • Duration: 4 seconds

Trigger: User successfully updates password after clicking reset link

URL: /generate/npc?password_reset=true

Email Address Updated

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ ✉  Email Address Updated                                    │
│                                                               │
│    Your email has been changed. Please verify your new      │
│    email address.                                            │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Gradient from purple-50 to amber-50
  • Border: Purple-200
  • Icon: Purple mail icon
  • Duration: 4 seconds

Trigger: User confirms email change from confirmation link

URL: /settings?email_updated=true

Magic Link Login

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ ✨  Successfully Signed In                                   │
│                                                               │
│     Welcome back! You've been authenticated via magic link. │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Gradient from amber-50 to yellow-50
  • Border: Amber-200
  • Icon: Amber sparkles icon
  • Duration: 4 seconds

Trigger: User clicks magic link from login email

URL: /dashboard?magic_link=true (or custom next URL)

Session Renewed

Toast Appearance

┌─────────────────────────────────────────────────────────────┐
│ 🛡  Session Renewed                                          │
│                                                               │
│    Your session has been refreshed. Continue your           │
│    adventure!                                                │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Gradient from indigo-50 to amber-50
  • Border: Indigo-200
  • Icon: Indigo shield icon
  • Duration: 4 seconds

Trigger: User reauthenticates or session is automatically renewed

URL: ?reauth=true (can be on any page)

Error States

Verification Failed

┌─────────────────────────────────────────────────────────────┐
│ ✕  Verification Failed                                       │
│                                                               │
│    Verification link expired or invalid. Please sign in or  │
│    request a new link.                                       │
└─────────────────────────────────────────────────────────────┘

Visual Details:

  • Background: Destructive red theme (Sonner default error style)
  • Border: Red
  • Icon: Red X icon
  • Duration: 6 seconds (longer for errors)

Trigger: User clicks expired or invalid verification link

URL: /login?error=verification_failed&message=...

Invalid Link

┌─────────────────────────────────────────────────────────────┐
│ ✕  Invalid Link                                              │
│                                                               │
│    Invalid verification link                                 │
└─────────────────────────────────────────────────────────────┘

Trigger: User accesses auth confirmation route without token

URL: /login?error=no_token

Session Expired

┌─────────────────────────────────────────────────────────────┐
│ ✕  Session Expired                                           │
│                                                               │
│    Your session has expired. Please sign in again.          │
└─────────────────────────────────────────────────────────────┘

Trigger: User's session expires and they're redirected to login

URL: /login?error=unauthorized

Rate Limit

┌─────────────────────────────────────────────────────────────┐
│ ✕  Too Many Requests                                         │
│                                                               │
│    Please wait a moment before trying again.                │
└─────────────────────────────────────────────────────────────┘

Trigger: User exceeds rate limit for auth actions

URL: ?error=rate_limit

Toast Behavior

Position

  • Desktop: Bottom-right corner
  • Mobile: Bottom center (Sonner responsive)

Animation

  • Enter: Slide up from bottom with fade-in (300ms)
  • Exit: Slide down with fade-out (300ms)
  • Hover: Pause auto-dismiss timer

Interaction

  • Click toast: Dismiss immediately
  • Swipe down (mobile): Dismiss
  • Auto-dismiss: After duration expires
  • Multiple toasts: Stack vertically with newest on top

Accessibility

  • ARIA live region announces content to screen readers
  • Keyboard accessible (Tab to focus, Enter/Space to dismiss)
  • Reduced motion support (instant appearance if prefers-reduced-motion)
  • High contrast mode compatible

Theme Integration

All toasts use CritForge's parchment theme with gradients that transition to amber/yellow:

Event TypeFrom ColorTo ColorBorderIcon Color
Email Verificationgreen-50amber-50green-200green-600
Password Resetblue-50amber-50blue-200blue-600
Email Updatepurple-50amber-50purple-200purple-600
Magic Linkamber-50yellow-50amber-200amber-600
Reauthenticationindigo-50amber-50indigo-200indigo-600
Errorred-50red-50red-200red-600

Responsive Design

Desktop (> 768px)

Screen width: 1200px
Toast width: 356px
Toast position: Bottom-right (16px margin)
Max toasts visible: 3

Tablet (768px - 1024px)

Screen width: 800px
Toast width: 356px
Toast position: Bottom-center
Max toasts visible: 2

Mobile (< 768px)

Screen width: 375px
Toast width: calc(100vw - 32px)
Toast position: Bottom-center
Max toasts visible: 1
Font size: Slightly smaller (14px vs 16px)

Dark Mode Support

CritForge's dark themes (Midnight Tavern, Bloody Dungeon, Underdark Depths) automatically adjust toast colors:

Light Theme Example:

Background: from-green-50 to-amber-50
Text: green-800
Border: green-200

Dark Theme Example:

Background: from-green-950 to-amber-950
Text: green-200
Border: green-800

Sonner handles dark mode transitions automatically based on next-themes provider.

Testing Toast Appearance

Quick Test URLs

Visit these URLs in development to see toasts immediately:

# Email verification (new user)
http://localhost:3000/generate/npc?welcome=true&verified=true

# Password reset
http://localhost:3000/generate/npc?password_reset=true

# Email updated
http://localhost:3000/settings?email_updated=true

# Magic link
http://localhost:3000/dashboard?magic_link=true

# Session renewed
http://localhost:3000/generate/npc?reauth=true

# Error state
http://localhost:3000/login?error=verification_failed&message=Test%20error%20message

Manual Testing Checklist

  • Toast appears within 500ms of page load
  • Toast auto-dismisses after specified duration
  • Toast can be manually dismissed by clicking
  • Multiple toasts stack correctly
  • Gradients render smoothly (no color banding)
  • Icons are properly sized and colored
  • Text is readable on all theme variants
  • Mobile: Toast is full-width with proper margins
  • Screen reader announces toast content
  • Reduced motion: Toast appears instantly without animation

Comparison: Before vs After

Before (No Notification)

User clicks email verification link
→ Redirects to /generate/npc
→ Page loads
→ User sees: "NPC Generator" page
→ No indication that verification succeeded
→ User confused: "Did that work?"

After (With Notification)

User clicks email verification link
→ Redirects to /generate/npc?welcome=true&verified=true
→ Page loads
→ Toast appears: "Welcome to CritForge!" with success message
→ User sees clear confirmation
→ Toast auto-dismisses
→ User confidently proceeds to generate NPCs

Future Enhancements

Potential Visual Improvements

  1. Celebratory Confetti: Add confetti animation for welcome toast
  2. Sound Effects: Optional success sound (off by default)
  3. Custom Illustrations: Replace icons with D&D-themed artwork
  4. Progress Bar: Show countdown timer for auto-dismiss
  5. Action Buttons: Add "Get Started" CTA to welcome toast

Accessibility Enhancements

  1. Dismiss All Button: For users with multiple toasts
  2. Persistent Mode: Option to disable auto-dismiss (accessibility setting)
  3. High Contrast Mode: Enhanced border thickness
  4. Focus Management: Auto-focus toast for keyboard users

Last Updated: 2026-02-04 Related Documentation: docs/features/auth-notifications.md