Setting Up Firebase

Let’s start building our project and initially, we have to set up our Firebase.

Step 1: Create a new project: Go to the Firebase website and then log in with your Google account. After successful login, click on “Create a project”.

Step 2: Name Your Project: On this page, you have to name your project it may be anything, your project your choice. After naming your project, click on continue and it will ask for Google Analytics you may turn it on if you want. Just choose your preferred setting and your project will be created successfully.

Step 3: Setting up Web Application: After reaching the main dashboard of Firebase, we have to create a web application so that, our application can authenticate users using their Gmail account.

For that, click on “web” on the dashboard, for adding firebase to our web application.

Step 4: Add Firebase to the Web App: Now, on this page, you have to give a name to your app and then we can use Firebase in our Web Application. After entering a name, click on “Register app“.

After successfully registering our app, it will show SDK to use Firebase in our web application. The page will look like this and remember to use your credentials.

Step 5: Choosing Authentication Type: Now we have to choose the authentication type so that our users can register themselves and authenticate. Here we are going to use “Email/password” because it will allow the user to enter their email and password. You can try other methods too but in this tutorial, we are going to use “email/password” authentication. Follow the below steps:-

• 1. Click on “Authentication“
• 2. Click on “Get Started“
• 3. Click on the “Email/Password” option from the options menu.
• 4. Click on “Enable” and then click on “Save“
• 5. Now to reaccess your SDK, Click on “project settings” -> “General” And scroll down you will see your all SDK information.
• Now we have set up our Firebase, it’s time to create our web application using NextJS. We will use our SDK information in our web application to connect Firebase. So remember this crucial point.

In this article, we are going to learn how we can use Firebase with Next JS to implement user authentication. So, that user can log in using their credentials or Google account. For this project, sound knowledge of Next JS and FIrebase is required. If you are new then, don’t worry every step in this tutorial will be user-friendly. Get ready with your preferred IDE and log in to Firebase as it is free and advantageous for this project.

Output Preview: Let us have a look at how the final output will look like.