> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webdraw.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Firebase Integration

> Learn how to connect Firebase to your Webdraw App

<Note>
  The Firebase integration is in an early stage, and we're working on improving it.
  Any feedback is welcome!
</Note>

## 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](https://firebase.google.com).

## 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](https://console.firebase.google.com) and login with your Google account.

You should now see a page like this:

<Frame caption="Firebase Console">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/welcome-screen.png" alt="Firebase Console" />
</Frame>

2. Click on the button to create a new project, and give your project a name.

<Info>
  Firebase analytics is not required, so you can leave it disabled.
  (If you want to use it, you can enable it later)
</Info>

A new project will be created, and you will be redirected to the project dashboard.

<Frame caption="Firebase Project Dashboard">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/new-project.png" alt="Firebase Project Dashboard" />
</Frame>

### Getting your Firebase config

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

<Frame caption="Firebase Project Settings">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/settings-2.png" alt="Firebase Project Settings" />
</Frame>

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

<Info>
  The `Firebase hosting` option is not needed, since Webdraw already hosts your app
  automatically.
</Info>

<Frame caption="Add Web App">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/add-to-web.png" alt="Add Web App" />
</Frame>

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

<Frame caption="Firebase Config">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/copy-sdk.png" alt="Firebase Config" />
</Frame>

### Connecting Webdraw to your Firebase project

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

<Frame caption="Search Firebase Prompt">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/search-firebase-prompt.png" alt="Firebase Prompt" />
</Frame>

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

<Frame caption="Edit Firebase Prompt">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/edit-prompt.png" alt="Edit Firebase Prompt" />
</Frame>

3. At the bottom of the prompt, replace `<EDIT HERE AND PASTE YOUR FIREBASE CONFIG>`
   with the code you copied from Firebase.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/metadata-edit.png" alt="Firebase Prompt" />
</Frame>

After you have pasted the code, click on the `Update` button to save the prompt.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/webdraw/images/firebase/save-prompt.png" alt="Update Prompt" />
</Frame>

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

* [Login with Google](/examples/firebase-login-with-google)