Integrating Firebase Auth into Strapi.

strapi+firebase

Strapi is a lovely cms that just works with whatever use case you throw at it. I was planning to build an e-commerce site as fast, performant & secure as possible. Soon after starting the project I found that there’s a little oopsie with the way I handle authentication in most of my projects.

Call me lazy if you wish but I don’t like to store passwords to project database, even after doing the hashing and whatever. It’ll be better if someone reliable does it for me.

About Firebase Authentication

Here are the reasons why you might want to use it in your next project -

1. Multiple auth providers, without the hassle of managing them all.
2. Phone number authentication.
3. It’s backed by Google, so you can trust it.
4. Client-side login management with SDK’s for Web, Android & IOS.
5. It's almost free.

Problem — You can integrate third party auth providers into strapi but you don’t have 2FA solution yet.

Let’s implement what I mentioned in title of this blog post.

If you haven’t already, create a new strapi project.

Strapi Documentation

— Step 1

Create a file called permissions.js in policies folder as follows — <project root>/extensions/user-permissions/config/policies/permissions.js and paste the code from the link given below

strapi/strapi

This is the code where strapi checks for user authentication and assign the roles based on the permissions assigned from the admin panel.

// permissions.js
const _ = require('lodash');
const axios = require('axios');

module.exports = async (ctx, next) => {
  let role;

  if (ctx.request && ctx.request.header && ctx.request.header.authorization) {
    try {
      const { id, isAdmin = false } = await strapi.plugins[
        'users-permissions'
      ].services.jwt.getToken(ctx);

      ...

    } catch (err) {
      try {

        // get token from firebase and inject into strapi
        return await next();
      } catch (error) {
        return handleErrors(ctx, new Error('Invalid token: Token did not match with Strapi and Auth0'), 'unauthorized');
      }

      return handleErrors(ctx, err, 'unauthorized');
    }

Notice the first try/catch block has the code that checks authorization headers. That code will fail in case of request with firebase auth token. In catch block we can inject our firebase auth token.

— Step 2

In this step we will verify the auth token using firebase-admin sdk.

• Install firebase-admin sdk using npm or yarn. yarn add firebase-admin
• Edit bootstrap.js as follows

Path : <project-root>/config/functions/bootstrap.js

Yay! Now we have firebase object available globally as strapi.firebase. The reason I initialized firebase in bootstrap.js is because it gets called only once when Strapi is booted up.

— Step 3

Head back to the permissions.js file and finish the implementation with code from following file.

lambrohan/strapi-firebase-auth

Here is how it looks like after finishing up-

permissions.js after firebase auth implementation

How can I protect api routes using firebase user?

You can access user object sent by firebase as ctx.state.user in all the api controllers. You can also apply owner’s policy using this approach and prevent access.

Contact me or leave a message on Strapi’s slack channel if you want to learn more.

Join Strapi on Slack!

Here is the repo for above tutorial -

lambrohan/strapi-firebase-auth

Read what to do next & about creating owner’s policy

I hope you find this article useful. Please consider buying me a cup of coffee!