Authentication

In this guide, we'll show you how to set up authentication in the NextAdmin boilerplate using NextAuth.js (opens in a new tab).

1. Core Configuration

To get started, update the following environment variables in your .env file to configure NextAuth.

NEXTAUTH_URL="YOUR_SITE_URL"
NEXTAUTH_SECRET="A_RANDOM_STRING"

NOTE: For local development, set NEXTAUTH_URL to http://localhost:3000. For production, use your live site URL.

Generate a Secret

You can generate a secure random string for NEXTAUTH_SECRET using the following terminal command:

openssl rand -base64 32

2. Google OAuth Integration

Follow these steps to enable Google Login for your application.

I. Create a Google Cloud Project

1. Navigate to the Google Cloud Console (opens in a new tab).
2. Click on the New Project button at the top and follow the steps to create one.
3. Once created, make sure the project is selected in the top dropdown.

II. Configure Credentials

1. Go to the APIs & Services > Credentials tab.
2. Click CREATE CREDENTIALS and select OAuth client ID.

IMPORTANT: If prompted, you must configure the OAuth consent screen first before you can create a Client ID.

III. Set Authorized URIs

When creating your OAuth client ID, select Web application and add the following:

• Authorized JavaScript Origins:
  • http://localhost:3000 (for development)
• Authorized redirect URIs:
  • http://localhost:3000/api/auth/callback/google (for development)
  • https://{YOUR_DOMAIN}/api/auth/callback/google (for production)

IV. Update Environment Variables

Once created, you will receive your Client ID and Client Secret. Copy them into your .env file:

GOOGLE_CLIENT_ID="YOUR_CLIENT_ID"
GOOGLE_CLIENT_SECRET="YOUR_CLIENT_SECRET"

Next Steps

With authentication configured, users can now securely sign in to your admin dashboard!