| 2024-03-31

Supabase Authentication With Next.js

    This example uses Supabase for authentication and Next.js 14 for the frontend. The example includes setting up environment variables, installing dependencies, running the project locally, and deploying to Vercel.

    Deployed here:

    Installation

    Step 1: Clone the Repository

    1. Open your terminal.
    2. Clone the repository using the following command:
      git clone https://github.com/owolfdev/supabase-auth
      
    3. Navigate to the cloned directory:
      cd supabase-auth
      

    Step 2: Set up Environment Variables

    1. Create a .env.local file at the root of the project.
    2. Fill in the required environment variables:
      NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
      NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
      SERVICE_ROLE_SECRET=your_service_role_secret
      
      You can find these keys in your Supabase dashboard under Project Settings>API

    Step 3: Install Dependencies

    1. In the terminal, run:
      npm install
      

    Step 6: Run Locally (Optional)

    1. You can run the project locally to test it by running:
      npm run dev
      
    2. Open your browser and navigate to http://localhost:3000 to see the app.

    Step 7: Deploy to Vercel

    1. Go to the Vercel website: vercel.com.
    2. Sign in to your Vercel account.
    3. Click on the Add New button, select Project.
    4. Add your Github account (if not connected).
    5. Import and deploy your project.
    6. Be sure to add environment variables as needed.

    Supabase Settings

    There are several setting at Supabase that you need to consider.

    You will need to create a profiles table with the following (suggested) table schema:

    • id (UUID): Unique identifier for each user
    • name (String): Name of the user
    • email (String): Email address of the user
    • phone (String): Phone number of the user
    • avatar_url (String): URL to the user's avatar image
    • description (String): Description or bio of the user
    • subscription (String): Subscription details of the user
    • website (String): Website URL of the user
    • website_description (String): Description of the user's website
    • location (String): Location of the user
    • active (Boolean): Indicates whether the user is currently active or not

    You should create a database function that creates a new profile based on a new auth.user account.

    
    CREATE OR REPLACE FUNCTION handle_new_user()
    RETURNS TRIGGER AS $$
    BEGIN
      INSERT INTO public.profiles(id, email)
      VALUES (NEW.id, NEW.email);
      RETURN NEW;
    END;
    $$ LANGUAGE plpgsql;
    
    
    sql

    You should create a trigger that triggers the function.

    CREATE TRIGGER trigger_after_user_creation
    AFTER INSERT ON auth.users
    FOR EACH ROW
    EXECUTE FUNCTION public.handle_new_user();
    
    sql

    I am using Resend as the Custom SMTP server to bypass the Supabase email limit of 3 per hour. You can find the SMTP settings in Supabase under Settings > Authentication > SMTP Settings.

    At supabase you will need to set the project url at Authentication > Site URL to enable your app to redirect users back to your site.

    You may also need to adjust the rate limit at Rate Limits.


    Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.