docs

Setup Firebase & Firebase Admin

Setup Firebase

Create new firebase project

Go to https://console.firebase.google.com/ and click "create a project"

Input project name

You can type your desired project name

Enable Google Analytics Integration

Select Google Analytics Account

Your project should be ready

Select to install on the web app

Input your app name

Get the generated code

We only need the value, since the installation code was already in place. You need to copy to your .env.local, see example:

# Get this env from firebaseConfig
NEXT_PUBLIC_FIREBASE_API_KEY="Copy from firebaseConfig.apiKey"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Copy from firebaseConfig.authDomain"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Copy from firebaseConfig.projectId"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Copy from firebaseConfig.storageBucket"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Copy from firebaseConfig.messagingSenderId"
NEXT_PUBLIC_FIREBASE_APP_ID="Copy from firebaseConfig.appId"
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="Copy from firebaseConfig.measurementId"

Enable authentication

Click the sidebar

Enable Google sign-in method

Auto create oAuth client IDs

The public-facing name should be auto-filled. You need to input the support email. Then click save.

Firebase will automatically create an oAuth 2.0 Client IDs for you.

Setup Firebase Admin

Go to project settings

Go to project settings by clicking the Cog Icon in the Project Overview's right side.

Generate new private key

Go to tab "Service accounts", then click "Generate new private key"

You will get the json file. Please put in the root of your project, then rename the file into TanyaAja-firebase-adminsdk.json

Put in .env.local

Since the format is json, we can not directly copy-paste the content to the .env.local.

Go to https://www.textfixer.com/tools/remove-line-breaks.php, then copy the json value and click "Remove Line Breaks"

Then you can copy the value from the website into the .env.local, see example:

# https://dev.to/vvo/how-to-add-firebase-service-account-json-files-to-vercel-ph5
# Make sure to add single quote here
FIREBASE_SERVICE_ACCOUNT_KEY='{"type":"service_account","project_id":"XXX", "private_key_id":"XXX","private_key":"-----BEGIN PRIVATE KEY-----\nXXX\n-----END PRIVATE KEY-----\n","client_email": "XXX","client_id": "XXX","auth_uri":"XXX","token_uri": "XXX","auth_provider_x509_cert_url":"XXX","client_x509_cert_url":"XXX","universe_domain": "XXX"}'

Enable Realtime Database

Click the sidebar "Realtime Database" in your Firebase Console.

Then click "Create Database"

Select your Database location, then click "Next".

Select "Start in test mode"

Copy the reference URL

Copy the reference link to .env.local. make sure to remove the trailing slash (/) at the end of string, see example:

REALTIME_DATABASE_URL="Reference link from Realtime Database in Firebase"

Update the Rule

Update the rule, copy the value from file .firebase/rule.json in our repository.

Then publish it.

Optional -- add Service Usage Consumer to the IAM

This step require if still facing error permission when running TanyaAja in your local.

Visit the GCP Cloud Console: console.cloud.google.com

Select your project, and go to tab IAM.

Select one of the item in the table that already have role: "Firebase Realtime Database Admin".

Click "Edit Icon" or "Edit Principal".

Then click "ADD ANOTHER ROLE".

And find "Service Usage Consumer".

Then Save it.

😍 Happy Coding!