Authentication

Supabase Authentication Setup

Supabase is an open-source Firebase alternative that provides authentication, database, and storage services. This guide shows you how to integrate Supabase authentication with your Zudoku documentation site.

Prerequisites

You'll need a Supabase project. If you don't have one, create a free Supabase project to get started.

Setup Steps

1. Configure Authentication Provider

   In your Supabase Dashboard:

   • Navigate to Authentication → Providers
   • Enable your preferred authentication provider (GitHub, Google, Azure, etc.)
   • Configure the provider settings:
     • Redirect URL: https://your-project.supabase.co/auth/v1/callback
     • Copy any required credentials (Client ID, Client Secret) from the provider

2. Get Your Project Credentials

   From your Supabase project dashboard:

   • Go to Settings → Data API
   • Copy your Project URL (looks like https://your-project.supabase.co)
   • Go to Settings → API Keys
   • Copy your anon public API key

3. Configure Zudoku

   Add the Supabase configuration to your Zudoku configuration file:

   Code
    
   // zudoku.config.ts
   export default {
     // ... other configuration
     authentication: {
       type: "supabase",
       provider: "github", // or any supported provider
       supabaseUrl: "https://your-project.supabase.co",
       supabaseKey: "<your-anon-public-key>",
       redirectToAfterSignUp: "/",
       redirectToAfterSignIn: "/",
       redirectToAfterSignOut: "/",
     },
     // ... other configuration
   };

4. Install Supabase Dependencies

   Add @supabase/supabase-js to your project dependencies:

   Code
    
   npm install @supabase/supabase-js

Supported Providers

Supabase supports numerous authentication providers. Use any of these values for the provider field:

• apple - Sign in with Apple
• azure - Microsoft Azure AD
• bitbucket - Bitbucket
• discord - Discord
• facebook - Facebook
• figma - Figma
• github - GitHub
• gitlab - GitLab
• google - Google
• kakao - Kakao
• keycloak - Keycloak
• linkedin / linkedin_oidc - LinkedIn
• notion - Notion
• slack / slack_oidc - Slack
• spotify - Spotify
• twitch - Twitch
• twitter - Twitter/X
• workos - WorkOS
• zoom - Zoom
• fly - Fly.io

Configuration Options

Redirect Configuration

Customize redirect behavior after authentication events:

Code
 
authentication: {
  type: "supabase",
  provider: "google",
  supabaseUrl: "https://your-project.supabase.co",
  supabaseKey: "<your-anon-public-key>",
  redirectToAfterSignUp: "/welcome",    // After successful sign up
  redirectToAfterSignIn: "/dashboard",  // After successful sign in
  redirectToAfterSignOut: "/",          // After sign out
}

Advanced Configuration

Custom User Metadata

Store additional user information in Supabase:

1. Create a profiles table in your Supabase database
2. Set up a trigger to create profile records on user signup
3. Access this data in your application as needed

Troubleshooting

Common Issues

1. Invalid API Key: Ensure you're using the anon public key, not the service_role key.

2. Provider Not Working: Verify the provider is enabled in your Supabase dashboard and properly configured with the correct redirect URLs.

3. Redirect URLs: For local development, update your redirect URLs in both Supabase and the OAuth provider to include http://localhost:3000.

4. CORS Errors: Check that your site's domain is properly configured in Supabase's allowed URLs.

5. Authentication Not Working: Make sure you have installed @supabase/supabase-js to your project.

Next Steps

• Explore Supabase Auth documentation for advanced features
• Learn about protecting routes in your documentation