docs
Authentication, Magic Link and Social Login

Authentication, Magic Link, and Social Login

💡

Powered by NextAuth (opens in a new tab), the NextSaaS boilerplate comes with built-in support for popular sign-in services. With just a few updates to environment variables, you can enable Google sign-in, GitHub sign-in, passwordless sign-in (Magic Link), and email/password sign-in in minutes.

Configure Google OAuth

Follow these steps to configure Google OAuth for your NextSaaS application:

1. Create a new project in the Google Cloud Dashboard. Create Project

2. Configure the OAuth consent screen. Here's an example setup for NextSaaS. OAuth Consent Screen

3. Create OAuth client credentials. Credentials Create Credential Create OAuth Client ID

4. Retrieve the OAuth Client ID and Client secret. Client ID and Client secret

5. Ensure that you publish your App in Google Cloud before deploying to production. 6. Update your environment variables in the .env file to include GitHub credentials:

.env
# NextAuth Google Provider
# Obtain these credentials from the Google Cloud Console
# https://console.cloud.google.com/apis/credentials
GOOGLE_CLIENT_ID="{google_client_id}"
GOOGLE_CLIENT_SECRET="{google_client_secret}"
 

Configure GitHub OAuth

Follow these steps to configure GitHub OAuth for your NextSaaS application:

1. Go to your GitHub account settings and navigate to "Developer settings" > "OAuth Apps". GitHub Developer Settings

2. Click on "New OAuth App" to create a new application.

3. Fill in the application details:

4. Click "Register application" to create your GitHub OAuth app.

5. On the next screen, you'll see your Client ID. Click "Generate a new client secret" to create your Client Secret.

6. Copy your Client ID and Client Secret. You'll need these for your environment variables.

7. Update your environment variables in the .env file to include GitHub credentials:

.env
# NextAuth GitHub Provider
# Obtain these credentials from the GitHub Developer Settings
# https://github.com/settings/developers
GITHUB_CLIENT_ID="{github_client_id}"
GITHUB_CLIENT_SECRET="{github_client_secret}"

8. Ensure that you update the callback URL in your GitHub OAuth app settings when deploying to production.

Configure Magic Link

Follow these steps to set up Magic Link authentication for your NextSaaS application:

1. Set up an email service provider.

You'll need an email service provider to send Magic Link emails. Popular options include:

  • SendGrid
  • Mailgun
  • Amazon SES
  • SMTP server
  • Mailjet

2. Obtain your email server connection URL.

The format of the connection URL depends on your email service provider. Here's a general format:

smtp://{username}:{password}@{mailserver.com}:{port}/?pool=true

Common ports:

  • 25 (unencrypted)
  • 465 (SSL)
  • 587 (TLS)

3. Update your environment variables.

Add the following to your .env file:

.env
EMAIL_SERVER_CONNECTION_URL="smtp://{username}:{password}@{mailserver.com}:{25/465/587}/?pool=true"

Replace the placeholders with your actual email server details.

5. Change the sender and email in src/config/site.ts to a valid email address from your domain.

💡

Note that the sender email address must be verified by your email service provider before you can send emails.

6. Test the Magic Link functionality.

After setting up the environment variable and restarting your development server, you should be able to test the Magic Link feature. Navigate to the sign-in page and use the Magic Link option to verify it's working correctly.

💡

Remember to use a real email address for testing, as you'll need to receive the Magic Link in your inbox.