Firebase Integration

Setting up Firebase Authentication in Databutton

Databutton offers Firebase Authentication as an installable extension to your app.

The following guide explains how to configure your firebase project.

Enabling Firebase Extension

1. To integrate Firebase, click the "Add Firebase" button in the menu bar.

1. A modal will appear to guide you through the process. Make sure to complete the steps. ( "Setting up Firebase Authentication" section covers each steps in details )

Setting up Firebase Authentication over your Firebase Project

1. Getting started with the Firebase Console ( You can easily Log in with your Google account )

You can easily Log in over Firebase with your Google account.

Note - The nickname given for the app is just an internal identifier used within Firebase, and it doesn't affect your app's functions.

1. Firebase configuration Setup - After registering the app, Firebase will display a snippet of code.

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

1. Copy this config as you'll need it when you install the extension in your app. You can also find it under Project Overview in Firebase later.

2. Once the project is set up, navigate to the “Authentication” section in the Firebase console side menu.

3. Configuring Sign-In Methods - In the Authentication panel, go to the “Sign-in method” tab. Configure sign-in providers — Google.

4. Add authorized domains in Firebase so allow sign-ins from your app.

Detailed Steps

To ensure application securely manages where login attempts can originate from, follow these steps to add authorized domains to your Firebase project:

1. Click on “Authentication” in the side menu.

2. Select the “Settings” tab.

3. Scroll down to the “Authorized domains” section.

4. Click on the “Add domain” button.

5. Enter databutton.com and confirm by clicking "Add"

6. If your app is deployed with a custom domain, you must also authorize this domain to handle user logins.

7. For example, if your app URL is https://avra.databutton.app/demo-authentication, add avra.databutton.app as an authorized domain.

8. Repeat the process: Click “Add domain”, enter your custom domain like YOUR_USER_NAME.databutton.app, and then confirm by clicking "Add".

---

Watch the video below to learn more.