Set Up Google OAuth 2.0 Login & SMTP Email Credentials Step-by-Step Guide Print

This knowledge base article walks you through two common setups:

1. Create Google OAuth 2.0 credentials for “Login with Google”.
2. Configure SMTP credentials for your email client or application.

Part 1 — Google OAuth 2.0 Credentials (Login with Google)

A. Create a Google Cloud project & enable APIs

1. Go to the Google Cloud Console and sign in with your Google account.
2. Create a new Project (or select an existing one) and note the Project ID.
3. Open APIs & Services → Enabled APIs & services and click + ENABLE APIS AND SERVICES.
4. Enable Google Identity Services (or Google People API if your app needs profile details beyond basic scopes).

B. Configure the OAuth consent screen

1. Navigate to APIs & Services → OAuth consent screen.
2. Select External (for consumer use) or Internal (for Google Workspace within your organization).
3. Fill in App name, Support email, and (optional but recommended) App logo.
4. Add your Authorized domains (e.g., example.com).
5. Under Scopes, include at minimum:
   • openid
   • email
   • profile
6. Save and continue. For External apps, you can keep the app in Testing mode while you verify.

C. Create OAuth 2.0 Client ID & Secret

1. Go to APIs & Services → Credentials and click + CREATE CREDENTIALS → OAuth client ID.
2. Choose Application type: Web application (for websites) or the type that matches your platform.
3. Set a name, e.g., Web Client for Login.
4. Under Authorized JavaScript origins, add your site origins, e.g.:
   • https://example.com
   • http://localhost:3000 (for local testing)
5. Under Authorized redirect URIs, add the URL(s) your app uses to handle the OAuth callback, e.g.:
   • https://example.com/auth/google/callback
   • http://localhost:3000/auth/google/callback
   Tip: The redirect URI must match exactly (scheme, domain, path, and port).
6. Click Create to obtain your Client ID and Client Secret.

D. Configure your application

1. Set environment variables (recommended):

   GOOGLE_CLIENT_ID=your_client_id_here
   GOOGLE_CLIENT_SECRET=your_client_secret_here
   GOOGLE_REDIRECT_URI=https://example.com/auth/google/callback

2. In your backend, implement the standard OAuth flow:
   1. Redirect users to Google’s authorization endpoint with scopes openid email profile.
   2. Handle the callback at your redirect URI and exchange the authorization code for tokens.
   3. Verify the ID token (JWT) signature and audience (aud must match your Client ID).
   4. Create or look up the user in your DB using the token’s sub (Google user ID) and email.
3. For frontend-only implementations, use Google Identity Services (GIS) button and verify the token on your server.

E. Test, publish, and verify

1. Test with localhost origins/redirect URIs added in the credentials.
2. If your app is External and will serve more than 100 test users or needs sensitive scopes, complete Google’s verification steps on the consent screen page.
3. Switch from Testing to In production when ready.

Common OAuth Issues & Fixes

• redirect_uri_mismatch: Ensure the callback URL exactly matches an Authorized redirect URI.
• invalid_scope: Use correct scopes (openid email profile) and re-consent if you change them.
• 403: access_denied: App not verified or user not in test users list (when in Testing mode).

Part 2 — SMTP Credentials for Email Client / App

A. Gather the required SMTP fields

B. Gmail / Google Workspace — options

1. Personal Gmail (recommended): Use an App Password
   1. Enable 2-Step Verification on your Google Account.
   2. Create an App Password (type: Mail; device: Other or your app name).
   3. Use:
      • SMTP server: smtp.gmail.com
      • Port: 587 (STARTTLS) or 465 (SSL)
      • Username: your full Gmail address
      • Password: the generated app password
2. Google Workspace (business): Three approaches
   1. Direct SMTP with user credentials (with App Password if allowed).
   2. SMTP Relay service via Admin Console:
      • Set allowed senders (e.g., Only addresses in your domain) and optionally restrict by IP.
      • Use relay host (provided in Admin Console), typically on port 587 with TLS.
   3. OAuth2 for SMTP (advanced): Use XOAUTH2 tokens instead of passwords.

C. Configure your email client / app

1. Open your app’s email settings and choose SMTP for outgoing mail.
2. Enter the server, port, encryption, username, and password (or OAuth2 token) from above.
3. Set the From / Sender address to a verified mailbox or domain.
4. Send a test message and check logs for any authentication or TLS errors.

D. Recommended DNS & deliverability setup

• SPF: include your sending provider’s servers (e.g., v=spf1 include:_spf.google.com ~all).
• DKIM: enable and publish the CNAME/TXT keys provided by your mail platform.
• DMARC: start with p=none for monitoring, then move to quarantine or reject as your alignment improves.

E. Sample SMTP config snippets

Node.js (Nodemailer)

const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
  host: 'smtp.gmail.com',
  port: 587,
  secure: false, // true for 465
  auth: {
    user: 'you@example.com',
    pass: 'app-password-here'
  }
});

await transporter.sendMail({
  from: 'no-reply@example.com',
  to: 'user@example.com',
  subject: 'Test',
  text: 'Hello!'
});

PHP (PHPMailer)

$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = 'you@example.com';
$mail->Password = 'app-password-here';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // or PHPMailer::ENCRYPTION_SMTPS for 465
$mail->Port = 587;
$mail->setFrom('no-reply@example.com', 'Your App');
$mail->addAddress('user@example.com');
$mail->Subject = 'Test';
$mail->Body = 'Hello!';
$mail->send();

Common SMTP Issues & Fixes:

• Authentication failed: Wrong password, 2-Step Verification required, or App Password missing.
• TLS/SSL errors: Use the correct port/encryption pair (587+STARTTLS or 465+SSL/TLS).
• Relay denied: Sender not authorized (check Workspace SMTP relay policies and SPF/DKIM/DMARC).
• Spam folder: Complete SPF/DKIM/DMARC, use a custom domain, and warm up sending.

Quick Reference

Checklist

• ✅ OAuth consent screen configured and saved
• ✅ Authorized domains, origins, and redirect URIs added
• ✅ Client ID & Secret stored securely (not in source control)
• ✅ SMTP works with TLS and a valid App Password or OAuth2
• ✅ SPF/DKIM/DMARC DNS records published
• ✅ Test sign-in and test email both pass