Loopback 4 JWT Authentication with Firebase

The title says it all. The team decided to use Loopback 4 for the APIs as it is easy to get something working really quick. The challenge came when we wanted to integrate the authentication mechanism with our front end which was on VueJs. Firebase was our authentication server since we only needed Social logins and nothing more. Firebase takes a lot of the pain out of getting an web app with authentication up, well done Firebase team!

Back to the matter at hand. Loopback 4 documentation had sections on using JWT as well as custom authentication strategies. However, it was unclear and we were really stuck for many days on how to get it working. I would like to detail out the steps we took to get it working, much as a reference to my future self and hoping to help those in similar situations.

Let’s scaffold a Loopback 4 application. I use Ubuntu in WSL 2 as my primary development environment. I also use yarn when the scaffold asks.

Answer the questions and wait for the scaffold to finish. You then need to add the firebase-admin, @loopback/authentication and @loopback/authentication-jwt package to your Loopback application.

Follow the instructions at Add the Firebase Admin SDK to your server (google.com) to finish setting up the admin SDK. You will need to save the JSON file with your private key to your local machine and add it to the Loopback app. I usually save it into a folder under the app root called ./keys/ and I add this folder to my .gitignore file so as to avoid checking in the secret file.

keys folder in root and .gitignore configuration

The next step is IMPORTANT to ensure you get your Firebase SDK setup properly. You need to have an environment variable called GOOGLE_APPLICATION_CREDENTIALS defined. The value is the path to the JSON file you downloaded from Firebase earlier. You have to ensure this environment variable is present every time before you run you Loopback app. In Linux you would do (replace the path and file name based on the file you downloaded earlier):

Next step is to initialize Firebase. Open application.ts, import the firebase-admin and loopback-authentication* packages in the constructor . Next add the Firebase initialization steps. You will need your Firebase project Id and you can get that from the project settings in the Firebase console.

We then add the JWT component as shown in the Loopback documentation here: How to secure your LoopBack 4 application with JWT authentication.

The code above will add the Authentication and JWT component to your Loopback application. That’s it. How cool is that! The last step before actually handling the Firebase code is to tell Loopback where to go for authentication. We do that by binding the TOKEN_SERVICE to our class that will handle decoding the Firebase token.

At this point you will get an error as we have not defined the class yet. Let’s do that next. Open the terminal in your application folder.

Import this file in application.ts

Let’s setup the FirebaseTokenService. We have to implement the TokenService interface. Since we won’t be generating any tokens we throw an error when anyone tries to use that function

The next few steps are straight forward and you can get the details by reading through the Firebase documentation. Let’s decode the token and return the UserProfile expected by Loopback. First add the firebase-admin library to your FirebaseTokenService.

Next implement the function to decode the token and return the UserProfile. Both of these functions should be defined in your FirebaseTokenService class.

With that, you now have a fully functioning integration between your Loopback application and Firebase authentication. You can view the full code at my GitHub (https://github.com/alfonsojohan/loopback4-firebase).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store