Skip to main content

Authentication

Onie Studio uses Supabase Auth with JWT tokens for all authenticated requests.

Auth Flow​

  1. User signs in via email/password through the Supabase Auth client
  2. Supabase returns an access_token (JWT) and refresh_token
  3. All API requests include the JWT in the Authorization header
  4. The Edge Function validates the JWT and resolves the user's role

Making Authenticated Requests​

Use the fetchWithAuth utility (defined in src/utils/sessionHelper.ts):

import { fetchWithAuth } from '@/utils/sessionHelper';

const response = await fetchWithAuth('/clients', {
  method: 'GET',
});
const data = await response.json();

fetchWithAuth automatically:

  • Attaches the Authorization: Bearer {token} header
  • Handles 401 responses by refreshing the token and retrying
  • Applies exponential backoff on 503 errors

Token Refresh​

The Supabase client handles token refresh automatically. If the access token expires, the SDK uses the refresh token to obtain a new one transparently.

Client Portal (Token-Based Access)​

Clients accessing the portal via email link use a portal token — a one-time secure token embedded in the URL as a hash fragment (#portal=TOKEN). This mode:

  • Does not require a Supabase account or login
  • Is iframe-safe (no cookies or redirects)
  • Provides read access to the client's own data only

Session Roles​

The user's role is determined at sign-in and stored in the Supabase user metadata. The frontend reads this to decide which view to render:

// From App.tsx
if (userRole === 'client') {
  return <ClientPortal />;
}
return <CreativeDashboard />;