react-gsi

React bindings for the Sign in With Google for Web API.

Demo

Installation

npm install --save react-gsi @types/gsi

Usage

To enable Sign In With Google on your website, you first need to set up your Google API client ID.

You must have a client ID to configure Sign In With Google and to verify ID tokens on your backend.

A client ID looks like the following example: 1234567890-abc123def456.apps.googleusercontent.com

import {
    GsiButton,
    GsiClient,
    IdTokenProvider,
    useIdToken,
    useOneTap
} from 'react-gsi';

const idConfiguration: IdConfiguration = {
    client_id: '1234567890-abc123def456.apps.googleusercontent.com',
    auto_select: true // automatically sign in, see: https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out
}

const buttonConfiguration: GsiButtonConfiguration = {
    type: 'standard',
    theme: 'outline',
    size: 'large'
}

export function App() {
    return (
        <GsiClient fallback={<LoadingSpinner />}>
            <IdTokenProvider configuration={configuration}>
                <Page/>
            </IdTokenProvider>
        </GsiClient>
    )
}

function Page() {
    const token = useIdToken();
    const signedOut = token === null;

    useOneTap({
        show: signedOut
    })

    if (signedOut) {
        return (
            <>
                <h1>Logged Out</h1>
                <GsiButton configuration={buttonConfiguration} />
            </>
        );
    } else {
        const { select_by, credential } = token;

        return (
            <>
                <h1>Logged In via {select_by}</h1>
                <p>{credential}</p>
            </>
        )
    }
}

Components

<GsiClient>

The <GsiClient> component loads the client library.

Fallbacks can be provided whilst the library is loading or if it has failed to load.

Once loaded, the Sign In With Google JavaScript API will be accessible via google.accounts.id.

function LoadingFallback() {
    return <span>Loading...</span>
}

function ErrorFallback() {
    return <span>Error</span>
}

function App() {
    return (
        <GsiClient loading={LoadingFallback} error={ErrorFallback}>
            Library Loaded
        </GsiClient>
    );
}

<IdTokenProvider>

The <IdTokenProvider> initializes the API with the supplied IdConfiguration.

When the API invokes the callback to indicate a successful sign-in, the ID Token returned is stored and passed to the children of the <IdTokenProvider> via an <IdTokenContext>.

Children may access the token in the current context by using the useIdToken() hook.

const idConfiguration: IdConfiguration = {
    client_id: '1234567890-abc123def456.apps.googleusercontent.com'
}

function App() {
    return (
        <GsiClient>
            <IdTokenProvider configuration={idConfiguration}>
                <Page />
            </IdTokenProvider>
        </GsiClient>
    );
}

function Page() {
    const token = useIdToken();

    ...
}

<GsiButton>

The <GsiButton> will render the Sign in with Google button.

const buttonConfiguration: GsiButtonConfiguration = {
    type: 'standard',
    theme: 'outline',
    size: 'large'
}

function App() {
    return (
        <GsiClient>
            <GsiButton configuration={buttonConfiguration} />
        </GsiClient>
    );
}

Hooks

useGsiClient()

The useGsiClient() hook loads the client library.

The status of the script can be accessed via the return type.

Once loaded, the Sign In With Google JavaScript API will be accessible via google.accounts.id.

function App() {
    const { status } = useGsiClient();

    switch (status.type) {
        case 'idle':
            return <span>Idle...</span>;

        case 'loading':
            return <span>Loading...</span>;

        case 'loaded':
            return <Page />;

        case 'error':
            return <span>Error</span>;
    }
}

useOneTap()

The useOneTap() hook controls the One Tap flow.

The flow can begin by calling prompt, and can be stopped by calling cancel.

By default, the prompt will show automatically on mount. This can be changed by setting the show flag to false.

function App() {
    const { prompt, cancel } = useOneTap({
        show: false // don't show on mount
    });

    return (
        <>
            <button type="button" onClick={prompt}>Prompt</button>
            <button type="button" onClick={cancel}>Cancel</button>
        </>
    )
}

Contributing

Bug reports and pull requests are welcome on GitHub.

License

This project is available under the terms of the ISC license. See the LICENSE file for the copyright information and licensing terms.