capacitor-plugin-scgssigninwithgoogle

Capacitor Plugin SCGS Sign In With Google

A Capacitor plugin for Google Sign-In that provides an ID token for use with Supabase authentication.

Installation

npm install capacitor-plugin-scgssigninwithgoogle
npx cap sync

Configuration

Android Configuration

• In your Android project, open the build.gradle file and make sure you have the Google services plugin:

buildscript {
    repositories {
        google()
        // ...
    }
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.4.2'
    }
}

• Create a project in the Google Developer Console and configure the OAuth consent screen.

• Create OAuth client IDs for Android and Web applications.

• For Android, you'll need to provide your SHA-1 signing certificate fingerprint. You can get this by running:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

• Add your Google Services configuration file:
  • Download the google-services.json file from the Firebase console
  • Place it in your Android app module's root directory: android/app/

iOS Configuration

• Create a project in the Google Developer Console and configure the OAuth consent screen.

• Create OAuth client IDs for iOS and Web applications.

• For iOS, you'll need to provide your bundle ID.

• Download the GoogleService-Info.plist file and add it to your Xcode project.

• Update your Info.plist file with the following:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

Replace YOUR_REVERSED_CLIENT_ID with the value of REVERSED_CLIENT_ID from your GoogleService-Info.plist file.

• In your AppDelegate.swift, add the following:

import GoogleSignIn

// ...

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
  return GIDSignIn.sharedInstance.handle(url: url)
}

Usage

import { ScgsSignInWithGoogle } from 'capacitor-plugin-scgssigninwithgoogle';
import { supabase } from './supabaseClient'; // Your Supabase client

// Configure the plugin
await ScgsSignInWithGoogle.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID', // From Google Developer Console
  iosClientId: 'YOUR_IOS_CLIENT_ID', // Optional, can use GoogleService-Info.plist instead
  scopes: ['profile', 'email'], // Optional additional scopes
  offlineAccess: true, // Optional, for getting refresh tokens
});

// Sign in with Google
try {
  const result = await ScgsSignInWithGoogle.signIn();
  
  if (result.idToken) {
    // Sign in to Supabase with the ID token
    const { data, error } = await supabase.auth.signInWithIdToken({
      provider: 'google',
      token: result.idToken,
    });
    
    if (error) {
      console.error('Supabase sign in error:', error);
    } else {
      console.log('Signed in successfully:', data);
    }
  } else {
    console.error('No ID token present!');
  }
} catch (error) {
  console.error('Google Sign-In error:', error);
}

API

configure(options: SignInOptions): Promise

Configure the Google Sign-In plugin.

Options:

interface SignInOptions {
  /**
   * The Google API scopes to request access to. Default is email and profile.
   */
  scopes?: string[];
  /**
   * Web client ID from Developer Console. Required for offline access.
   */
  webClientId?: string;
  /**
   * iOS only. The client ID of type iOS.
   */
  iosClientId?: string;
  /**
   * iOS only. If you want to specify a different bundle path name for the GoogleService-Info, e.g. GoogleService-Info-Staging
   */
  googleServicePlistPath?: string;
  /**
   * Must be true if you wish to access user APIs on behalf of the user from your own server.
   */
  offlineAccess?: boolean;
  /**
   * Specifies a hosted domain restriction. By setting this, authorization will be restricted to accounts of the user in the specified domain.
   */
  hostedDomain?: string;
  /**
   * ANDROID ONLY. Only use `true` if your server has suffered some failure and lost the user's refresh token.
   */
  forceCodeForRefreshToken?: boolean;
  /**
   * ANDROID ONLY. An account name that should be prioritized.
   */
  accountName?: string;
  /**
   * iOS ONLY. The OpenID2 realm of the home web server. This allows Google to include the user's OpenID
   * Identifier in the OpenID Connect ID token.
   */
  openIdRealm?: string;
  /**
   * iOS ONLY: The desired height and width of the profile image. Defaults to 120px
   */
  profileImageSize?: number;
}

signIn(): Promise

Sign in with Google and get user information.

Returns:

interface SignInResult {
  user: {
    id: string;
    name: string | null;
    email: string;
    photo: string | null;
    familyName: string | null;
    givenName: string | null;
  };
  /**
   * JWT (JSON Web Token) that serves as a secure credential for your user's identity.
   */
  idToken: string | null;
  /**
   * Not null only if a valid webClientId and offlineAccess: true was
   * specified in configure().
   */
  serverAuthCode: string | null;
  /**
   * The Google API scopes that were granted access to.
   */
  scopes: string[];
}

signInSilently(): Promise

Sign in silently with Google (without user interaction) if the user has previously signed in.

Returns: Same as signIn()

getTokens(): Promise<{ idToken: string; accessToken: string }>

Get the tokens (idToken and accessToken) for the currently signed-in user.

Returns:

{
  idToken: string;
  accessToken: string;
}

Example with Supabase

import { ScgsSignInWithGoogle } from 'capacitor-plugin-scgssigninwithgoogle';
import { createClient } from '@supabase/supabase-js';

// Initialize Supabase client
const supabase = createClient(
  'YOUR_SUPABASE_URL',
  'YOUR_SUPABASE_ANON_KEY'
);

// Configure Google Sign-In
await ScgsSignInWithGoogle.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID',
  scopes: ['https://www.googleapis.com/auth/drive.readonly'], // Optional additional scopes
});

// Sign in with Google and then with Supabase
async function signInWithGoogle() {
  try {
    const result = await ScgsSignInWithGoogle.signIn();
    
    if (result.idToken) {
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'google',
        token: result.idToken,
      });
      
      if (error) {
        console.error('Supabase sign in error:', error);
      } else {
        console.log('Signed in successfully:', data);
        return data;
      }
    } else {
      throw new Error('No ID token present!');
    }
  } catch (error) {
    console.error('Google Sign-In error:', error);
    throw error;
  }
}

License

MIT