Sitecore JSS + Google Firebase

In this blog I will show you how to integrate Sitecore JSS and Google Firebase to handle authentication of your React application

So why did I do this?

I wanted to figure out an easy and fast way to bring in my react application into the Sitecore, and create a Registration functionality, and be able to log in to the app by utilizing a Firebase Authentication.

Sitecore CMS is a very powerful tools, and you can easily build anything you can think of around this platform.

So I decided to utilize the Sitecore JSS SDK which allows you to build SPA with ReactJS

Step 1 was to create Sitecore JSS application in Disconnected Mode

Step 2 was to create an application in the Firebase

Step 3 was to add Configuration of the Firebase to my Sitecore JSS application

Step 4 was to secure my Component with the Firebase Authentication

Step 5 was to check fo returned visitors, and see if they are already logged in and show them protected component.

Let me jump right into the Firebase Configuration:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

const fire = firebase.initializeApp(config);
export default fire;

Next we will need to import that into our component:

import React, { Component } from 'react'
import fire from 'fire'

Next we will add our constructor:

export class LoginComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {},

Next we will make sure that we are checking for user state and rendering the proper content:

render() {
        return (
            <div>
                {this.state.user ? (<SecuredComponent />) : (<LoginComponent/>)}
            </div>
        )
    }

But in order for that to work we need to make sure we add validation:

authListener() {
        fire.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({ user });
            } else {
                this.setState({ user: null });
            }
        });
    }

Next we need to make sure that we add a hook method, after the component mounts on the dom.

More info about componentDidMount()

componentDidMount() {
        this.authListener();
    }

So now every time we load the page, it will check the user state and depending on the state we will be routed to the appropriate component.

In part two we will be creating a Sign Up/Login Component that will handle the communication between Firebase and our application.

We will also create a Log out Functionality

Here is the Sneak preview of how this works in Experience Editor: