Links

Firebase (client side SDK)

Connect to Firebase Cloud Firestore or Realtime Database

Prerequisites

Firebase requires a specific configuration to connect from the client. Firstly, open your Firebase appProject Settings - SDK setup and configuration. Open the Config tab and copy the setup script, that will be used later for integration:
Copying Firebase config script
Please do not copy the const firebaseConfig = part!
If there is no web app connection available, create it:
How to create a web app connection in Firebase
Below is a sample of what a setup script might look like:
const firebaseConfig = {
apiKey: "AIzaSyDyWoZsfx4XnpCQ89Sf1BkDTTSWwV4m244",
authDomain: "fir-webinar-39878.firebaseapp.com",
databaseURL: "https://fir-webinar-39878-default-rtdb.firebaseio.com",
projectId: "fir-webinar-39878",
storageBucket: "fir-webinar-39878.appspot.com",
messagingSenderId: "345464345951",
appId: "1:345464345951:web:1f33b5a91d6d954bc512ea"
};

Configuration

Open UI Bakery app – Custom Code tab and insert 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:
Now, you can learn how to manage your data from Cloud Firestore or Realtime Database.