Node.js Express Firebase Admin SDK Server Side Authentication in Javascript Full Project

Posted on December 16, 2022

 

 

Welcome folks today in this blog post we will be building a firebase admin sdk server side authentication project in node.js and express using javascript. All the full source code of the application will be given below.

 

 

Get Started

 

 

In order to get started you need to create a new node.js project by executing the below commands as shown below

 

 

npm init -y

 

 

This will create the package.json file for the node.js project.Now we need to install the packages using the npm command as shown below

 

 

npm i express

 

 

npm i cookie-parser

 

 

npm i firebase-admin

 

 

npm i csurf

 

 

npm i ejs

 

 

After installing all these libraries now you want to see first of all the directory structure of the full app listed below

 

 

 

 

 

And now first of all we need to create the web app inside the firebase console and enable the email and password auth method and also get the serviceAccount key json file and store it inside our project directory.

 

 

 

 

 

 

 

 

 

 

 

 

 

Now basically this code will be different for your own firebase project. Copy this config object we will include it later inside our html files.

 

Now we need to enable the email and password auth method in the firebase console as shown below

 

 

 

 

 

 

Now after this we need to go to service accounts section and generate our service account key as shown below

 

 

 

 

 

 

And now we need to create the index.js file for our node.js project. And copy paste the below code into it

 

 

index.js

 

 

 

 

As you can see in the above code we are importing all the libraries and then we are including the middlewares to the express app including making the static directory and also passing the bodyparser middlewares. And also setting cookieParser and csrf middlewares. And we are also setting the view engine of ejs as html. And then we are setting the cookie for xsrf-token to prevent cross site scripting attacks to the login system.

 

And now we need to copy paste the routes for the express app. These routes are as shown below

 

 

 

 

These are the get routes to serve static html files which are present inside the views directory. We are loading the index.html when we open the home page of the app. When we go to /login we load the login and for signup we load the /signup.html.

 

First of all guys we just need to create the static directory and inside it just create a mvp.css file which will hold all the stylesheet code of the application

 

static/mvp.css

 

 

 

 

Now we need to create the index.html file for the index route

 

 

views/index.html

 

 

 

 

As you can see it contains a simple heading of home page and a simple button to go to the profile page.

 

 

Now we need to make the login.html file and copy paste the following code

 

 

views/login.html

 

 

 

 

As you can see we are including some firebase cdn which is required at the client side. And also it contains a simple user form where the user will login with username and password

 

 

 

 

And similarly we need to create the signup.html file and copy paste the below code

 

 

views/signup.html

 

 

 

 

Again it contains a simple user html5 signup form where user can register by entering the username and the password

 

 

 

Registering Users

 

 

Now guys we will be letting the users signup inside our firebase project. For that just go to signup.html and write some custom javascript code as shown below

 

 

signup.html

 

 

 

 

As you can see in the above javascript code we are first of all copy pasting the firebase config object that you received early on. Replace your own firebase config object after that we are initializing the firebase app by passing that config object. And now when the form is submitted by the user by entering the username and password we are getting both these details using the form Submit event handler. And after that we are using the firebase method createUser with email and password to create a new user inside our system. This returns the tokenId value of the user and here we are making a simple fetch call passing this info to create a new session and letting users go to the profile page directly from the signup page.

 

Now we need to make the sessionLogin post request in the index.js file as shown below

 

 

index.js

 

 

 

 

As you can see we are getting the id token and converting it to string and then we are setting the expiry time for the token in seconds. And then with the help of firebase admin sdk we are creating the user session cookie by passing the token and expiry time and then it returns the session cookie in the promise. And inside it we are just setting the cookie variable of session and passing the value of the sessionCookie. And lastly we are sending success message back to the client side. And if any error takes place we are sending the message of unauthorized request.

 

Now we also need to write the /profile route where the users will be redirected to

 

index.js

 

 

 

 

As you can see inside this request we are checking the sessionCookie variable if it’s set then we are extracting the value of it or initializing to empty string. And after that we are calling the firebase admin auth() method and passing that sessionCookie value. If it’s a valid cookie then we redirect user t the profile.html page otherwise we redirect them to the login page.

 

Now we need to write the profile.html file as shown below

 

 

views/profile.html

 

 

 

 

As you can see the above page is a protected route or page. And it also contains logout button as well.

 

Now if you go to the browser now if you see if you enter username and password in the signup page a new user will be created in the firebase console and we will be redirected to the profile page as shown below

 

 

 

 

And now guys we need to write the logout route whenever the user presses the logout button he or she must be redirected back to the home page and also the userCookie should be deleted as shown below

 

 

index.js

 

 

 

 

As you can see we are clearing or deleting the cookie using the clearCookie() method and then we are redirecting the user to the /login route.

 

 

Logging in Users

 

 

Now guys we need to write some custom javascript code inside the login.html to allow existing users in the app to successfully login in as shown below

 

 

login.html

 

 

 

 

As you can see all the code is the same as we did inside the signup.html but here we are using the firebase admin SignIn() method where we take the email and the password which is submitted by the user. If the information is correct when he or she is redirected to the profile page or it’s incorrect then he or she stays on the login page.