Authentication

What's Included

• Email/password registration and login
• Google OAuth via Firebase
• Forgot password / reset password flow
• Email verification confirmation page
• Auth middleware for protected routes
• Guest middleware for auth-only pages
• Automatic token refresh on 401 errors

Auth Composable (useAuth)

The useAuth composable handles all authentication flows:

const {
  register,     // (name, email, password) → registers user
  login,        // (email, password) → logs in user
  socialLogin,  // (idToken) → Firebase social auth
  logout,       // () → clears session
  forgotPassword, // (email) → sends reset email
  resetPassword,  // (token, password) → resets password
  refreshToken,   // () → refreshes JWT
  isLoading,    // Ref<boolean>
  error         // Ref<string | null>
} = useAuth()

All methods update the auth store on success and return readonly refs for reactivity.

Auth Store (useAuthStore)

Central state for authentication:

const authStore = useAuthStore()

authStore.token          // JWT access token
authStore.refreshToken   // Refresh token
authStore.user           // UserProfile | null
authStore.isAuthenticated // Computed boolean

Auth state is persisted to localStorage and rehydrated on mount via initAuth().

Pages

Login Page

The login form accepts email and password. On success, it fetches the user profile and redirects to /profile. Includes a link to "Forgot password?" and a social login button.

Register Page

The registration form accepts name, email, and password. On success, the user is logged in immediately and redirected to /profile.

Social Login

The SocialLoginButton component handles the Firebase OAuth flow:

1. User clicks "Sign in with Google"
2. Firebase popup opens for Google OAuth
3. On success, the Firebase ID token is sent to the backend
4. Backend verifies the token and returns JWT credentials
5. User is logged in and redirected

Firebase is optional. If no Firebase config is provided, the social login button is hidden.

Middleware

auth Middleware

Applied to protected pages (/profile, /settings, etc.). Checks authStore.isAuthenticated and redirects to /auth/login if not authenticated.

// In a page component:
definePageMeta({ middleware: 'auth' })

guest Middleware

Applied to auth pages (/auth/login, /auth/register, etc.). Redirects authenticated users to /profile.

Token Refresh

The useApi composable automatically handles token refresh:

1. An API call returns 401 Unauthorized
2. useApi attempts a single token refresh using the stored refresh token
3. If refresh succeeds, the original request is retried with the new token
4. If refresh fails, the user is logged out