ra-auth-google

3.0.0 verified Sat Apr 25 auth: no javascript

An auth provider for react-admin v5+ that integrates Google Identity Services (GIS) for sign-in with Google, One Tap, and automatic sign-in. Current stable version is 3.0.0, released November 2024, with monthly updates. Simplifies authentication by providing an authProvider, LoginButton, OneTapButton, and httpClient. Key differentiators: tightly coupled with react-admin, supports client-side GIS features only, and removes the previous useGoogleAuthProvider/GoogleAuthContext in v3.0.0.

Common errors

error Error: useGoogleAuthProvider is not a function ↓

cause Upgraded to v3.0.0 where useGoogleAuthProvider was removed.

fix

Import and use googleAuthProvider from 'ra-auth-google' directly.

error Module not found: Error: Can't resolve 'ra-auth-google' ↓

cause Package not installed or conflicting react-admin version.

fix

Run npm install ra-auth-google --save and ensure react-admin v5+ is installed.

error GoogleIdentity: 'client_id' is required ↓

cause Missing or undefined clientId when calling googleAuthProvider.

fix

Set VITE_GOOGLE_CLIENT_ID in .env or pass clientId explicitly.

error Error: Cannot read properties of undefined (reading 'google') ↓

cause Google Identity Services script not loaded before React renders.

fix

Add <script async defer src="https://accounts.google.com/gsi/client"></script> to index.html.

Warnings

breaking v3.0.0 removed `useGoogleAuthProvider` and `GoogleAuthContext` – use `googleAuthProvider` directly instead. ↓

fix Replace `useGoogleAuthProvider()` with `googleAuthProvider({clientId})` directly.

breaking v3.0.0 made `googleAuthProvider` and `googleHttpClient` callable without parameters – old pattern `new GoogleAuthProvider(config)` breaks. ↓

fix Call as function: `googleAuthProvider({clientId})` instead of `new GoogleAuthProvider(config)`.

breaking v2.0.0 upgraded `react-admin` peer dependency to v5 – incompatible with v4. ↓

fix Upgrade react-admin to v5 or later.

deprecated v1.0.0 used prop-types, removed in v2.0.0 – not a concern for TypeScript users. ↓

fix Ensure TypeScript usage; prop-types no longer needed.

gotcha Google Identity Services script must be loaded in index.html for GIS to work. ↓

fix Add `<script async defer src="https://accounts.google.com/gsi/client"></script>` to your HTML `<head>`.

gotcha In development, VITE_GOOGLE_CLIENT_ID env var must have the `VITE_` prefix to be exposed client-side. ↓

fix Use `VITE_GOOGLE_CLIENT_ID` instead of `GOOGLE_CLIENT_ID`.

Install

npm install ra-auth-google

yarn add ra-auth-google

pnpm add ra-auth-google

Imports

googleAuthProvider

wrong

import googleAuthProvider from 'ra-auth-google'

correct

import { googleAuthProvider } from 'ra-auth-google'

Default import not available; named import only.

googleHttpClient

wrong

const { googleHttpClient } = require('ra-auth-google')

correct

import { googleHttpClient } from 'ra-auth-google'

ESM-only package; use named import.

LoginButton
```
import { LoginButton } from 'ra-auth-google'
```
Named export for the Sign in with Google button component.
OneTapButton
```
import { OneTapButton } from 'ra-auth-google'
```
Named export for the One Tap component.

Quickstart

Minimal setup: configure googleAuthProvider and googleHttpClient with client ID, and use LoginButton as login page.

import { Admin, Resource, Login } from 'react-admin';
import { googleAuthProvider, googleHttpClient, LoginButton } from 'ra-auth-google';

const authProvider = googleAuthProvider({
    clientId: process.env.VITE_GOOGLE_CLIENT_ID ?? '',
});

const httpClient = googleHttpClient({
    clientId: process.env.VITE_GOOGLE_CLIENT_ID ?? '',
});

const App = () => (
    <Admin authProvider={authProvider} loginPage={LoginButton}>
        <Resource name="posts" />
    </Admin>
);

export default App;