Firebase authentication

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

• Firestore

• Realtime DB

Firestore

Granting Read permissions to everyone

1. Open your Cloud Firestore and navigate to Rules.

2. Add the following line to the code:

allow read: if true;

After that you can proceed to UI Bakery and configure your Firestore data source.

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 and navigate to Authentication > Users.

2. Create a user for UI Bakery authorization - the credentials will be used later.

3. Copy User UID.

1. Next, go to your Cloud Firestore and open the Rules tab to configure access rights.

2. Add the following line to the code:

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

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:

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

If you need to enable other Firebase capabilities, you can connect the corresponding Firebase library. You can find all available libraries listed here.

Step 3

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

1. Create a new action of the JavaScript Code type and add the following code:

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

1. Click Execute action.

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.

Realtime Database

Granting Read permissions to everyone

1. Open your Realtime Database and navigate to Rules.

2. There, add the following code:

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

After that you can proceed to UI Bakery and configure your Realtime Database data source.

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 and navigate to Authentication > Users.

2. Create a user for UI Bakery authorization - the credentials will be used later.

3. Copy User UID.

1. Next, go to your Realtime DB and open the Rules tab to configure access rights.

2. Add the following code:

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

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:

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

If you need to enable other Firebase capabilities, you can connect the corresponding Firebase library. You can find all available libraries listed here.

Step 3

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

1. Create a new action of the JavaScript Code type and add the following code:

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

3. Click Execute action.

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.

Explore the following article to proceed with building your app and managing Firebase data👇