How to Set Up Supabase Authentication

Create a Supabase Project

Sign in to supabase.com and create a new project if you have not already. Select a region geographically close to your users to minimize latency. Save your project URL and anon key from the project settings page, as you will need them to initialize the Supabase client in your application. Set a strong database password during project creation because you may need it later for direct PostgreSQL connections or database management tools like pgAdmin.

Configure Authentication Providers

Navigate to Authentication > Providers in your Supabase dashboard. Enable the authentication methods you want to support. Email and password authentication is enabled by default. For social logins, configure OAuth providers like Google, GitHub, Discord, or Apple by adding your OAuth client ID and secret from each provider's developer console. Each provider requires you to set up a redirect URL pointing back to your Supabase project. Configure the site URL and redirect URLs in the URL Configuration section to match your development and production domains.

Install and Initialize the Client

Install the Supabase JavaScript client library by running npm install @supabase/supabase-js in your project directory. Create a utility file that initializes and exports the Supabase client using your project URL and anon key. For Next.js applications, use the @supabase/ssr package instead, which provides helpers for cookie-based session management across server components, client components, middleware, and API routes. Store your Supabase URL and anon key in environment variables to keep them out of version control.

Build Sign-Up and Login Flows

Implement sign-up functionality using supabase.auth.signUp with an email and password. Build a login form that calls supabase.auth.signInWithPassword. For OAuth providers, use supabase.auth.signInWithOAuth and specify the provider name. Handle the authentication callback by processing the URL hash or code exchange on your redirect page. Create a sign-out button that calls supabase.auth.signOut. Display appropriate loading states and error messages for each authentication action to provide a smooth user experience.

Set Up Row Level Security Policies

Enable Row Level Security on every table that should be protected. Write SQL policies that reference the auth.uid() function to restrict data access based on the authenticated user. For example, create a policy that allows users to only read and update their own profile rows by comparing the user_id column to auth.uid(). Test your policies thoroughly by attempting to access data as different users and as an unauthenticated client. RLS is the backbone of Supabase security and incorrectly configured policies can expose sensitive data.

Manage User Sessions and State

Use supabase.auth.getSession to check the current authentication state when your application loads. Subscribe to authentication state changes with supabase.auth.onAuthStateChange to reactively update your UI when users log in, log out, or when their session refreshes. In Next.js applications, implement middleware that checks the session on every request and redirects unauthenticated users away from protected routes. Store the session in cookies rather than localStorage for better security and server-side rendering compatibility.

Customize Email Templates and Settings

Navigate to Authentication > Email Templates in your dashboard to customize the confirmation email, password reset email, magic link email, and invitation email templates. Add your brand logo, adjust the copy, and ensure the action URLs point to the correct pages in your application. Configure rate limits for sign-up and login attempts under Authentication > Rate Limits. Set the JWT expiry time and refresh token rotation settings under Authentication > Settings to balance security with user convenience for your specific application requirements.