Authentication with Supabase

When you connect your Supabase account, you can access Supabase to manage authentication for your Frontend AI projects. This allows you to handle user sign-up, sign-in, and session management securely.

Server-Side Authentication

Verify user authentication on the server using Supabase.

import { NextResponse } from 'next/server';
import { createClient } from '@supabase/supabase-js';

export async function POST(request: Request) {
  try {
    const { access_token } = await request.json();
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

    // Create a Supabase client with the user's access token
    const supabase = createClient(supabaseUrl, supabaseAnonKey, {
      global: {
        headers: {
          Authorization: `Bearer ${access_token}`,
        }
      }
    });

    // Get the user using the access token
    const { data: { user }, error } = await supabase.auth.getUser(access_token);

    if (error || !user) {
      return NextResponse.json(
        { error: 'Invalid or expired token' },
        { status: 401 }
      );
    }

    return NextResponse.json({ user });
  } catch (error: any) {
    return NextResponse.json(
      { error: error.message || 'Authentication failed' },
      { status: 500 }
    );
  }
}

Recommended: Use OTP Authentication

We recommend using the OTP (One-Time Password) option in Supabase. To configure this, navigate to your Supabase project’s Authentication > Email Templates and replace the confirmation link:

<p><a href="{{ .ConfirmationURL }}">Confirm your mail</a></p>

With the token variable:

<p>Your verification code is: {{ .Token }}</p>

This sends users a 6-digit token instead of a confirmation URL. This approach is recommended because:

URLs will not resolve in the sandbox environment
It provides a better experience on phones and mobile devices
OTP codes are simpler for users to enter manually