Keycloak vs. React

Auth.js

import Keycloak from 'keycloak-js';

class Auth {
  constructor() {
    this.authenticated = false;
    this.keycloak = Keycloak('/keycloak.json');
  }

  login(callback) {
    this.keycloak
      .init({ onLoad: 'login-required' })
      .success((authenticated) => {
        this.authenticated = authenticated;
        callback(this.authenticated);
      });
  }

  logout() {
    this.authenticated = false;
    this.keycloak.logout();
  }

  isAuthenticated() {
    return this.authenticated;
  }

  getToken() {
    return this.keycloak.token;
  }

  refreshToken(minValidity = 5) {
    return new Promise((resolve, reject) => {
      this.keycloak.updateToken(minValidity)
        .success(() => resolve())
        .error(error => reject(error));
    });
  }

  userInfo(callback) {
    this.keycloak.loadUserInfo().success((userInfo) => {
      callback(userInfo.name, userInfo.email, userInfo.sub);
    });
  }
}

export default new Auth();

AxiosInstance.js

import axios from 'axios';

class AxiosInstance {
  create({ headers }) {
    this.instance = axios.create({
      baseURL: '',
      headers: {
        ...headers,
        Accept: 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
      },
    });

    return this.instance;
  }

  get() {
    return this.instance;
  }
}

export default new AxiosInstance();

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './app/components/App';
import Auth from './app/service/Auth';
import AxiosInstance from './app/service/AxiosInstance';

Auth.login((authenticated) => {
  if (authenticated) {
    AxiosInstance.create({
      headers: {
        Authorization: `Bearer ${Auth.getToken()}`,
      },
    }).interceptors.request.use((config) => {
      return Auth.refreshToken()
        .then(() => {
          config.headers.Authorization = `Bearer ${Auth.getToken()}`;
          return Promise.resolve(config);
        })
        .catch(() => {
          Auth.login();
        });
    });

    ReactDOM.render(
      <App />,
      document.getElementById('root'),
    );
  }
});