Sign up and Sign in
This guide outlines how to configure both Sign Up and Sign In options for your Next.js Supabase SaaS Template. The template offers flexible methods for user authentication, including Magic Link, OAuth, and Email/Password, allowing you to tailor the user experience.
Sign-Up Configuration
The Next.js Supabase SaaS Template provides three primary options for user sign-up:
- Magic Link: Users receive a one-time password (OTP) or link via email to sign up, bypassing the need for a password.
- OAuth Providers: Google and GitHub accounts are configured by default, but additional providers like Apple, Azure, Facebook, and more can be added.
- Email and Password: Traditional email and password sign-up.
Prerequisites
For OAuth authentication, you will need to set up valid credentials for each provider you plan to use. This involves adding environment variables for each OAuth service.
Step-by-Step Configuration
Set Up Environment Variables
To enable OAuth sign-ups, populate your .env.local
or another environment file with the necessary credentials for each provider.
Google OAuth:
GitHub OAuth:
Update Configurations in template
Configure the client-side sign-up options by editing the /config/client.config.ts
file. You can enable Google, GitHub, and any other OAuth providers by adding them to the configuration.
SITE_BASE_URL
is also correctly set in .env.local
file for proper redirection during the sign-up process.Supabase Configurations
To enable authentication features in your local Supabase environment, edit the supabase/config.toml
file created after running supabase init
.
Enable Supabase authentication by setting the following flag in the [auth]
section:
To enable sign-ups via email and password, modify the [auth.email]
section as follows:
To add more OAuth providers, configure them similarly to the GitHub example below. Make sure to replace the client_id
and secret
values for each provider:
.env.local
file for automatic substitution by the Supabase CLI.- Restart Supabase
After making changes to supabase/config.toml
, restart your local Supabase environment with the following commands:
Verify Sign-Up Setup
Visit the following URL to test the sign-up functionality:
Sign-In Configuration
Sign-in options mirror the sign-up methods and use the same configurations. Users can sign in using:
- Magic Link
- OAuth Providers (Google, GitHub, and any additional providers you configured)
- Email and Password
Client Side Configurations
The same configurations in client.config.ts
for sign-up methods apply to sign-in as well. Ensure that the proper methods are enabled in the providers
section.
Supabase Configurations
Ensure the supabase/config.toml
file remains correctly configured for sign-in, similar to the sign-up configurations outlined above.
Verify Sign-In Setup
To test the sign-in functionality, visit:
By following these steps, you'll have a fully functional authentication system with customizable options for your users. Both sign-up and sign-in flows will be ready with Magic Link, OAuth (including Google, GitHub, Apple, and more), and Email/Password methods.