Authentication, Magic Link, and Social Login

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.

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.