Google Login
Google Login
Section titled “Google Login”Introduction
Section titled “Introduction”Google Login lets users sign in with their Google account. Auth.js makes this straightforward — you just configure the provider and add the environment variables.
Why Google Login?
Section titled “Why Google Login?”- Users don’t need to create another account
- Higher sign-up conversion rates
- Google handles security (2FA, suspicious login detection)
- Access to Google profile data (name, email, avatar)
1. Create a Google OAuth App
Section titled “1. Create a Google OAuth App”- Go to Google Cloud Console
- Create a new project or select existing
- Navigate to APIs & Services → Credentials
- Create OAuth 2.0 Client ID
- Set Application type to “Web application”
- Add authorized redirect URI:
http://localhost:3000/api/auth/callback/google
- Copy the Client ID and Client Secret
2. Add Environment Variables
Section titled “2. Add Environment Variables”GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.comGOOGLE_CLIENT_SECRET=your-client-secret3. Configure the Provider
Section titled “3. Configure the Provider”import GoogleProvider from 'next-auth/providers/google'
export const authOptions = { providers: [ GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID!, clientSecret: process.env.GOOGLE_CLIENT_SECRET!, }), ],}4. Add Login Button
Section titled “4. Add Login Button”<button onClick={() => signIn('google', { callbackUrl: '/dashboard' })}> Sign in with Google</button>Production Setup
Section titled “Production Setup”For production, add your production URL to the authorized redirect URIs:
https://yourdomain.com/api/auth/callback/googleCommon Mistakes
Section titled “Common Mistakes”- Wrong redirect URI — Must match exactly, including the trailing path
/api/auth/callback/google - Missing environment variables — The provider won’t work without
GOOGLE_CLIENT_IDandGOOGLE_CLIENT_SECRET - Testing on localhost without HTTPS — Some Google features require HTTPS, even for local development
Best Practices
Section titled “Best Practices”- Add both localhost and production redirect URIs
- Use separate OAuth apps for development and production
- Verify the email domain if your app is internal
Summary
Section titled “Summary”Google Login requires creating an OAuth app in Google Cloud Console, adding environment variables, and configuring the Google provider in Auth.js. The callback URL must match exactly.