Firebase

Firebase

image
👋
Follow this guide to get Firebase setup in your Divjoy codebase. If you've chosen Firebase Auth or Cloud Firestore (or both) then this guide is for you.
👀
Click the ▶︎ icon next to any step to see a detailed walkthrough with screenshots.

Basic Setup

Follow these steps if you're using Firebase Auth or Cloud Firestore

‣
Signup for an account at firebase.com or login to your existing account.
‣
Create a new Firebase project
‣
Go to project settings and setup a web app. Firebase allows you to have multiple app types (iOS, Android, web), but we'll just be creating one for the web right now.
‣
Copy your Project ID, API Key, and Auth Domain into your codebase .env file.
‣
Go to the "Service accounts" section of your project settings and generate a new private key.
‣
Open the service accounts file you just downloaded and copy the entire private_key and client_email values into your codebase .env file. This is necessary for any server logic that needs to talk to Firebase.
image

Firebase Auth

Follow these steps if you're using Firebase Auth (skip if using a different auth provider)

‣
Go to the Authentication "Sign-in method" section
‣
Enable the Email/Password provider
‣
[optional] Enable social auth providers. This will involve creating apps with each provider and adding your credentials. You can also come back to this step later, as it's not required to get your web app up and running.
‣
Tell Firebase to use your own UI for email-based actions (password reset, email verification, etc) by going to "Templates" and changing the "Action URL" to http://localhost:3000/firebase-action. This page is automatically inserted by Divjoy when you export your codebase.
  • Important: If you're using Cloud Firestore then authentication will not work until that is setup. The auth logic we give you in src/util/auth.js automatically merges extra user data from Cloud Firestore and will fail if it's unreachable. Continue on to the next section to setup Cloud Firestore.

Cloud Firestore

Follow these steps if you're using Cloud Firestore (skip if using a different database provider).

‣
Go to the Cloud Firestore section and create a new database.
‣
Go to the "Rules" section of your new database and add the contents of your codebase firestore.rules file. This ensures that your users cannot read or edit data that they shouldn't have access to.
‣
If using a non-Firebase Auth provider (such as Auth0) you'll still need to ensure Firebase Auth is enabled so that your Firestore rules can read authentication status. Just click the "Authentication" tab and then the "Get started" button to enable Firebase Auth.
‣
Go to the "Indexes" section of your new database and add an index to the items collection on the fields owner (ascending) and createdAt (descending). This is required so that your useItemsByOwner function can properly fetch a user's items and sort by date created. You'll see an example UI that utilizes this database logic in the dashboard page of your codebase.
👏
Congrats! Firebase is all setup in your codebase. If you're already running your dev command you'll want to make sure to stop it (Ctrl + C) and re-run it so that it reads your updated .env file.

FAQ

‣
Why does it show a loading indicator forever after signing up?
‣
Why am I seeing errors when I try to run my app?
‣
How can I disable sending verification emails when someone signs up?
‣
Why don't I see all the social auth providers when viewing my app?