Login & Signup

Authentication screens for email/password login and role-based signup. These pages live under the guest-only _auth layout which redirects authenticated users to the dashboard.

Route Information

Login Page

Route: /login

File: src/routes/_auth/login.tsx

Layout: _auth (guest-only, centered)

Max Width: max-w-md (448px)

Signup Page

Route: /signup

File: src/routes/_auth/signup.tsx

Layout: _auth (guest-only, centered)

Max Width: max-w-md (448px)

Login Form

Centered card with social OAuth buttons, email/password fields, forgot password link, and signup redirect. Entry animation: spring blur+fade+slide up.

Login — Default State

Welcome Back

Sign in to continue your fitness journey

or continue with email
Forgot password?

Don't have an account? Sign up here

Login States

Loading / Submitting
Validation Error

Invalid login credentials

Please enter a valid email

Signup Form

Includes role toggle (Client/Trainer), OAuth buttons, full name, email, password with real-time requirements, confirm password, terms checkbox, and login redirect. Heading changes dynamically based on role selection.

Signup — Client Role Selected

Create Your Account

Start your fitness journey with personalized training

or continue with email
At least 8 characters
At least 1 number
At least 1 uppercase letter
I agree to the Terms of Service and Privacy Policy

Already have an account? Sign in here

Are you a trainer? Sign up as a trainer

Component Inventory

Component Source Usage
Button@/components/ui/buttonSubmit, gradient CTA style
Input@/components/ui/inputEmail, password fields
Label@/components/ui/labelForm field labels
PasswordInput@/components/auth/password-inputPassword with show/hide toggle
SocialLoginButtons@/components/auth/social-login-buttonsGoogle + Facebook OAuth
Separator@/components/ui/separatorDivider with overlay text
Checkbox@/components/ui/checkboxTerms acceptance (signup only)
Loader2lucide-reactSpinning indicator in submit button

Data Requirements

Mutations

  • useLogin() — loginFn via Supabase signInWithPassword
  • useSignup() — signupFn via Supabase signUp

Cache Updates on Success

  • authKeys.session() — set directly from response
  • authKeys.user() — set directly from response
  • router.invalidate() — re-evaluate route guards

Schemas

  • loginSchema — email (z.email), password (min 8)
  • signupSchema — name (min 2, max 50), email, password (min 8, 1 uppercase, 1 number), confirmPassword (must match), role (client|trainer), terms (must be true)

Responsive Behavior

Desktop (1024px+)

Centered card at max-w-md. Full padding, shadow-2xl backdrop blur.

Tablet (768px)

Same layout, card remains centered. No layout changes needed.

Mobile (<640px)

Card fills width with minimal horizontal margin. Social buttons stack vertically. All form elements full-width.

Role Variations

Auth pages are role-agnostic for login. For signup, the role toggle changes:

Client Selected

Heading: "Create Your Account" — Subtext: "Start your fitness journey with personalized training"

Trainer Selected

Heading: "Join as a Trainer" — Subtext: "Start building your client base and grow your fitness business"