Clay Google Sign-in

A React Native module for Google Sign-in. This module works for both iOS and Android.

Installation

``sh
npm install clay-google-signin
`
or
`sh
yarn add clay-google-signin
`

This library comes with a config plugin that handles the native project configuration for you.

Configuration

$3

1. Follow the Google Sign-In for iOS integration guide to get your GoogleService-Info.plist file.
2. Place this file in the root of your project (e.g., alongside App.js). The config plugin will automatically copy this file to the native project and configure the required URL Schemes and Client ID in your Info.plist.
3. If you need to authenticate with a backend server, you can pass your server's client ID to the plugin. Add the following to your app.json or app.config.js:

`json
// app.json
{
"expo": {
"plugins": [
[
"clay-google-signin",
{
"serverClientId": "YOUR_SERVER_CLIENT_ID_HERE"
}
]
]
}
}
`

4. Run npx expo prebuild to sync the native project files.

$3

1. Go to your project in the Firebase console.
2. In your project settings, download the google-services.json file.
3. Place this file in the root of your project (e.g., alongside App.js).
4. The config plugin will automatically copy the file and configure Gradle during the prebuild process.
5. Run expo prebuild to sync the changes.

Usage

First, you need to configure the module, usually in your app's entry file.

`tsx
import { GoogleSignin } from 'clay-google-signin';

GoogleSignin.configure({
webClientId: 'YOUR_WEB_CLIENT_ID', // client ID of type WEB for your server (needed to verify user ID and for offline access)
iosClientId: 'YOUR_IOS_CLIENT_ID', // found in your GoogleService-Info.plist
});
`

Then, you can use the GoogleSigninButton component and the GoogleSignin API.

`tsx
import { GoogleSignin, GoogleSigninButton, User } from 'clay-google-signin';
import React, { useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';

function App() {
const [user, setUser] = useState(null);

const signIn = async () => {
try {
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
setUser(userInfo);
} catch (error: any) {
if (error.code !== '-5') { // -5 is user cancellation
Alert.alert("Sign In Error", error.message);
}
}
};

const signOut = async () => {
try {
await GoogleSignin.signOut();
setUser(null);
} catch (error: any) {
Alert.alert('Sign Out Error', error.message);
}
};

if (!user) {
return (



);
}

return (

Welcome, {user.name}


)
}
`

API

The GoogleSignin object provides the following methods:

- hasPlayServices(params?: { showPlayServicesUpdateDialog: boolean }): Promise (Android only)
- configure(params: ConfigureParams): Promise
- signIn(): Promise
- signInSilently(): Promise
- signOut(): Promise
- revokeAccess(): Promise
- hasPreviousSignIn(): Promise
- getCurrentUser(): Promise
- getTokens(): Promise<{ idToken: string; accessToken: string }>
- addScopes(scopes: string[]): Promise
- clearCachedAccessToken(token: string): Promise

See src/ClayGoogleSignin.types.ts for the shape of the User object and ConfigureParams.

Troubleshooting

$3

This error indicates a mismatch between your app's signing certificate and the SHA-1 fingerprint registered in your Firebase project.

Step 1: Get the SHA-1 Fingerprint

1. Navigate to the android directory of your project (e.g., cd android).
2. Run the ./gradlew signingReport command.
3. In the output, find the SHA-1 value for the debug` variant and copy it.

Step 2: Add the Fingerprint to Firebase

1. Open your project in the Firebase console.
2. Go to Project settings > General tab.
3. Scroll down to "Your apps" and select your Android app.
4. Click "Add fingerprint" and paste the SHA-1 key you copied.
5. Save your changes. It may take a few minutes for the new settings to apply.
6. Rebuild your app.