# User Sign Up, Sign In, and Authentication with Firebase

## 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. 

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](https://firebase.google.com/products/auth).

## Video Tutorials

### How to Build User Sign Up, Sign In, and Authentication with Firebase in Thunkable

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.

{% embed url="<https://www.youtube.com/watch?v=aFL8iQCmPkM>" %}

**Template app:**&#x20;

1. Click: <https://x.thunkable.com/projectPage/653c261e53bf2181c510bad2>
2. Click **Copy Project** or **Edit Project** in the upper right.

### How to Build User Sign Out and Password Reset with Firebase in Thunkable

In this tutorial, you’ll learn how to allow a Firebase authenticated user to reset their password and sign out of your app.

{% embed url="<https://youtu.be/mia02mWYdpo>" %}

**Template app:**&#x20;

1. Click: <https://x.thunkable.com/projectPage/65498594fef5f2263755c8ec>
2. Click **Copy Project** or **Edit Project** in the upper right.

## Firebase Authentication

{% hint style="info" %}
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.
{% endhint %}

### Create a Firebase Account

1. Visit [Firebase](https://firebase.google.com/).
2. Click **Get Started** or **Sign in**.
3. Sign in with your existing Google account credentials or create an account.

### Create a Firebase Project

1. On your [Firebase console](https://console.firebase.google.com/u/0/), click **+ Add project**.
2. Give your project a name.
3. Click **Continue**.
4. Indicate whether or not you want to enable Google Analytics.
5. Click **Create project**.
6. When your new project is ready, click **Continue**.

### Enable Firebase Authentication

1. On your [Firebase console](https://console.firebase.google.com/u/0/), select your project.
2. Click to expand the **Engage** header in the sidebar.
3. Click **Authentication**.\
   ![](/files/qSxasjZ3kL9SNPfZDmlP)
4. Click **Get started**.
5. Click the **Sign-in method** tab along the top.
6. Click **Add new provider**.
7. Select **Email/Password**.<br>

   <div align="left"><figure><img src="/files/Nxwl7E9AzmuRYT2fQASU" alt=""><figcaption></figcaption></figure></div>
8. Click to enable **Email/Password** sign-in.

### Create a Firebase Web App

1. On your [Firebase console](https://console.firebase.google.com/u/0/), select your project.
2. Click the **gear icon** next to Project Overview.
3. Select **Project settings**.\
   ![](/files/1LaZVAf2ZzEDIqD0WNzF)
4. In the Your apps section, click the **code** icon to create a web app.<br>

   <div align="left"><figure><img src="/files/Ex1gRU0uojHN9FxW3rMT" alt="" width="563"><figcaption></figcaption></figure></div>
5. Give your web app a name.
6. Click **Register app**.
7. Click **Continue to console**.

### (Optional) Customize Your Email Templates

On occasion, Firebase will send emails to your app's users on your behalf. To customize these email templates:&#x20;

1. On your [Firebase console](https://console.firebase.google.com/u/0/), select your project.
2. Click to expand the **Engage** header in the sidebar.
3. Click **Authentication**.
4. Click the **Templates** tab at the top.
5. Customize your email templates as you'd like.

## Connect Your Firebase Account to Thunkable

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.

1. On your [Firebase console](https://console.firebase.google.com/u/0/), select your project.
2. Click the **gear icon** next to Project Overview.
3. Select **Project settings**.\
   ![](/files/1LaZVAf2ZzEDIqD0WNzF)
4. In the Your apps section, locate the web app's SDK code snippet.

   <div align="left"><figure><img src="/files/GWMXtl3af70G4uAA7FsQ" alt="" width="563"><figcaption></figcaption></figure></div>
5. Copy the **apiKey**.
6. In your Thunkable tab, click the **Settings gear icon** in the sidebar.
7. Scroll to the Firebase section and paste the apiKey into the Firebase **API Key** field.
8. Return to Firebase, and within the SDK code snippet, locate and copy the **databaseURL**.
9. Back in Thunkable, paste the databaseURL in the **Database URL** field.

## Sign In with Firebase Blocks

To access the Firebase authentication blocks:

1. Navigate to the **Blocks** tab.
2. In the App Features section, click **Sign In**.
3. A drawer of authentication blocks opens.

### Firebase Sign Up Block

#### Regular Block

<div align="left"><figure><img src="/files/PpB7ArhZMR1rblXgSc8F" alt="" width="563"><figcaption></figcaption></figure></div>

#### Advanced Block

To access the advanced version of a block:

1. Drag and drop the regular block into your workspace.
2. Right-click on the block.
3. Select **Show advanced block**.

![](/files/8jY3HwBJKy8CKNTEtY5H)

#### Block in Action

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.&#x20;

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.

<div align="left"><figure><img src="/files/zFPxo3sUqdWqcyonBvOr" alt="" width="375"><figcaption></figcaption></figure></div>

### Firebase Sign In Block

#### Regular Block

<div align="left"><figure><img src="/files/Dsa9wcFsEkQO639OLWYo" alt="" width="563"><figcaption></figcaption></figure></div>

#### Advanced Block

To access the advanced version of a block:

1. Drag and drop the regular block into your workspace.
2. Right-click on the block.
3. Select **Show advanced block**.

![](/files/vCUNq0j4P1uwmTdD8xzL)

#### Block in Action

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.&#x20;

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.

<div align="left"><figure><img src="/files/4AekjQDLHE5emDDaecPt" alt="" width="375"><figcaption></figcaption></figure></div>

You can use the user ID output to store user data in the cloud. See here for more information: [Cloud Variables](https://docs.thunkable.com/blocks/blocks/variables#cloud-variables-1).&#x20;

### Firebase Sign Out Block

#### Regular Block

<div align="left"><figure><img src="/files/fL6oVf64moZOTCUFhfhO" alt="" width="149"><figcaption></figcaption></figure></div>

#### Advanced Block

To access the advanced version of a block:

1. Drag and drop the regular block into your workspace.
2. Right-click on the block.
3. Select **Show advanced block**.

<div align="left"><figure><img src="/files/fxcJM9I1mzC8dPEdsXc5" alt="" width="213"><figcaption></figcaption></figure></div>

### Firebase Reset Password Block

#### Regular Block

<div align="left"><figure><img src="/files/FDaYyFuHMLfoQMXjUfLY" alt="" width="375"><figcaption></figcaption></figure></div>

#### Advanced Block

To access the advanced version of a block:

1. Drag and drop the regular block into your workspace.
2. Right-click on the block.
3. Select **Show advanced block**.

![](/files/pcaqFi8GoQOUrxfkbwT2)

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: [(Optional) Customize Your Email Templates](#optional-customize-your-email-templates).

## Manage Users in Firebase

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:&#x20;

1. On your [Firebase console](https://console.firebase.google.com/u/0/), select your project.
2. Click to expand the **Engage** header in the sidebar.
3. Click **Authentication**.
4. Click the **Users** tab along the top.
5. Click the **vertical ellipsis** associated with a user to access the action menu for their account.

<figure><img src="/files/gZjUr4VFQ0qmXNP9fdai" alt=""><figcaption></figcaption></figure>

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/blocks/app-features/sign-in/sign-in.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.