ra-auth-google

An auth provider for react-admin that handles authentication using the Google Identity Services (GIS).

It allows to easily enable users to sign in to your app in using their Google account, either personal, or professional via Google Workspaces.

Content

     

This repository contains:

• The actual ra-auth-google package
• A simple demo app you can run locally to try out ra-auth-google with your own Google API Client ID

Simple Demo

Prerequesites

This demo requires:

• node >= 16
• yarn

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

First, if necessary, configure the OAuth consent screen for your project. If your project is still in Test mode, feel free to add some test users.

Then, follow this setup guide to get your Google API client ID.

When prompted for the Authorized JavaScript origins, please add the following values:

• http://localhost:8080
• http://localhost

Initial setup

First, clone this project.

git clone https://github.com/marmelab/ra-auth-google.git
cd ra-auth-google

You need to configure the demo app with your Google API client ID. Run the following command to initialize the environment variable file:

make prepare-env

In it, fill in the client ID:

# In packages/demo-react-admin/.env
VITE_GOOGLE_CLIENT_ID="my-application-client-id.apps.googleusercontent.com"

You are all set to run the demo app.

Running The Demo App

Install the dependencies and start the Demo App with the following command:

make install start

Using the Simple Demo

Now that all is configured and running, you can browse to http://localhost:8080/ to access the React Admin App.

You should be redirected to the login page, which will display a Sign In With Google button.

Alternatively, you can browse to http://localhost:8080/#/custom3 (while logged out) to see the One Tap button.

Feel free to play around with this demo, along with the GIS library config, to better understand its internals.

License

This repository and the code it contains are licensed under the MIT License and sponsored by marmelab.