Skip to main content

Firebase Setup for Frontend

Let's setup Firebase for our frontend, later we will setup it for our backend also.

  • Go to Firebase https://firebase.google.com/
  • Click Go to Console
  • Click create a project
  • Then write your project name and press Continue button.

Firebase Project Name

  • AI assistance for your Firebase project is not necessary. Yet, if you want you can enable Gemini in Firebase option. Then press Continue.
  • We will use Google Analytics separately, so you can disable it, and press Continue.
  • Wait few moments and it will create your firebase project, then press Continue, it will take you to the firebase console dashboard.
  • Press the Web button.

Firebase Dashboard

  • It will open a popup, then write a nickname and click Register App.

Firebase Register App

  • Then it will provide your web app's Firebase configuration. Copy the firebaseConfig and save it in a secure place. Then press Continue to console.

Firebase Configs

  • Open your frontend code in VS Code and open .env.local file, and write the firebaseConfig values there and save it.

Firebase Configs Save on Environment File

  • Then go to All Products then select Authentication then click Get Started

Firebase Select Auth Options

  • From sign in providers, click on Email/Password and enable Email/Password. Email link is not necessary. Then press Save.
  • Now click add new provider button, then click on Google and enable it. Then if you want you can change Public-facing name. Then press Save.

Firebase Auth Select Providers

  • Then go to settings tab click on Authorised domains, don't forget to add your domain name here.

Firebase Authorized Domains

  • That's it our frontend is ready with Firebase.