Sign up and Sign in

Sign-Up Configuration

The Next.js Supabase SaaS Template provides three primary options for user sign-up:

1. Magic Link: Users receive a one-time password (OTP) or link via email to sign up, bypassing the need for a password.
2. OAuth Providers: Google and GitHub accounts are configured by default, but additional providers like Apple, Azure, Facebook, and more can be added.
3. 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:

GOOGLE_OAUTH_CLIENT_ID=your_google_oauth_client_id
GOOGLE_OAUTH_CLIENT_SECRET=your_google_oauth_client_secret

GitHub OAuth:

GITHUB_OAUTH_CLIENT_ID=your_github_oauth_client_id
GITHUB_OAUTH_CLIENT_SECRET=your_github_oauth_client_secret

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.

providers: {
    magicLink: true,  // Enables Magic Link sign-up
    emailPassword: true,  // Enables Email and Password sign-up
    oAuth: ["google", "github", "apple", "azure", "facebook"],  // Enables multiple OAuth providers
}

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:

[auth]
enabled = true

To enable sign-ups via email and password, modify the [auth.email] section as follows:

[auth.email]
enable_signup = true

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:

[auth.external.github]
enabled = true
client_id = "env(SUPABASE_AUTH_GITHUB_CLIENT_ID)"
secret = "env(SUPABASE_AUTH_GITHUB_SECRET)"
redirect_uri = "http://localhost:54321/auth/v1/callback"

• Restart Supabase

After making changes to supabase/config.toml, restart your local Supabase environment with the following commands:

npm run supabase:stop

npm run supabase:start

Verify Sign-Up Setup

Visit the following URL to test the sign-up functionality:

http://localhost:3000/en/sign-up

Sign-In Configuration

Sign-in options mirror the sign-up methods and use the same configurations. Users can sign in using:

1. Magic Link
2. OAuth Providers (Google, GitHub, and any additional providers you configured)
3. 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:

http://localhost:3000/en/sign-in

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.