svex

A SvelteKit application with custom OAuth authentication with Convex.

You can easily add any oauth provider supported by arctic just create a provider like the Google provider and make a callback endpoint like the Google callback.

Tips

You should ALWAYS require the tokenId to be passed with any query, and the SERVER_SECRET with any mutation or action to prevent anyone from running the functions.

You shouldn't run mutations or actions on the frontend, run them in remote functions and on the server.

You should also load the initial data on the server and pass that data into the query to prevent loading states when user first loads the page.

See numbers

Key Features

• Auto Session Rotation: Tokens rotate every hour for security
• Signed Cookies: HMAC-signed tokens prevent tampering
• Session Tracking: Stores IP address & user agent for each session
• Secure Logout: Properly revokes sessions server-side
• Server Secret Protection: All Convex mutations require SERVER_SECRET validation

Authentication Flow

Login Flow

flowchart TD
    A[User clicks 'Login with Google'] --> B[SvelteKit generates OAuth URL<br/>+ PKCE state & verifier]
    B --> C[Redirect to Google OAuth]
    C --> D[User authorizes app]
    D --> E[Google redirects back with code]
    E --> F[Validate state & exchange code<br/>for user info]
    F --> G[Save/update user in Convex<br/>]
    G --> H[Create session in Convex<br/>]
    H --> I[Generate HMAC-signed cookie]
    I --> J[User is logged in ✓]

    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style G fill:#fff3e0
    style H fill:#fff3e0
    style B fill:#f3e5f5
    style F fill:#f3e5f5

Session Management

flowchart TD
    K[Every request] --> L{Valid session cookie?}
    L -->|No| M[Redirect to login]
    L -->|Yes| N{Session > 1 hour old?}
    N -->|No| O[Continue with request]
    N -->|Yes| P[Auto-rotate session token<br/>in Convex]
    P --> Q[Update cookie with new token]
    Q --> O

    R[User clicks logout] --> S[Revoke session in Convex<br/>]
    S --> T[Clear session cookie]
    T --> U[Redirect to login]

    style L fill:#fff3e0
    style P fill:#e8f5e8
    style S fill:#ffebee

Environment Variables

CONVEX_DEPLOYMENT=dev:app

PUBLIC_BASE_URL="http://localhost:5173"
PUBLIC_CONVEX_URL=https://app.convex.cloud

SERVER_SECRET="1l68dmSBkbqwJSgfnCK1ZHqjmGs2aQi5"
SESSION_SECRET="7k8m9n0p1q2r3s"

GOOGLE_CLIENT_ID=".apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GO"

Developing

bun run dev
bun run dev:convex