🛡️ Google One Tap Auth in Strapi

Google auth with token helps you to easily create Google authentication for your users using the Sign In With Google button. It uses the official google-auth-library to execute the actions and verify the token. You can get it working in seconds 🫰.

Google makes One Tap authentication for smooth authentication with just one click, no need for redirection URL

Features

• Official Google APIs integration
• One Tap support using idToken One Tap
• Uses Strapi default user-permission collection
• JWT Authentication
• Sanitized response
• Highly secure
• Saves user first and last name in Strapi user entity
• Saves user Gmail profile picture in Strapi user entity

⚙️ Installation in Strapi app

1. Install the plugin using npm or yarn

npm install strapi-google-auth-with-token
# or
yarn add strapi-google-auth-with-token

2. Add the following lines of code in the file: config/plugins.js or config/plugins.ts

1module.exports = {
2  'strapi-google-auth-with-token': {
3    enabled: true,
4    fullNameField: 'fullName', // (Optional) This is the attribute name in Strapi user entity where you will save the user full name
5    firstNameField: 'firstName', // (Optional) This is the attribute name in Strapi user entity where you will save the user first name
6    lastNameField: 'lastName',  // (Optional) This is the attribute name in Strapi user entity where you will save the user last name
7    pictureField: 'profileImage', // (Optional) This is the attribute name in Strapi user entity where you will save the user Gmail picture
8    pictureFolderName: 'profiles', // (Optional) The name of the folder where user Gmail picture will be stored
9    // PS: You can use only some of them or none of them
10    // BTW: You need to create these attributes in the Strapi user entity if you provide them in this config
11  },
12};
13
14// or in typescript for config/plugins.ts
15export default () => ({
16  "strapi-google-auth-with-token": {
17    enabled: true,
18    fullNameField: 'fullName', // (Optional) This is the attribute name in Strapi user entity where you will save the user full name
19    firstNameField: 'firstName', // (Optional) This is the attribute name in Strapi user entity where you will save the user first name
20    lastNameField: 'lastName',  // (Optional) This is the attribute name in Strapi user entity where you will save the user last name
21    pictureField: 'profileImage', // (Optional) This is the attribute name in Strapi user entity where you will save the user Gmail picture
22    pictureFolderName: 'profiles', // (Optional) The name of the folder where user Gmail picture will be stored
23    // PS: You can use only some of them or none of them
24    // BTW: You need to create these attributes in the Strapi user entity if you provide them in this config
25  },
26});

🔑 Configuration (Get Google Client Id)

1. Create a Google project from the Google Cloud Console.
2. Create OAuth Consent Screen (Nav Menu -> APIs & Services -> OAuth consent screen).
3. Go to Credentials, click create credentials -> OAuth Client ID
4. Put the CLIENT_ID in the Strapi Content Management page > Google Credential, and save it.

❓ How to use

Get User JWT token and user data

1{
2  method: 'POST',
3  path: 'STRAPI_BACKEND_URL/strapi-google-auth-with-token/auth', // like: http://localhost:1337/strapi-google-auth-with-token/auth
4  data: {
5    token: idToken // get the token from the Google sign-in button
6  }
7}

🐞 Report Bugs/Issues

Any bugs/issues you may face can be submitted as issues in the GitHub repo.

🎗️ Support

I am very happy 😀 about every coffee!