# Sign in with Google

*Skill Level: Expert*

## Before You Begin

* Know about [Screens and Components](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics), and [Actions](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/action-basics/action-basics).
* Ensure you have [setup your Google Developer](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/testing-your-app/publishing-to-the-google-play-store/create-your-google-developer-account) account.
* This walkthrough will be much easier if you already have iOS and Android builds and listings setup in the app stores as you will need your Bundle IDs and some other info to set this up. For iOS go [here](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/testing-your-app/publishing-to-the-apple-app-store). For Android go [here](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/testing-your-app/publishing-to-the-google-play-store).
* Paid plan may be required to use in Native or with Xano External Collections.

## Walkthrough

{% tabs %}
{% tab title="Builder Setup" %}

### Install the Component from the Marketplace

**1.)**  Click the plus button <img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MfE_AQhM8BcVaFsjCay%2F-MfEekjmLFwlx6oPUUw0%2Fadd%20button.png?alt=media&#x26;token=756245fd-14cc-4e4d-bf6e-22e4703663ba" alt="" data-size="line"> in the left toolbar in Adalo&#x20;

**2.)**  Scroll down and click the **Explore Marketplace** button

**3.)**  In the Marketplace, scroll to find the **Sign in with Google** component and click **Install**

### Add the Component to your Signup and Login Screens

**4.)**  Click the plus button in the left toolbar in Adalo

**5.)**  Search for the Sign in with Google component

**6.)**  Drag the component on to your Sign In screen (and do the same for your Login screen). We'll finish setting it up in just a minute.
{% endtab %}

{% tab title="Google Dev Setup" %}

### Create Your OAuth Consent Screen

**7.)** Go to <https://console.developers.google.com/apis/credentials/consent>

**8.)**  Select your project or create a new project (if you don't already have one)

![If you don't already have a project you'll have to create a new one](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIohvtbZL-pUhUQPPAn%2F-MIoidRLIaAt9XWmM4ee%2FScreen%20Shot%202020-10-04%20at%2012.42.31%20PM.png?alt=media\&token=1d7acb7a-3896-44de-9e28-3c463f360ae9)

**9.)**  Choose whether your app is **Internal** (just for people within your organization) or **External/Public** (for users outside of your organization)

{% hint style="info" %}
If you choose External you will see a message about Google needing to review your app. Google will not need to review your app if you don't include a custom logo on your consent screen.
{% endhint %}

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb-Vx21LHVfYM_RvoN%2F-MIb5vINi0BvUC35Ur-E%2Fimage.png?alt=media\&token=e51d2c1e-0843-4aa1-9b78-f209aee39637)

**10.)**  Enter your app's information, then click **Continue**

* App Name
* Support Email Address
* App Logo (Optional) - 🚨if you upload a logo your app will need to be reviewed & verified  (this will take longer for you to be able to use Google Sign-in )🚨
* The home page of your app's website
* URL of your app's terms of service
* URL of your app's privacy policy
* Authorized Domains (include the same domain as your app's website)
* Developer Contact Information

**11.)**  Click the **Add or Remove Scopes** button and select on the first 3 scopes

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbBQ41nx3OVpFIcZb2%2FScreenshot%202020-10-01%20at%209.42.36%20PM.png?alt=media\&token=c62757d0-7305-4044-973c-07ebbb6307e8)

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbBc-Z9q0-Vadh16fz%2FScreenshot%202020-10-01%20at%209.43.05%20PM.png?alt=media\&token=74858137-8e3a-4401-9395-dcade85c0888)

**12.)**  Scroll down click the **Update** button.  Then scroll down and click the **Save and Continue** button.

**13.)**  Skip entering any Optional Info

**14.)**  On the Summary step, scroll down and click the **Back to Dashboard** button.  You should see a message stating "Verification not required"

{% hint style="info" %}
Your consent screen is in Testing mode by default. Only your Google Developer account and testers will have access to use Sign In with Google until you click the **Publish** button on this Dashboard. You can toggle between testing and production at any time.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FPDcM2vV60pBUkiBdcg5n%2FScreen%20Shot%202021-10-12%20at%202.09.57%20PM.png?alt=media\&token=3e792557-7a9e-4e8f-974c-98102914475c)
{% endhint %}

### Create Your Web Client ID

**15.)**  Go to <https://console.developers.google.com/apis/credentials>

**16.)**  Click the **Create Credentials** button

**17.)**  Choose the **OAuth Client ID** option

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb-Vx21LHVfYM_RvoN%2F-MIb3cAxua_Ds7koDTCp%2FMy%20Project%2039388%20%E2%80%93%20Google%20API%20Console.gif?alt=media\&token=15610362-5221-4f67-acc5-6a354bbd3e29)

**18.)**  Select **Web Application** as the application type and enter an internal name for your web client ID (this can be anything)

**19.)**  For the Authorized Javascript Origins, enter two URIs: "<https://previewer.adalo.com>" and the custom web domain of your Adalo app (if your app is accessible as a web app), then click **Create**

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbHtkDT0VIDVCrxOSr%2FScreenshot%202020-10-01%20at%2010.05.14%20PM.png?alt=media\&token=d2e6a27c-2d08-4ed6-9a05-aaa00945add3)

&#x20;**20.)**  Copy the Client ID and paste it into the Client ID input of the Google Sign-in component.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbIT2g_HgTj2wBL0VS%2Fimage.png?alt=media\&token=dc7b8ed0-e6c6-44d3-987f-43516fbc0928)

&#x20;   &#x20;

### Create Your iOS Client ID

**21.)**  Go to [https://console.developers.google.com/apis/credential](https://console.developers.google.com/apis/credentials)

**22.)**  Click the **Create Credentials** button, then choose the **OAuth Client ID** option

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb-Vx21LHVfYM_RvoN%2F-MIb3cAxua_Ds7koDTCp%2FMy%20Project%2039388%20%E2%80%93%20Google%20API%20Console.gif?alt=media\&token=15610362-5221-4f67-acc5-6a354bbd3e29)

**23.)**  Select **iOS** as the application type, enter your iOS bundle ID, and click **Create** (if you haven't created your iOS bundle yet [here's a help think for that](https://help.adalo.com/testing-your-app/publishing-to-the-apple-app-store) — note that you can still test it on web and PWA as long as you've finished the Web Client ID step from above)

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbKeWIgOV7dgk8Pqvn%2Fimage.png?alt=media\&token=ed22a451-d3e0-4cc9-9d64-db043bc1f454)

**24.)** Copy the Client ID and paste it in to the left panel in Adalo when you have the Sign in with Google component selected.

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MIb607H68XrIbcX_uW9%2F-MIbLzQOzAi6IjlzE1tD%2Fimage.png?alt=media\&token=25ff655a-a806-48a6-a1c3-6256384e09f5)

**25.)** **🚨PLEASE NOTE🚨**: Due to the app store guidelines, you'll need to add the 'Sign In with Apple' component or your app will get rejected. [Go here to set up 'Sign In with Apple.'](https://help.adalo.com/component-basics/marketplace-components/sign-in-with-apple)

### Create Your Android Client ID

**26.)**  Go to <https://console.developers.google.com/apis/credentials>

**27.)**  Click the **Create Credentials** button and choose the **OAuth Client ID** option

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-MItiCGxNmAB4PFFHRtM%2F-MItitOqUrcb8Oz7jaEl%2FScreen%20Shot%202020-10-05%20at%2012.04.03%20PM.png?alt=media\&token=2822e27e-b002-4a66-b6a2-2122c0bbbf8c)

**28.)**  Pick **Android** from the **Application type** dropdown, then enter the name of your app in the **Name** field.

**29.)**  For the package name enter in your bundle ID from the publish settings that you created while setting up your Android APK (if you haven't done that yet you can still test it on the web and PWA if you've created your Web Client ID — here's [the help link for creating your Android app](https://help.adalo.com/testing-your-app/publishing-to-the-google-play-store) if you haven't done that yet)

**30.)**  For the Fingerprint, which one you use depends on the build of your app. See the table below for instructions for each build type.

{% tabs %}
{% tab title="AAB File" %}
*Occurrence: Most Common*

Use this method if your Adalo App build is:

* An AAB (.aab) file

  OR&#x20;
* Is an Adalo APK and you have opted into Google App Signing ([how to check?](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/glossary#play-app-signing))

**1.)**  Go to [Play Store Console](https://play.google.com/console) and select your app.

**2.)**  Under the **Setup** dropdown in the left menu, select the **App Integrity** option

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FreI3UCi1bYwNd8Qw4Qjz%2FScreen%20Shot%202021-10-12%20at%2012.39.08%20PM.png?alt=media\&token=6be1cfbb-c0a1-48a3-a2f8-cd1a38d5f796)

**3.)** Copy the **SHA-1** Fingerprint and paste it into the **Fingerprint** field of your Android Client ID setup.

<img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FlMnIvfM3dwiTUxlr2AiD%2FScreen%20Shot%202021-10-12%20at%2012.42.43%20PM.png?alt=media&#x26;token=112edc12-4af2-498d-aa4b-ce0f2396e604" alt="" data-size="original">
{% endtab %}

{% tab title="APK File from Adalo App" %}
*Occurrence: Somewhat Common*

Use this method if your Adalo App:

* Is an APK (.apk) file and is not enrolled in Play App Signing ([how to check?](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/glossary#play-app-signing))
* If your APK is enrolled in Play App Signing, use the AAB process tab instead.

`FF:71:AA:98:E9:5F:7A:66:E9:86:AC:C5:33:F7:A7:F1:6B:68:E7:C6`
{% endtab %}

{% tab title="APK File from Elsewhere" %}
*Occurrence: Very Rare*

If you are publishing an Adalo app to an APK or AAB build already in Play Store that was not made with Adalo ([Play App Signing](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/glossary#play-app-signing) status does not matter), you will need to download the keystore file. Please [contact Adalo support](https://info.adalo.com/submit-a-support-ticket?subject=Google%20Sign-in%20-%20Need%20SHA-1%20Key%20from%20Keystore%20File\&content=I%20am%20bringing%20a%20previously%20non%20Adalo%20app%20to%20publish%20with%20Adalo.%20I%20need%20this%20key%20to%20utilize%20the%20Google%20Sign%20in%20component.%20%0A%0AFILL%20IN%20YOUR%20DETAILS%20HERE) for help.
{% endtab %}
{% endtabs %}

**31.)**  Then click **Create**. Note that you won't need to paste this into Adalo, you just have to have it created for your Google Sign In to work on Android.
{% endtab %}

{% tab title="Finishing Up" %}

### Finish configuring your Sign in with Google component

* If you're developing an app just for internal use at your organization, you can choose to restrict logins to only people within your organization by entering the domain of your organization's email address.
* You can customize the appearance of the button itself
* When users click the button, they will be either signed up for a new account with your app or log in to their existing account. You can add additional actions to the button such as linking the users to the home screen of your app.
  {% endtab %}
  {% endtabs %}

## Learn More

If using Xano External Collections please follow the steps in the [Xano+Google Sign In Help Doc ](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/integrations/xano/google-sign-in-with-xano-database)after completing the steps above.

## Help

If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests)
