# Supabase Auth Setup This guide walks through setting up Supabase authentication for local development. ## 1. Create a Supabase Project 1. Go to [supabase.com](https://supabase.com) and sign in 2. Click "New project" 3. Choose your organization, enter a project name (e.g., `nuzlocke-tracker-dev`), and set a database password 4. Select a region close to you 5. Wait for the project to finish provisioning ## 2. Get Your Project Credentials From the Supabase dashboard: 1. Go to **Project Settings** > **API** 2. Copy the following values: - **Project URL** -> `SUPABASE_URL` / `VITE_SUPABASE_URL` - **anon public** key -> `SUPABASE_ANON_KEY` / `VITE_SUPABASE_ANON_KEY` 3. Go to **Project Settings** > **API** > **JWT Settings** 4. Copy the **JWT Secret** -> `SUPABASE_JWT_SECRET` ## 3. Enable Email/Password Auth 1. Go to **Authentication** > **Providers** 2. Ensure **Email** provider is enabled (it's enabled by default) 3. Configure options as needed: - **Confirm email**: Enable for production, disable for local dev convenience - **Secure email change**: Recommended enabled ## 4. Configure Google OAuth ### Google Cloud Console Setup 1. Go to [Google Cloud Console](https://console.cloud.google.com/) 2. Create a new project or select an existing one 3. Go to **APIs & Services** > **OAuth consent screen** - Choose "External" user type - Fill in app name, user support email, and developer contact - Add scopes: `email`, `profile`, `openid` - Add test users if in testing mode 4. Go to **APIs & Services** > **Credentials** 5. Click **Create Credentials** > **OAuth client ID** 6. Select "Web application" 7. Add authorized redirect URIs: - `https://.supabase.co/auth/v1/callback` - For local dev: `http://localhost:5173/auth/callback` 8. Copy the **Client ID** and **Client Secret** ### Supabase Setup 1. Go to **Authentication** > **Providers** > **Google** 2. Enable the provider 3. Paste the **Client ID** and **Client Secret** from Google 4. Save ## 5. Configure Discord OAuth ### Discord Developer Portal Setup 1. Go to [Discord Developer Portal](https://discord.com/developers/applications) 2. Click **New Application** and give it a name 3. Go to **OAuth2** > **General** 4. Add redirect URIs: - `https://.supabase.co/auth/v1/callback` - For local dev: `http://localhost:5173/auth/callback` 5. Copy the **Client ID** and **Client Secret** ### Supabase Setup 1. Go to **Authentication** > **Providers** > **Discord** 2. Enable the provider 3. Paste the **Client ID** and **Client Secret** from Discord 4. Save ## 6. Configure Environment Variables ### Backend (.env) ```bash SUPABASE_URL=https://your-project-ref.supabase.co SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... SUPABASE_JWT_SECRET=your-jwt-secret-from-dashboard ``` ### Frontend (.env) ```bash VITE_SUPABASE_URL=https://your-project-ref.supabase.co VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... ``` ## 7. Configure Redirect URLs In Supabase Dashboard: 1. Go to **Authentication** > **URL Configuration** 2. Set **Site URL**: `http://localhost:5173` (for local dev) 3. Add **Redirect URLs**: - `http://localhost:5173/auth/callback` - `http://localhost:5173/**` (for flexibility during dev) For production, add your production URLs here as well. ## Verification After setup, you can verify by: 1. Starting the app with `docker compose up` 2. Navigating to the login page 3. Testing email/password signup 4. Testing Google and Discord OAuth flows ## Troubleshooting ### "Invalid redirect URI" error - Ensure the callback URL in your OAuth provider matches exactly what Supabase expects - Check that your Site URL in Supabase matches your app's URL ### "JWT verification failed" - Verify `SUPABASE_JWT_SECRET` matches the one in your Supabase dashboard - Ensure there are no trailing spaces in your environment variables ### OAuth popup closes without logging in - Check browser console for errors - Verify the OAuth provider is properly enabled in Supabase - Ensure redirect URLs are correctly configured in both the OAuth provider and Supabase