User Sign Up, Sign In, and Authentication with Google
PreviousUser Sign Up, Sign In, and Authentication with FirebaseNextUser Sign Up, Sign In, and Authentication with Apple
Last updated
Was this helpful?
Last updated
Was this helpful?
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: .
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:
Click Copy Project or Edit Project in the upper right.
Sign in with your existing Google account credentials or create an account.
Click the dropdown next to Google Cloud in the upper left.
Either:
Select an existing project.
Click NEW PROJECT.
Give your project a name.
Indicate if you'd like to create the project in a parent organization or folder.
Click Create.
In the notification that appears, click SELECT PROJECT.
The name of the selected project appears in the header at the top.
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:
Click APIs & Services.
In the left sidebar, select OAuth consent screen.
Indicate who your target users are, Internal or External.
Click Create.
Complete the App information screen to represent your brand best. The required fields are:
App name
User support email
Developer contact email address
Click SAVE AND CONTINUE.
On the Scopes screen, click ADD OR REMOVE SCOPES.
Select the following scopes:
.../auth/userinfo.email
.../auth/userinfo.profile
Click UPDATE.
Click SAVE AND CONTINUE.
On the Test users screen, click SAVE AND CONTINUE.
On the Summary screen, click BACK TO DASHBOARD.
In the left sidebar, select Credentials.
Click + CREATE CREDENTIALS.
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.
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.
See here for instructions for each of the application types Thunkable supports:
Select iOS as the Application type.
Complete the following fields:
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.
Click CREATE.
Click OK.
In the OAuth 2.0 Client IDs, click the iOS client ID you just created.
Copy the Client ID.
In your Thunkable tab, click the Settings gear icon in the sidebar.
Scroll to the OAuth Settings section and paste the iOS client ID into the Google IOS Client ID field.
Return to Google and copy the iOS URL scheme.
Back in Thunkable, paste the copied iOS URL scheme into the Google IOS URL Scheme field.
Select Web application as the Application type.
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.
Under Authorized JavaScript origins, click + ADD URI.
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.
Click CREATE.
Click OK.
In the OAuth 2.0 Client IDs section, click the web application client ID you just created.
Copy the Client ID.
In your Thunkable tab, click the Settings gear icon in the sidebar.
Scroll to the OAuth Settings section and paste the web application client ID into the Google Web Client ID field.
Select Android as the Application type.
Complete the following fields:
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.
Click CREATE.
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.
Locate the Certificate fingerprints section.
Copy the SHA1 certificate fingerprint.
Alternatively, publish the app on the Google Play Store and get the SHA-1 Certificate Fingerprint from the App signing page:
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.
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).
Click:
Visit the .
Follow these instructions above: .
Bundle ID - This is available under Publishing Settings in your Thunkable project's Settings.
Follow these instructions above: .
Follow these instructions above: .
Package name - Use the App (Bundle) ID located under Publishing Settings in your Thunkable project's Settings.
SHA-1 certificate fingerprint - See here for instructions:
If you haven't previously downloaded this Android app, you must download it to access its Keystore. Instructions are available here: .
Follow the instructions here to export your Keystore: .
Click here to download the Java Development Kit (JDK) for your system: .
If prompted for a password, enter the password you saved when exporting your Keystore. Learn more here: .
Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.
