Authentication

Session Management

• Session State: Stored in the viewer store (useViewerStore), which tracks:

  • status: initial, loading, authenticated, guest, error
  • session: Supabase session object or null
  • error: last error

• Persistence: Store is persisted in local storage (enablePersist: true).

• Initialization: On app start, useInitViewer:

  • Loads the current session from Supabase (getSession)
  • Subscribes to session changes (onAuthStateChange)
  • Updates the viewer store accordingly

Login Flow

• Form: Email and password (validated via zod).
• API Call: login (calls supabase.auth.signInWithPassword)
  • On success, session is stored in viewer store.
  • On error, error is shown via toast.
• UI: On success, redirect to home.

Registration Flow

Step 1: Sign Up

• Form: Email, password, confirm password (validated via zod).
• API Call: signUp (calls supabase.auth.signUp)
  • On success, user receives a confirmation email.
  • emailRedirectTo is set to onboarding step.
  • If user already exists, error is shown.
• UI: On success, redirect to registration success page.
• The user receives an email with a reference to the confirmation of registration. When you click on a link, it is redirected to the onboarding form.

Step 2: Onboarding (Profile Completion)

• Multi-step form: First step - Profile info, Second Step - shipping/billing address
• API Call:
  • All data is validated and on submit send request updateCustomer (in this case - for create new customer) and request createAddress for shipping address and for billing if it is exists.
  • On success, user is redirected to home.
• Validation: Each step is validated via zod; all data is validated before submission.

Password Reset Flow

Step 1: Request Reset

• Form: Email (validated via zod).
• API Call: resetPassword (calls supabase.auth.resetPasswordForEmail)
  • On success, user is prompted to check email.
  • redirectTo is set to the reset password page.

Step 2: Set New Password

• Form: Current Password, New password, confirm password (validated via zod).
• API Call: changePassword : 1 - check current password; 2- if success - updateUser with new password
  • On success, user is redirected to home.
  • On error, error is shown via toast.

Logout Flow

• API Call: logout (calls supabase.auth.signOut)
• State Update: Clears session from viewer store and react-query cache.

Authorization Checks

• Viewer Status: All protected routes use authGuard to check viewer status.
  • If requireAuth is true and user is not authenticated, redirect to login.
  • If requireAuth is false and user is authenticated, redirect to home/profile.
• Hook: useAuthRedirect can be used in components to enforce redirect logic.

Error Handling

• All API calls catch and handle errors, updating the viewer store and showing user-friendly messages via toast.
• Errors are strictly typed and surfaced in the UI.

Integration Patterns

• Hooks: All forms use custom hooks (useLoginForm, useRegistrationForm, useFormStep, etc.) that encapsulate API calls, validation, and navigation.
• TanStack Query: Mutations are used for all async actions, with onSuccess/onError handlers.
• Viewer Store: Central point for session and status, used across the app for access control and personalization.

Flow Diagrams

Registration

1. User submits registration form → signUp → Supabase creates user, sends confirmation email.
2. User confirms email, redirected to onboarding.
3. User completes onboarding steps → updateCustomer and createAddress → Supabase stores customer profile and address data in databases.

Login

1. User submits login form → login → Supabase authenticates, returns session.
2. Session is stored in viewer store, user is redirected to home.

Password Reset

1. User submits email → resetPassword → Supabase sends reset email.
2. User follows link, submits new password → updateUser → Supabase updates password

Security Considerations

• All sensitive operations (registration, login, password reset) are handled via Supabase secure endpoints.
• Session tokens are managed by Supabase and never exposed to the frontend directly.
• All user data is validated both client-side (zod) and server-side (Supabase). Supabase Auth Docs