Skip to main content

Google Login

🔵 Feature included from Pro Plan

Mauricio Callú R. avatar
Written by Mauricio Callú R.
Updated over 3 months ago

Give your customers an even easier login with their favorite Apps ⎯Google Login.

🔵 Feature included from Pro Plan


Learn how it works and how to configure it.

The first thing we have to do is go to the account that we have in Firebase.

Here in Firebase, you click on Build and then Add Project.

Group_11.png

After clicking on add project, this screen will appear, where you must give your Project a name.

Group_29.png

PS: Make sure to change the ID/name for your Login, so you can use your brand's name

You click on the button that says: Select parent resource.

This button will select the parent resource where you want that project to be. 
And you click on continue.

Group_30.png

In the next step, you must ensure that Google Analytics is Enabled for that project.

Group_32.png

After clicking Continue, you will go to the menu (left side of your screen) and click on Project Overview, and the following screen will appear.

On this screen, you click where it says: Add App, and different options will appear; in this case, we will choose the Android option.

Group_33.png

We will move on to our Ordering Dashboard since we need to extract some data.

In the Builder, we will select the project (app) that we want to have the Google Login.

And we are going to copy the Name and the Package.

Step 1 screenshot


It will also ask us for the SHA-1; this is obtained with a support agent; please contact [email protected], we'll help you.

Group_43.png

When you click "Register App," it will give you a file you must download.

🚨 Very Important: Save this file because if you lose it, you'll have to do all the steps again. 🚨

Group_44.png

To the following steps, click Continue.

Group_45.png

In the next step, we will click on Authentication in the menu, and the following screen will appear.

Here we will click on "Get Started."

Group_46.png

We will select the option "Google."

Group_47.png

Here, we will only add the user's email.

If that option ain't showing, enable the "Google" sign-in method.

Group_67.png

On this screen in Firebase, you will copy the code that comes in the part of WEB CLIENT ID.

Group_60.png

We click the "Save" button, and the app we just uploaded will appear as Enabled.

Group_49.png

We move to our Dashboard, and we are going to click on the following:

You'll find these settings in the Pro section:

Step 1 screenshot

Google Login ID

In Google Settings, we will paste the code we copied in Firebase (Web Client ID) in the "Google Login ID" part, enabled Google Login, and save it.

Web Client Secret

Add the Web client secret from your firebase account to the General Google Client ID Services, and do the same for the Secret Services.

Google Login and API KEY

From this window, you will copy API KEY and AUTHDOMAIN; these are data you'll use later on your Ordering Dashboard.

Group_54.png

Authentication module

Now let's go back to the Authentication module.

Click on Authentication (menu), Settings, and Authorized Domains.

Next, click on the "Add domain" button, and this part will appear; here, we will add our domain name and click on Add.

Group_56.png

Configure iOS

Create a new iOS app in the project dashboard.


Add the package of your app and a name ( the package must be the same as android)

mceclip0.png

The app store ID is optional.

Register the app and download the GoogleService.Info.plist

Then, to complete the configuration, press Next, Next, Next, and continue to console


At last, enable Google Login, and that's it! Test it.

Did this answer your question?