Setting Up Google Login 🔑

Let's add Google authentication to your Indie Kit app. This guide will walk you through the setup process. 🚀

Prerequisites 📋

Before starting, make sure you've completed the Authentication Setup Guide.

Getting Google Credentials 🔐

1. Create Google Cloud Project ☁️

   • Follow this detailed video tutorial: Google OAuth Setup Guide
   • Go to Google Cloud Console
   • Create a new project or select an existing one

2. Configure OAuth Consent Screen 📝

   • Go to "APIs & Services" > "OAuth consent screen"
   • Choose "External" user type
   • Fill in the required information:
     • App name
     • User support email
     • Developer contact information

3. Create OAuth Credentials 🔑

   • Go to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "OAuth client ID"
   • Choose "Web application"
   • Add authorized redirect URIs:

     # Development
     http://localhost:3000/api/auth/callback/google
     
     # Production (replace with your domain)
     https://yourdomain.com/api/auth/callback/google

4. Add Authorized Domains 🌐

   • In the OAuth consent screen
   • Add your domains:

     localhost:3000
     yourdomain.com

Configuration ⚙️

5. Add Environment Variables 📝 Add these to your .env.local:

   GOOGLE_CLIENT_ID=your_client_id_here
   GOOGLE_CLIENT_SECRET=your_client_secret_here

   🔐 Where to Find Credentials

   • Client ID: Credentials page > Your OAuth 2.0 Client > Client ID
   • Client Secret: Credentials page > Your OAuth 2.0 Client > Client Secret

6. Production Setup 🚀 Add these environment variables in your Vercel dashboard:

   • Go to Project Settings > Environment Variables
   • Add the same variables:

     GOOGLE_CLIENT_ID=your_client_id_here
     GOOGLE_CLIENT_SECRET=your_client_secret_here

   • Redeploy your application

Verification 🔍

7. Test Local Setup

   npm run dev

   • Visit http://localhost:3000/sign-in
   • Click "Continue with Google"
   • You should be able to sign in

8. Test Production Setup

   • Deploy your changes
   • Visit your production URL
   • Verify Google login works

Troubleshooting 🔧

Common issues and solutions:

1. Invalid Redirect URI

   • Double-check the exact redirect URI in Google Console
   • Make sure it matches your domain exactly
   • Include the full path: /api/auth/callback/google

2. Unauthorized Domain

   • Verify your domain is listed in authorized domains
   • Include both with and without www if needed

3. Production Issues

   • Verify environment variables in Vercel
   • Check if the production redirect URI is authorized
   • Clear browser cache and try again

Security Best Practices 🛡️

1. Never commit .env.local to version control
2. Regularly rotate client secrets
3. Limit OAuth scope to necessary permissions
4. Monitor OAuth usage in Google Console

Now your users can sign in with their Google accounts! 🎉

💡 Pro Tip

Consider adding multiple OAuth providers for better user experience. Check out our other authentication guides for more options! https://authjs.dev/getting-started/providers/facebook