The Firebase integration is in an early stage, and we’re working on improving it. Any feedback is welcome!

​
What is Firebase?

Firebase is a Google-backed cloud platform that provides a suite of tools for building web and mobile applications. Examples of what you can do are, but not limited to:
  • Add Login with Google to your app
  • Add real-time functionality to your app, e.g. a chat where users can talk to each other
  • Save your app data to the cloud
You can learn more about Firebase here.

​
Setting up Firebase

To connect Firebase to your Webdraw App, you need to create a Firebase project.

​
Creating your project

  1. Go to the Firebase Console and login with your Google account.
You should now see a page like this:
Firebase Console

Firebase Console

  1. Click on the button to create a new project, and give your project a name.
Firebase analytics is not required, so you can leave it disabled. (If you want to use it, you can enable it later)
A new project will be created, and you will be redirected to the project dashboard.
Firebase Project Dashboard

Firebase Project Dashboard

​
Getting your Firebase config

  1. Open your Firebase project settings and scroll down to the Your apps section.
Firebase Project Settings

Firebase Project Settings

  1. Click on the Web icon to add a new web app to your project. This will be our Webdraw App. Give it a nickname, and click on the Register button.
The Firebase hosting option is not needed, since Webdraw already hosts your app automatically.
Add Web App

Add Web App

  1. On the Add Firebase SDK section, copy the code from the firebaseConfig. You will paste this code into Webdraw to connect it to your Firebase project.
Firebase Config

Firebase Config

​
Connecting Webdraw to your Firebase project

  1. Inside your Webdraw project, open the prompt library and search for the Firebase prompt.
Firebase Prompt

Search Firebase Prompt

  1. Click on the Firebase prompt to add it to your canvas, select it and then click on the Edit button.
Edit Firebase Prompt

Edit Firebase Prompt

  1. At the bottom of the prompt, replace <EDIT HERE AND PASTE YOUR FIREBASE CONFIG> with the code you copied from Firebase.
Firebase Prompt
After you have pasted the code, click on the Update button to save the prompt.
Update Prompt
Congratulations! You now can use this Firebase prompt to create any Firebase-related functionality in your app. You can follow these examples to get started: