Firebase (client side SDK)

Prerequisites

Firebase requires a specific configuration to connect from the client. Firstly, open your Firebase app – Project Settings - SDK setup and configuration. Open the Config tab and copy the setup script, that will be used later for integration:

Please do not copy the const firebaseConfig = part!

If there is no web app connection available, create it:

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:

Firebase libraries

Now, you can learn how to manage your data from Cloud Firestore or Realtime Database.