Skip to content

iffa/react-native-nitro-google-auth

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-nitro-google-auth

react-native-nitro-google-auth is a React Native package for implementing a "Sign in with Google" flow, built with Nitro modules.

Version Downloads License

Install

# npm
npm install react-native-nitro-google-auth react-native-nitro-modules

# yarn
yarn add react-native-nitro-google-auth react-native-nitro-modules

# pnpm
pnpm add react-native-nitro-google-auth react-native-nitro-modules

# bun
bun add react-native-nitro-google-auth react-native-nitro-modules

Google Cloud — OAuth clients

Create Web, Android, and iOS OAuth clients in one project: Google Cloud Console → Clients.

Client Purpose
Web application Use its client ID as webClientId in GoogleAuth.configure(...).
Android One client per package name + signing cert. Package name must match applicationId; SHA-1 must match the keystore for the build you run. Wrong combo → runtime errors (e.g. credential / console setup errors).
iOS Bundle ID must match the app exactly or you get a runtime error. Use its client ID as iosClientId.

Usage

Important

This library is by design headless. It does not provide a pre-built view for the sign-in button itself. You are expected to implement your own button that matches the Sign in with Google Branding Guidelines.

import { GoogleAuth } from "react-native-nitro-google-auth";

// Must be called before signIn()
GoogleAuth.configure({
  iosClientId: "YOUR_IOS_CLIENT_ID.apps.googleusercontent.com",
  webClientId: "YOUR_WEB_CLIENT_ID.apps.googleusercontent.com",
});

const result = await GoogleAuth.signIn();
// Send result.idToken to your backend.

await GoogleAuth.signOut();

Expo

Add the Expo config plugin with iosUrlScheme set to the reversed iOS client ID (see above). The plugin registers the URL scheme in Info.plist.

app.config.ts:

export default {
  expo: {
    plugins: [
      [
        "react-native-nitro-google-auth",
        {
          iosUrlScheme: "com.googleusercontent.apps.123456789-abc",
        },
      ],
    ],
  },
};

Bare React Native (iOS)

  1. URL scheme — Add the reversed client ID to CFBundleURLTypes
  2. Open URL — Implement the URL handler to forward to GIDSignIn so Google can complete the flow:
// AppDelegate.swift
import GoogleSignIn

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

Merge this with your existing application(_:open:options:) if you already have one; forward to GIDSignIn before other handlers.

API

  • GoogleAuth.configure(config)
    • iosClientId?: string
    • webClientId?: string
  • GoogleAuth.signIn(): Promise<GoogleSignInResult>
    • idToken: string
    • providerUserId: string
    • email?: string
    • name?: string
    • photoUrl?: string
  • GoogleAuth.signOut(): Promise<void>

Troubleshooting

Symptom Checks
Android: NoCredentialException, Developer console is not set up correctly webClientId is a Web client; Android OAuth client matches package name + SHA-1; same GCP project for all clients.
iOS sign-in fails Bundle ID matches iOS OAuth client; URL scheme is the reversed client ID; application(_:open:options:) calls GIDSignIn.sharedInstance.handle(url).

References

Credits

Bootstrapped with create-nitro-module.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

About

Sign in with Google for React Native, built with Nitro

Topics

Resources

License

Stars

3 stars

Watchers

0 watching

Forks

Contributors