Google OAuth

Add Google sign-in to your Chrome extension for a seamless authentication experience.

Overview

Google OAuth allows users to sign in with their existing Google account, automatically capturing their name and email without manual entry.

Prerequisites

Google Cloud Console account
Chrome extension with identity permission
ExtensionLogin Pro plan or higher

Setup Steps

Step 1: Configure Google OAuth in Dashboard

Go to app.extensionlogin.com
Navigate to your extension's settings
Click "Google OAuth" tab
Enter your Google OAuth credentials:
- Client ID: Your Google OAuth client ID
- Client Secret: Your Google OAuth client secret (stored encrypted)

Step 2: Create Google OAuth Credentials

If you don't have Google OAuth credentials yet:

Go to Google Cloud Console
Create a new project (or select existing)
Navigate to APIs & Services > Credentials
Click Create Credentials > OAuth Client ID
Select Chrome Extension as application type
Enter your extension's ID
Copy the Client ID and Client Secret

Step 3: Update Extension Manifest

Add the identity permission to your manifest.json:

json

{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0.0",
  "permissions": [
    "identity",
    "storage"
  ],
  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ],
  "oauth2": {
    "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
}

javascript

import ExtensionLogin from 'extensionlogin';

ExtensionLogin.init({
  apiKey: 'el_live_xxxxxx'
});

// Handle Google sign-in button click
document.getElementById('google-signin').addEventListener('click', async () => {
  const result = await ExtensionLogin.loginWithGoogle();

  if (result.success) {
    console.log('Google user:', result.user);
    // {
    //   id: 'usr_xxxxx',
    //   email: '[email protected]',
    //   name: 'John Doe',
    //   picture: 'https://...',
    //   googleId: '123456789'
    // }
  } else {
    console.error('Google login failed:', result.error);
  }
});

Complete Example

popup.htmlpopup.js

html

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <style>
    body {
      width: 320px;
      padding: 20px;
      font-family: system-ui, sans-serif;
    }
    .auth-container {
      text-align: center;
    }
    .google-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      color: #333;
    }
    .google-btn:hover {
      background: #f5f5f5;
    }
    .google-btn img {
      width: 18px;
      height: 18px;
    }
    .divider {
      margin: 20px 0;
      color: #666;
    }
    .email-form input {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .email-form button {
      width: 100%;
      padding: 12px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .user-info {
      text-align: center;
    }
    .user-info img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="login-view" class="auth-container">
    <h2>Welcome</h2>

    <button id="google-signin" class="google-btn">
      <img src="google-icon.svg" alt="Google">
      Sign in with Google
    </button>

    <div class="divider">— or —</div>

    <div class="email-form">
      <input type="email" id="email" placeholder="Enter your email">
      <input type="text" id="name" placeholder="Your name (optional)">
      <button id="email-signin">Continue with Email</button>
    </div>
  </div>

  <div id="user-view" class="user-info hidden">
    <img id="user-avatar" src="" alt="Avatar">
    <h2 id="user-name"></h2>
    <p id="user-email"></p>
    <button id="logout">Sign Out</button>
  </div>

  <script type="module" src="popup.js"></script>
</body>
</html>

javascript

import ExtensionLogin from 'extensionlogin';

// Initialize
ExtensionLogin.init({
  apiKey: 'el_live_xxxxxx',
  autoIdentify: true
});

// UI Elements
const loginView = document.getElementById('login-view');
const userView = document.getElementById('user-view');

// Check existing user
const currentUser = ExtensionLogin.getUser();
if (currentUser) {
  showUserView(currentUser);
}

// Google Sign-In
document.getElementById('google-signin').addEventListener('click', async () => {
  const result = await ExtensionLogin.loginWithGoogle();

  if (result.success) {
    showUserView(result.user);
  } else {
    alert('Google sign-in failed: ' + result.error.message);
  }
});

// Email Sign-In
document.getElementById('email-signin').addEventListener('click', async () => {
  const email = document.getElementById('email').value;
  const name = document.getElementById('name').value;

  if (!email) {
    alert('Please enter your email');
    return;
  }

  const result = await ExtensionLogin.identify({
    email,
    name: name || undefined
  });

  if (result.success) {
    showUserView(result.user);
  } else {
    alert('Sign-in failed: ' + result.error.message);
  }
});

// Logout
document.getElementById('logout').addEventListener('click', async () => {
  await ExtensionLogin.logout();
  showLoginView();
});

// UI Helpers
function showUserView(user) {
  loginView.classList.add('hidden');
  userView.classList.remove('hidden');

  document.getElementById('user-name').textContent = user.name || 'User';
  document.getElementById('user-email').textContent = user.email;

  if (user.picture) {
    document.getElementById('user-avatar').src = user.picture;
  }
}

function showLoginView() {
  userView.classList.add('hidden');
  loginView.classList.remove('hidden');
}

Google OAuth Response

When a user signs in with Google, you receive additional profile data:

javascript

{
  success: true,
  user: {
    id: 'usr_a1b2c3d4e5',
    email: '[email protected]',
    name: 'John Doe',
    firstName: 'John',
    lastName: 'Doe',
    picture: 'https://lh3.googleusercontent.com/...',
    googleId: '123456789012345678901',
    createdAt: '2024-01-15T10:30:00Z'
  }
}

Error Handling

Handle common Google OAuth errors:

javascript

const result = await ExtensionLogin.loginWithGoogle();

if (!result.success) {
  switch (result.error.code) {
    case 'USER_CANCELLED':
      // User closed the OAuth popup
      console.log('User cancelled sign-in');
      break;
    case 'OAUTH_NOT_CONFIGURED':
      // Google OAuth not set up in dashboard
      console.error('Please configure Google OAuth in dashboard');
      break;
    case 'NETWORK_ERROR':
      // Network connectivity issue
      console.error('Please check your internet connection');
      break;
    default:
      console.error('Sign-in error:', result.error.message);
  }
}

Using Existing Chrome Identity

If you already use Chrome's identity API, you can pass the token to ExtensionLogin:

javascript

// Get token using Chrome's identity API
chrome.identity.getAuthToken({ interactive: true }, async (token) => {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }

  // Pass token to ExtensionLogin
  const result = await ExtensionLogin.loginWithGoogleToken(token);

  if (result.success) {
    console.log('User:', result.user);
  }
});

Scopes

The default OAuth scopes request:

userinfo.email - User's email address
userinfo.profile - User's name and profile picture

If you need additional scopes for your extension, configure them in your manifest and Google Cloud Console.

Security Notes

Client Secret: Stored encrypted in ExtensionLogin's secure infrastructure
Tokens: OAuth tokens are validated server-side, not stored in the extension
HTTPS Only: All OAuth communication uses HTTPS

Troubleshooting

"OAuth not configured" Error

Ensure you've added your Google OAuth credentials in the ExtensionLogin dashboard.

"Invalid client_id" Error

Verify your client ID in manifest.json matches the one in Google Cloud Console.

"User cancelled" Error

This occurs when users close the OAuth popup without completing sign-in.

Extension ID Mismatch

When testing locally, your extension ID may differ from production. Add both IDs to your Google OAuth authorized origins.

Next Steps

CRM Integration - Send Google users to your CRM
Custom Fields - Add metadata to Google users
Security Best Practices - Keep your OAuth secure

Google OAuth ​

Overview ​

Prerequisites ​

Setup Steps ​

Step 1: Configure Google OAuth in Dashboard ​

Step 2: Create Google OAuth Credentials ​

Step 3: Update Extension Manifest ​

Step 4: Implement Google Sign-In ​

Complete Example ​

Google OAuth Response ​

Error Handling ​

Using Existing Chrome Identity ​

Scopes ​

Security Notes ​

Troubleshooting ​

"OAuth not configured" Error ​

"Invalid client_id" Error ​

"User cancelled" Error ​

Extension ID Mismatch ​

Next Steps ​

Google OAuth

Overview

Prerequisites

Setup Steps

Step 1: Configure Google OAuth in Dashboard

Step 2: Create Google OAuth Credentials

Step 3: Update Extension Manifest

Step 4: Implement Google Sign-In

Complete Example

Google OAuth Response

Error Handling

Using Existing Chrome Identity

Scopes

Security Notes

Troubleshooting

"OAuth not configured" Error

"Invalid client_id" Error

"User cancelled" Error

Extension ID Mismatch

Next Steps