Firebase Authentication

To provide authentication to your database in UI Bakery, follow the steps described below.

Cloud Firestore

For testing purposes (read permissions only)

Use this authentication type for testing purposes only since it grants read access for every user.

To grant read permissions in UI Bakery to everyone, follow these steps:

1. Navigate your Firestore - Rules

2. Add a code line

allow read: if true;

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

If you have already added Cloud Firestore as a data source and have an authentication error 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.

Access for authenticated users only

To grant access only to your authorized users, please follow the below steps.

Step 1

1. Navigate your Firebase - Authentication - Users

2. Create a user for UI Bakery authorization (its credentials will be used later for authorization)

3. Copy its User UID

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

5. Add a code line:

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

Step 2

Proceed to UI Bakery.

Open Custom Code tab and 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 libraries. All available libraries are listed here:

Firebase libraries

Step 3

Once done, proceed to the Builder to add a Login Action, that will authenticate the user and grant access to your Cloud Firestore. To create a Login Action:

1. Add a new Action - Code

2. Specify the code below:

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

3. Run Action

Please note that the Login Action should be run before any other Action

For example, to read your data with a prior login, do as follows:

• add a new Workflow

• step 1 - Execute Action - select login Action from the list

• step 2 - Code, that will list your data

Realtime Database

For testing purposes (read permissions only)

Use this authentication type for testing purposes only since it grants read access for everyone.

To grant read permissions in UI Bakery to everyone, follow these steps:

1. Navigate your Realtime Database - Rules

2. Add a code:

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

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

If you have already added Realtime DB as a datasource and have an authentication error 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.

Access for authenticated users only

To grant access only to your authorized users, please follow these steps.

Step 1

1. Navigate your Firebase - Authentication - Users

2. Create a user for UI Bakery authorization (its credentials will be used later for authorization)

3. Copy its User UID

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

5. Add a code line

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

Step 2

Proceed to UI Bakery.

Open Custom Code tab and 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 want to enable other firebase capabilities, you have to connect corresponding firebase libraries. All the available libraries are listed here:

Firebase libraries

Step 3

Once done, proceed to the Builder to add a Login Action, that will authenticate the user and grant access to your Realtime Database. To create a Login Action:

1. Add a new Action - Code

2. Specify the code below:

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

3. Run Action

Please note that the Login Action should be run before any other Action

For example, to read your data with a prior login, do as follows:

• add a new Workflow

• step 1 - Execute Action - select login Action from the list

• step 2 - Code, that will read your data

Nice job! You can proceed to build your app. The following articles will help you further:

• Realtime Database

• Cloud Firestore