User Sign Up, Sign In, and Authentication with Google

Overview

Authentication is the process by which your app’s users sign up or sign in to your app. The authentication process confirms the legitimacy of a user's identity before allowing them to interact with the application.

Sign in with Google makes it easy for your users to sign in and sign up to your app with the trusted security of their Google Account. It eliminates their dependency on passwords, which reduces the frustrations and security risks associated with them. Learn more here: Sign in with Google.

Video Tutorial

How to Build User Sign In, Sign Out, and Authentication with Google in Thunkable

In this tutorial, we’ll show you how to use Google to authenticate your users and allow them to sign in and sign out of your app.

Template app:

1. Click: https://x.thunkable.com/projectPage/6557d522bdcda418faaeccbb

2. Click Copy Project or Edit Project in the upper right.

Sign in with Google

Select or Create a Project

1. Visit the Google Cloud console.

2. Sign in with your existing Google account credentials or create an account.

   If this is your first visit, you may need to provide your location and accept the Google Cloud Platform Terms of Service.

3. Click the dropdown next to Google Cloud in the upper left.

   
4. Either:

   1. Select an existing project.

   2. Click NEW PROJECT.

      1. Give your project a name.

      2. Indicate if you'd like to create the project in a parent organization or folder.

      3. Click Create.

      4. In the notification that appears, click SELECT PROJECT.

         
5. The name of the selected project appears in the header at the top.

   

Configure Your OAuth Consent Screen

When you use OAuth for authorization, your app requests authorizations for one or more scopes of access from a Google Account. Google displays a consent screen to the user, including a summary of your project and its policies and the requested scopes of access.

To configure your Oauth consent screen:

1. Click APIs & Services.

2. In the left sidebar, select OAuth consent screen.

   
3. Indicate who your target users are, Internal or External.

   Most Creators will need to select External. You should only select Internal if your app is exclusively for users in the same organization as your Google Cloud account.

4. Click Create.

5. Complete the App information screen to represent your brand best. The required fields are:

   1. App name

   2. User support email

   3. Developer contact email address

6. Click SAVE AND CONTINUE.

7. On the Scopes screen, click ADD OR REMOVE SCOPES.

   
8. Select the following scopes:

   1. .../auth/userinfo.email

   2. .../auth/userinfo.profile

9. Click UPDATE.

10. Click SAVE AND CONTINUE.

11. On the Test users screen, click SAVE AND CONTINUE.

12. On the Summary screen, click BACK TO DASHBOARD.

Create OAuth Client ID

1. In the left sidebar, select Credentials.

   
2. Click + CREATE CREDENTIALS.

3. Select OAuth client ID.

   A client ID is used to identify a single app to Google's OAuth servers. If your app runs on multiple platforms, each will need its own client ID.

4. Select the Application type you'd like to configure (e.g. web application, Android, or iOS). If your app runs on multiple platforms, you must configure separate OAuth client IDs for each.

5. See here for instructions for each of the application types Thunkable supports:

   1. Create iOS OAuth Client ID

   2. Create Web Application OAuth Client ID

   3. Create Android OAuth Client ID

Create iOS OAuth Client ID

1. Follow these instructions above: Create OAuth Client ID.

2. Select iOS as the Application type.

3. Complete the following fields:

   1. Name - The name of your OAuth 2.0 client. This name is only used to identify the client in the console and will not be shown to end users.

   2. Bundle ID - This is available under Publishing Settings in your Thunkable project's Settings.
4. Click CREATE.

5. Click OK.

6. In the OAuth 2.0 Client IDs, click the iOS client ID you just created.

7. Copy the Client ID.

8. In your Thunkable tab, click the Settings gear icon in the sidebar.

9. Scroll to the OAuth Settings section and paste the iOS client ID into the Google IOS Client ID field.

10. Return to Google and copy the iOS URL scheme.

11. Back in Thunkable, paste the copied iOS URL scheme into the Google IOS URL Scheme field.

Create Web Application OAuth Client ID

1. Follow these instructions above: Create OAuth Client ID.

2. Select Web application as the Application type.

3. Give your client a Name. This name is only used to identify the client in the console and will not be shown to end users.

4. Under Authorized JavaScript origins, click + ADD URI.

5. To test your project on the web, use https://x.thunkable.com. To use Google Sign in with a published web app, use https://thunkable.site.

6. Click CREATE.

7. Click OK.

8. In the OAuth 2.0 Client IDs section, click the web application client ID you just created.

9. Copy the Client ID.

10. In your Thunkable tab, click the Settings gear icon in the sidebar.

11. Scroll to the OAuth Settings section and paste the web application client ID into the Google Web Client ID field.

Create Android OAuth Client ID

1. Follow these instructions above: Create OAuth Client ID.

2. Select Android as the Application type.

3. Complete the following fields:

   1. Name - The name of your OAuth 2.0 client. This name is only used to identify the client in the console and will not be shown to end users.

   2. Package name - Use the App (Bundle) ID located under Publishing Settings in your Thunkable project's Settings.
   3. SHA-1 certificate fingerprint - See here for instructions: Get the SHA-1 Certificate Fingerprint

4. Click CREATE.

Get the SHA-1 Certificate Fingerprint

1. If you haven't previously downloaded this Android app, you must download it to access its Keystore. Instructions are available here: Download Android App.

   You do not need to download the resulting Android APK file.

2. Follow the instructions here to export your Keystore: Export Keystore from a Thunkable Project.

3. Click here to download the Java Development Kit (JDK) for your system: JDK Development Kit Download.

4. Run the following command from the Command Prompt on Windows or Terminal on Mac: keytool -keystore path-to-debug-or-production-keystore -list -v, where "path-to-debug-or-production-keystore" is the location of the Keystore file on your computer. Or keytool -keystore path-to-debug-or-production-keystore -storepass keystore_password -v where "path-to-debug-or-production-keystore" is the location of the Keystore file on your computer.

   The "keystore_password" needs to be replaced by your keystore password.

   If prompted for a password, enter the password you saved when exporting your Keystore. Learn more here: Android Keystore Alias and Password.

5. Locate the Certificate fingerprints section.

6. Copy the SHA1 certificate fingerprint.

   

Blocks

Block: get profile from Google

The mint green blocks represent the available outputs provided by the Google Sign-In process when sign-in is successful. You can save this information to personalize the user's experience within your app, display their profile picture, greet them by name, or pre-fill form fields with their email address, for example.

Output Name	Output Description
User ID	A unique identifier assigned to the authenticated user by Google. It is typically a long string of characters that is unique to each user.
Display name	The user's full name, including their first name and last name, as it appears in their Google account profile.
Given name	The user's first name.
Family name	The user's last name.
Email address	Email address of the Google account.
Profile photo image URL	URL that points to the profile image associated with the Google account.
error	If there is an error, provides the details about what went wrong.

For web apps, no blocks, including errors, will be returned if the user rejects login (as opposed to fails login).

Block: sign out from Google

Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.