ShipNow

Supabase

ShipNow supports Supabase Auth for secure user authentication with multiple providers

Features

  • 🔐 Multiple authentication providers (Google, GitHub, etc. 20+ providers)
  • 🔄 Session management with automatic refresh
  • 🌐 Server-side and client-side authentication
  • 🛡️ Protected pages and routes

Setup Supabase Auth

Create a account on Supabase and create a project

Copy Supabase project url and anon key from the project API Settings

Copy Supabase project url and anon key

Add project url and anon key to .env.local file:

.env.local
NEXT_PUBLIC_SUPABASE_URL="https://your-project-id.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJxxx"
 
# Enable/disable providers
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED=true
NEXT_PUBLIC_AUTH_GITHUB_ENABLED=true

Initialize Supabase Client

Server-side Usage

import { createClient } from '@/utils/supabase/server';
 
export async function MyServerComponent() {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();
  
  return <div>Hello {user?.email}</div>;
}

Client-side Usage

'use client';
 
import { createClient } from '@/utils/supabase/client';
 
export function MyClientComponent() {
  const supabase = createClient();
  
  async function signIn() {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'github'
    });
  }
  
  return <button onClick={signIn}>Sign in with GitHub</button>;
}

Next Steps

Need Help?

On this page