# Firebase authentication

This article focuses on how to provide authentication to your Firebase database in UI Bakery:

* [Firestore](#firestore)
* [Realtime DB](#realtime-database)

## Firestore

### Granting Read permissions to everyone

{% hint style="warning" %}
Use this authentication type <mark style="color:red;">**for testing purposes only**</mark> since it grants *Read* access to every user.
{% endhint %}

1. Open your [Cloud Firestore](https://console.firebase.google.com/u/0/) and navigate to **Rules**.
2. Add the following line to the code:

```
allow read: if true;
```

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

After that you can proceed to UI Bakery and configure your [Firestore data source](/reference/data-sources/firebase.md#configuration).

{% hint style="warning" %}
If you have already added Firestore as a data source and have an <mark style="color:red;">authentication error</mark> thrown after any action is run, you might need to adjust your Firestore rules as stated above and then **re-run** your action in UI Bakery.
{% endhint %}

### Access to authenticated users only

The flow to grant access only to your authorized users consists of **three steps**:

#### Step 1

1. Open your [Firebase app](https://console.firebase.google.com/u/0/) and navigate to *Authentication* > *Users*.&#x20;
2. Create a user for UI Bakery authorization - the credentials will be used later.
3. Copy **User UID**.

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

4. Next, go to your *Cloud Firestore* and open the **Rules** tab to configure access rights.
5. Add the following line to the code:

```
allow read, write: if request.auth.uid == 'User UID';
```

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

#### Step 2

Now, in UI Bakery, open the project you need in the Builder and click on the **Custom code** tab in the footer panel. There, insert the Firebase connection code:

```html
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-auth-compat.js"></script>

<script>
  firebase.initializeApp(Firebase config goes here);
</script>
```

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

If you need to enable other Firebase capabilities, you can connect the corresponding Firebase library. You can find all available libraries listed [here](/reference/data-sources/firebase/firebase-libraries.md).

#### Step 3

Next, you need to create a *Login action* that will authenticate the user and grant access to your Cloud Firestore.&#x20;

1. [Create a new action](/concepts/actions/action-basics.md#creating-actions) of the **JavaScript Code** type and add the following code:

```javascript
const email = "email_of_created_user";
const password = "password_of_created_user";
return firebase.auth().signInWithEmailAndPassword(email, password);
```

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

2. Click **Execute action**.

{% hint style="warning" %}
Please note that the *Login* action should be run **before** any other action.
{% endhint %}

For example, to read your data with a prior login, you can create an action consisting of *two steps*:

* *Step 1* - select the **Execute Action** type and choose your *login* Action from the list.
* *Step 2* - select the **JavaScript Code** action type and add the code that will [list your data](/reference/data-sources/firebase/realtime-database.md#list-data).

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

## Realtime Database

### Granting Read permissions to everyone

{% hint style="warning" %}
Use this authentication type <mark style="color:red;">**for testing purposes only**</mark> since it grants *Read* access to everyone.
{% endhint %}

1. Open your *Realtime Database* and navigate to **Rules**.
2. There, add the following code:

```json
{
    "rules": {
        ".read": true,
    } 
}
```

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

After that you can proceed to UI Bakery and configure your [Realtime Database data source](/reference/data-sources/firebase.md#configuration).

{% hint style="warning" %}
If you have already added Realtime DB as a datasource and have an <mark style="color:red;">authentication error</mark> thrown after any action is run, you might need to adjust your Realtime DB rules as stated above and then **re-run** your action in UI Bakery.
{% endhint %}

### Access to authenticated users only

The flow to grant access only to your authorized users consists of **three steps**:

#### Step 1

1. Open your [Firebase app](https://console.firebase.google.com/u/0/) and navigate to *Authentication* > *Users*.&#x20;
2. Create a user for UI Bakery authorization - the credentials will be used later.
3. Copy **User UID**.

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

4. Next, go to your *Realtime DB* and open the **Rules** tab to configure access rights.
5. Add the following code:

```json
{ 
    "rules": { 
        "some_path": {
            "$uid": {
                ".read": "auth.uid == 'User UID'",
                ".write": "auth.uid == 'User UID'"
              }
        }
    }
}
```

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

#### Step 2

Now, in UI Bakery, open the project you need in the Builder and click on the **Custom code** tab in the footer panel. There, insert the Firebase connection code:

```html
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.10.0/firebase-auth-compat.js"></script>

<script>
  firebase.initializeApp(Firebase config goes here);
</script>
```

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

If you need to enable other Firebase capabilities, you can connect the corresponding Firebase library. You can find all available libraries listed [here](/reference/data-sources/firebase/firebase-libraries.md).

#### Step 3

Next, you need to create a *Login action* that will authenticate the user and grant access to your Realtime Database.&#x20;

1. [Create a new action](/concepts/actions/action-basics.md#creating-actions) of the **JavaScript Code** type and add the following code:

```javascript
const email = "email of a dummy user"; 
const password = "password of a dummy user"; 
return firebase.auth().signInWithEmailAndPassword(email, password);
```

3\. Click **Execute action**.

{% hint style="warning" %}
Please note that the *Login* action should be run **before** any other action.
{% endhint %}

For example, to read your data with a prior login, you can create an action consisting of *two steps*:

* *Step 1* - select the **Execute Action** type and choose your *login* Action from the list.
* *Step 2* - select the **JavaScript Code** action type and add the code that will [read your data](/reference/data-sources/firebase/realtime-database.md#read-data).

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

***

Explore the following article to proceed with building your app and managing Firebase data:point\_down:

{% content-ref url="/pages/m6EWRs2U8Rk0tkSz07Rq" %}
[Managing database data](/reference/data-sources/firebase/realtime-database.md)
{% endcontent-ref %}


---

# 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.uibakery.io/reference/data-sources/firebase/firebase-authentication.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.