Google Social Login with Magic

Documentation Index

Fetch the complete documentation index at: https://docs.magic.link/llms.txt

Use this file to discover all available pages before exploring further.

​

Usage

​

Prerequisites

• You will need a Google Developer account
• You will need to have the Magic SDK installed into your web app
• You will need to have the Magic SDK - OAuth Extension installed into your web app

​

Google Setup

1. Follow Google’s instructions to set up an OAuth 2.0 app
2. Obtain the OAuth Client ID and Client Secret from your Google Developer dashboard
3. Go to your Magic Dashboard
4. Select the Magic app for which you’d like to enable Google Login, or create a new app
5. Navigate to Social Login from the sidebar
6. Click the toggle for Google / Gmail
7. Input the Client ID and Client Secret for your OAuth app
8. Add your Redirect URI to your Google Dashboard’s OAuth app configuration: If you’re using loginWithRedirect, add the Redirect URI you are passing as the redirectURI argument:
   JavaScript

   await magic.oauth2.loginWithRedirect({
     provider: 'google',
     redirectURI: 'https://your-app.com/your/oauth/callback', // whitelist this with Google
   });
   
   If using the connectWithUI SDK method

   Choose “Magic Login Widget” in your Magic Dashboard’s Google OAuth settings and copy the Redirect URI field from your Magic Dashboard. Add this Redirect URI to your Google Dashboard’s OAuth app configuration:
   
9. In Magic Dashboard, click “Save”
10. Click “Test Connection” to give your new Google OAuth flow a try!

​

OAuth Redirect

await magic.oauth2.loginWithRedirect({
  provider: 'google',
  redirectURI: 'https://your-app.com/your/oauth/callback',
});

​

Google One Tap

​

Implementation

const GSI_SCRIPT_SRC = 'https://accounts.google.com/gsi/client';

let gsiPromise = null;

function loadGsi() {
  if (gsiPromise) return gsiPromise;

  gsiPromise = new Promise((resolve, reject) => {
    if (window.google?.accounts?.id) {
      resolve(window.google.accounts.id);
      return;
    }

    const script = document.createElement('script');
    script.src = GSI_SCRIPT_SRC;
    script.async = true;
    script.defer = true;
    script.onload = () => {
      if (window.google?.accounts?.id) resolve(window.google.accounts.id);
      else reject(new Error('GSI script loaded but window.google.accounts.id is unavailable.'));
    };
    script.onerror = () => reject(new Error(`Failed to load GSI script: ${GSI_SCRIPT_SRC}`));
    document.head.appendChild(script);
  });

  return gsiPromise;
}

/**
 * Loads GSI, shows the One Tap prompt, and resolves with the resulting Google ID token (JWT).
 */
export async function promptGoogleOneTap({ clientId }) {
  const accountsId = await loadGsi();

  return new Promise((resolve, reject) => {
    accountsId.initialize({
      client_id: clientId,
      callback: (response) => {
        if (!response?.credential) {
          reject(new Error('Google One Tap returned no credential.'));
          return;
        }
        resolve(response.credential);
      },
    });

    accountsId.prompt((notification) => {
      if (notification.isNotDisplayed?.()) {
        reject(new Error(`Google One Tap not displayed: ${notification.getNotDisplayedReason?.()}`));
      }
    });
  });
}

import { Magic } from 'magic-sdk';
import { OAuthExtension } from '@magic-ext/oauth2';
import { promptGoogleOneTap } from './gsi';

const GOOGLE_CLIENT_ID = 'YOUR_GOOGLE_CLIENT_ID';

const magic = new Magic('YOUR_MAGIC_API_KEY', {
  extensions: [new OAuthExtension()],
});

async function loginWithGoogle() {
  const jwt = await promptGoogleOneTap({ clientId: GOOGLE_CLIENT_ID });

  const didToken = await magic.oauth2.loginWithGoogleIdToken({
    jwt,
    googleClientId: GOOGLE_CLIENT_ID,
  });

  // Send didToken to your backend for verification
  console.log(didToken);
}

​

Method reference

interface LoginWithGoogleIdTokenConfiguration {
  jwt: string;            // Google-issued ID token (JWT) from the GSI callback
  googleClientId: string; // Your Google OAuth Client ID
  lifespan?: number;      // Optional DID token lifespan in seconds
}

magic.oauth2.loginWithGoogleIdToken(
  configuration: LoginWithGoogleIdTokenConfiguration
): Promise<string>;

​

Other Google Identity Services flows

• One Tap prompt — google.accounts.id.prompt() (shown above)
• Sign in with Google button — google.accounts.id.renderButton(...) for a customer-rendered button instead of the auto-prompt

​

Verification Process

1. Go to your app within the Google developer dashboard and select “OAuth consent screen” on the nav menu.
2. Under “Publishing status”, select “publish app”.
3. Once the status is set to “In production”, you should no longer be encountering the error.

• You want your application to display an icon or app name
• Your app requests authorization of any sensitive or restricted scopes
• The number of authorized domains for your apps exceeds the domain count limit for a project
• There are changes to the OAuth consent screen after your app has been approved

​

Gmail Linking

​

Resources

• Google Social Login Demo
• Google Identity Services — One Tap
• Google Identity Services — Sign in with Google button