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.
2. Configure the OAuth consent screen. Here's an example setup for NextSaaS.
3. Create OAuth client credentials.
4. Retrieve the OAuth 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:
# 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".
2. Click on "New OAuth App" to create a new application.
3. Fill in the application details:
- Application name: Your app name (e.g., "NextSaaS")
- Homepage URL: Your app's URL (e.g., "http://localhost:3000 (opens in a new tab)" for development)
- Authorization callback URL: Your app's callback URL (e.g., "http://localhost:3000/api/auth/callback/github (opens in a new tab)")
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:
# 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:
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.