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.
  1. Click the "Get Started" button
    2. image

‣
Create a new Firebase project
  1. Click the "Create a project" button
    2. image
  2. Give your project a name and click "Continue"
    3. image
  3. Toggle Google Analytics off for this project. If you'd like to use Google Analytics, we'll be setting this up separately so that we can configure it correctly for your Divjoy codebase.
    4. image
  4. Click "Continue" after Firebase is done setting up your new project.
    5. image

‣
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.
  1. Click the gear icon and then "Project settings"
    2. image
  2. At the bottom of the screen click the "</>" icon to create a web app
    3. image
  3. Name your web app. If your Firebase project was called "Lyft", you might name it "Lyft Web". Don't check the Firebase Hosting checkbox. Finally, click the "Register app" button.
    4. image
  4. Click "Continue to console". You don't need to copy and paste these scripts into your code. We'll have you add the required values as environment variables in the next step.
    5. image

‣
Copy your Project ID, API Key, and Auth Domain into your codebase .env file.
  1. Go to project settings. Scroll down to the "Your Apps" section and copy the values for projectId, apiKey, and authDomain into your codebase .env file.
    2. image

    Your .env file should now look like this:

    image

    You also need to add these values to the bottom section of your .env. This section determines what values are included in your client-side JS. By specifying them separately we ensures that any values we don't want to expose (such as private keys) are kept server-side only.

    image

‣
Go to the "Service accounts" section of your project settings and generate a new private key.
  1. Click the "Service accounts" tab under the big "Project settings" header and then click the "Generate new private key" button at the bottom.
    2. image
  2. Click the "Generate key" button
    3. image

‣
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.
  1. The file should look something like this. You need to copy the entire value between the quotes, including the ----BEGIN PRIVATE KEY-----\n and \n-----END PRIVATE KEY-----\n portions.
    2. image

    Your .env file should now look like this:

    image
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
  1. Click "Build" then "Authentication in the left-hand column
    2. image
  2. If you see this introductory screen you'll need to click "Get started"
    3. image
  3. Go to the "Sign-in method" tab
    4. image

‣
Enable the Email/Password provider
  1. Click "Email/Password", toggle the "Enable" switch, and click "Save".
    2. image

‣
[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.
  • For example, to get Twitter auth working you'll need to go to https://developer.twitter.com, create an app, then fill in the API Key and API secret.
    • image

‣
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.
  1. Go to the "Templates" tab and then click the edit button (pencil icon) on the right side.
    2. image
  2. Click the small "Customize action URL" link at the bottom.
    3. image
  3. Add a URL that points to the /firebase-action page in your codebase and then click "Save". For testing this locally you'll want to use your localhost URL. You can change this later to your production URL or have a separate Firebase app for production.
    4. image

  • 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.
  1. Click the "Cloud Firestore" link on the left and then click "Create database".
    2. image
  2. Select "Start in test mode" and then click the "Next" button. We'll give you the rules to secure your database in a following step.
    3. image
  3. Pick the Cloud Firestore location closest to your servers and then click "Enable". If not sure, then just go with the default.
    4. image

‣
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.
  1. It should look like this after pasting in the contents of your firestore.rules file. Click the "Publish" button to push these new rules live.
    2. image

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

Just click "Get started" and then you're done with this step

image
‣
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.
  1. Click the "+ Create index" link
    2. image
  2. Fill in the form as you see below and then click the "Create index" button. Remember that the createdAt field should be Descending.
    3. image
  3. After creating the index you'll notice it says it has a status of "Building". You're safe to close this page and continue setting up your app. It should switch to "Enabled" in a few minutes.
    4. image

đź‘Ź
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?

If you're using Cloud Firestore as your database provider then 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 (causing it to be stuck in a loading state). You can check as to whether this is the issue by temporarily setting const MERGE_DB_USER = false in src/util/auth.js. To resolve this issue you'll want to follow the Cloud Firestore instructions above. After the setup, make sure you delete any account from Firebase Authentication that you've created while encountering this bug.

‣
Why am I seeing errors when I try to run my app?

Make sure that all environment variables for all the services in your .env file have values filled in. Also make sure the variables at the bottom (starting with REACT_ or NEXT_) have values filled in. Ensure the values are correctly formatted by comparing them to what you see in this screenshot (for example the `authDomain` value shouldn’t start with "https://").

‣
How can I disable sending verification emails when someone signs up?

You can disable this by going to src/util/auth.js and setting const EMAIL_VERIFICATION to false.

image

‣
Why don't I see all the social auth providers when viewing my app?

Assuming you are using the authentication components from the Divjoy library, you just need to go to src/pages/auth.js and update the providers array on the AuthSection component. For example, here's what it would look like if you want to display options for Google, Facebook, and Twitter.

image

Our authentication component supports the following by default: google, facebook, twitter, and github. You can add more options by configuring them in Firebase and then following this guide to display them in your component: Adding new login providers to Firebase.