Authentication is the process by which your app’s users sign up or sign in to your app. It confirms the legitimacy of a user's identity before allowing them to interact with the application.
Thunkable supports authentication through:
User Sign Up, Sign In, and Authentication with FirebaseUser Sign Up, Sign In, and Authentication with GoogleUser Sign Up, Sign In, and Authentication with AppleAuthentication 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.
Firebase is a Google product that simplifies the development of mobile apps by providing out-of-the-box solutions for common mobile development tasks, such as authentication. Learn more here: Firebase Authentication.
In this tutorial, we’ll show you how to use Firebase to authenticate your users and allow them to sign up and sign in to your app.
Template app:
Click:
Click Copy Project or Edit Project in the upper right.
In this tutorial, you’ll learn how to allow a Firebase authenticated user to reset their password and sign out of your app.
Template app:
Click:
Click Copy Project or Edit Project in the upper right.
Visit .
Click Get Started or Sign in.
Sign in with your existing Google account credentials or create an account.
On your , click + Add project.
Give your project a name.
Click Continue.
On your , select your project.
Click to expand the Engage header in the sidebar.
Click Authentication.
On your , select your project.
Click the gear icon next to Project Overview.
Select Project settings.
On occasion, Firebase will send emails to your app's users on your behalf. To customize these email templates:
On your , select your project.
Click to expand the Engage header in the sidebar.
Click Authentication.
To connect your Firebase and Thunkable accounts, you need to locate two Firebase properties:
API Key
Database URL
These will need to be entered into Thunkable, so we recommend you have two browser tabs open, one for Firebase and one for Thunkable.
On your , select your project.
Click the gear icon next to Project Overview.
Select Project settings.
To access the Firebase authentication blocks:
Navigate to the Blocks tab.
In the App Features section, click Sign In.
A drawer of authentication blocks opens.
To access the advanced version of a block:
Drag and drop the regular block into your workspace.
Right-click on the block.
Select Show advanced block.
In the block combination below, when the user clicks the button, it triggers the Firebase sign up event. The user's email address and password are passed to Firebase as inputs to create their account, and there is an output from Firebase if an error occurs.
If there is an error, the label's text will display the error from Firebase. A common error is "The email address is already in use by another account." If the Firebase sign up is successful, the app will proceed with the user sign in function.
To access the advanced version of a block:
Drag and drop the regular block into your workspace.
Right-click on the block.
Select Show advanced block.
In the block combination below, when the user clicks the button, it triggers the Firebase sign in event. The user's email address and password are passed to Firebase as inputs to verify that they have an account. Firebase outputs a unique user ID, indicates whether the user verified their email address, and signals when an error has occurred.
If there is an error, the label's text will display the error from Firebase. If the Firebase sign in is successful, the app will navigate the user to the first screen in the app.
You can use the user ID output to store user data in the cloud. See here for more information: .
To access the advanced version of a block:
Drag and drop the regular block into your workspace.
Right-click on the block.
Select Show advanced block.
To access the advanced version of a block:
Drag and drop the regular block into your workspace.
Right-click on the block.
Select Show advanced block.
The Firebase reset password block triggers Firebase to send an email to the specified email address with instructions for the user to reset their password.
If you'd like to customize the emails sent on your app's behalf, see here: .
Within the Firebase console, you have the ability to reset a user's password, and disable and delete their accounts. To access your users' accounts:
On your , select your project.
Click to expand the Engage header in the sidebar.
Click Authentication.
Click Create project.
When your new project is ready, click Continue.
Click Get started.
Click the Sign-in method tab along the top.
Click Add new provider.
Select Email/Password.
Click to enable Email/Password sign-in.
In the Your apps section, click the code icon to create a web app.
Give your web app a name.
Click Register app.
Click Continue to console.
Customize your email templates as you'd like.
In the Your apps section, locate the web app's SDK code snippet.
Copy the apiKey.
In your Thunkable tab, click the Settings gear icon in the sidebar.
Scroll to the Firebase section and paste the apiKey into the Firebase API Key field.
Return to Firebase, and within the SDK code snippet, locate and copy the databaseURL.
Back in Thunkable, paste the databaseURL in the Database URL field.
Click the vertical ellipsis associated with a user to access the action menu for their account.
Please note that while the images and instructions from the Firebase account are accurate at the time of this doc’s publishing, they may change slightly over time.
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.
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.
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:
Click Copy Project or Edit Project in the upper right.
Visit the .
Sign in with your existing Google account credentials or create an account.
Click the dropdown next to Google Cloud in the upper left.
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.
In the left sidebar, select Credentials.
Click + CREATE CREDENTIALS.
Select OAuth client ID.
Follow these instructions above: .
Select iOS as the Application type.
Complete the following fields:
Follow these instructions above: .
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.
Follow these instructions above: .
Select Android as the Application type.
Complete the following fields:
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: .
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.
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.
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.
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:
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.
Bundle ID - This is available under Publishing Settings in your Thunkable project's Settings.
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.
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.
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.
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: Get the SHA-1 Certificate Fingerprint
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.
If prompted for a password, enter the password you saved when exporting your Keystore. Learn more here: .
Locate the Certificate fingerprints section.
Copy the SHA1 certificate fingerprint.
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.
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
If this is your first visit, you may need to provide your location and accept the Google Cloud Platform Terms of Service.
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.
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.
You do not need to download the resulting Android APK file.
For web apps, no blocks, including errors, will be returned if the user rejects login (as opposed to fails login).
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.
The user's first name.
Sign In with Apple is a feature provided by Apple that allows users to create accounts and sign in to apps using their Apple ID. It is designed to enhance user privacy and security while simplifying the login process for both developers and users.
According to Apple’s App Store Review Guidelines, apps that use a third-party or social login service such as Google Sign-In to set up or authenticate the user’s primary account with the app must also offer Sign in with Apple as an equivalent option. You can read more about this requirement and acceptable exceptions here: App Store Review Guidelines - Sign in with Apple.
Setting up user sign-in with Apple requires going back and forth between your Thunkable project and your Apple Developer account. As a result, we recommend you have a tab in your browser open for each that you can easily navigate between.
In this tutorial, we’ll show you how to use Apple to authenticate your users and allow them to sign in and sign out of your app.
Template app:
Click:
Click Copy Project or Edit Project in the upper right.
To allow end users of your Thunkable-built app to sign up and sign in to your app using their already existing Apple ID:
Sign in to your . Don't have an Apple Developer account yet? You can learn more and sign up for one here:
Under the Certificates, IDs & Profiles heading, select Identifiers.
Click the blue + icon to add a new identifier to your account.
If not already on the Identifiers screen, under the Certificates, IDs & Profiles heading, select Identifiers.
Click the blue + icon to add a new identifier to your account.
Choose Services IDs from the list of options.
To access the Apple authentication block:
Navigate to the Blocks tab.
In the App Features section, click Sign In.
A drawer of authentication blocks opens.
The first time an app's end user signs in to an app with Apple, this block will return the following:
Subsequent sign ins or uses of this block will only return the User ID. You are responsible for storing the User ID, Authorization code, Identity token, and any other information needed to retrieve or update the user's profile information for future sign ins. The user will still be able to sign in, but their name and email address will not be updated.
To collapse the block to streamline your block combinations:
Right-click on the block.
Select Expand Block.
Choose App IDs from the list of options.
Click Continue.
Select App.
Click Continue.
On the Register an App ID screen, complete or take note of the following fields:
Description - This is the name you want to give your app. It appears next to the app icon when downloaded on a user's device. It must be unique to the App Store and cannot use special characters such as @, &, *, "
Bundle ID - This is also unique to your app, but not visible to your app users. Apple recommends reversing your domain name to create your bundle ID, i.e. com.yourDomainName.yourAppName to avoid conflicts with other apps.
App ID Prefix (Team ID) - Record your App ID Prefix or Team ID. This automatically created, unique identifier is linked to your Apple Developer Program membership. The same ID can be used for every app you publish.
Record the values of these fields somewhere safe.
Scroll down and click to enable the Sign in with Apple capability.
Click Continue.
Confirm that the details are correct.
Click Register.
The new App ID you created is included in your list of Identifiers. Click the app's name to review its Description, App ID Prefix (Team ID), or Bundle ID.
Click Continue.
On the Register a Services ID screen, complete the following fields:
Description - This is the name you want to give your app.
Identifier - Although Apple recommends that you use the same format as the Bundle ID, this identifier must be different from the Bundle ID. We recommend adding .servicesID to the end of your Bundle ID (e.g. com.yourDomainName.yourAppName.servicesID).
Copy the Services ID
Click Continue.
Confirm that the details are correct.
Click Register.
Click the newly created Services ID in your list of identifiers to edit it.
Check the box for Sign in with Apple.
Click Configure.
Select the App ID you created from the dropdown.
In the Domains and Subdomains field, enter: thunkable.site
In the Return URLs field, enter: https://thunkable.site
Cick Next.
Confirm your web authentication configuration and then click Done.
Click Continue.
Click Save.
Complete key generation by ensuring the "Sign in with Apple" box is checked.
Within your Thunkable project, click the Settings gear icon in the left sidebar.
Scroll down to the OAuth Settings section header.
In the Apple Web Client ID field, paste the copied Services ID.
In the Apple Web Redirect URI field, input: https://thunkable.site
Email address
The user's unique email identifier. Note: Users may use Apple's feature to generate a random email address.
Authorization code
A temporary code granted to the app by Apple's authentication system, which the app can exchange for access tokens, allowing it to access the user's data.
Identity token
A JSON Web Token (JWT) that contains user information, such as the user's email address and a unique identifier, which can be used to verify the user's identity.
Error
An indication of a problem, issue, or unexpected condition that occurs during app operation, which may be displayed to the user or used for debugging and error handling by developers.
User ID
The unique identifier assigned to the authenticated user, which can be used to differentiate and identify individual users within the app. Note: This differs from the user's Apple ID for iCloud or the Apple App Store.
Given name
The user's first or given name, which represents their personal name.
Family name
Please note that while the images and instructions from the Apple Developer account are accurate at the time of this doc’s publishing, they may change slightly over time.
If the user is not signed in and fails or rejects sign in, the get profile from Apple block returns an error. For web apps, no blocks, including errors, are returned if the user rejects sign in (as opposed to fails sign in).
The user's last name or surname, which represents their family name.
Uploading apps to the App Store requires an Explicit Bundle ID. Wildcard bundle IDs are no longer accepted.
