Keycloak SSO

App.jsx

import React from 'react';

function App() {
  return (
    <Keycloak>
      <div>Welcome!</div>
    </Keycloak>
  );
}

export default App;

App_v2.jsx

import React from 'react';
import Keycloak from './Keycloak.js';
import { keycloak } from '../modules/keycloak.js';

function Welcome() {
  return <div>Welcome {keycloak.idTokenParsed.name}!</div>
}

function App() {
  return (
    <Keycloak>
      <Welcome />
    </Keycloak>
  );
}

export default App;

App_v3.jsx

import React from 'react';
import Keycloak from './Keycloak.js';
import { keycloak } from '../modules/keycloak.js';

function Welcome() {
  return (
    <div>
      Welcome {keycloak.idTokenParsed.name}!
      <button onClick={() => keycloak.accountManagement()}>
        Account
      </button>
    </div>
  );
}

function App() {
  return (
    <Keycloak>
      <Welcome />
    </Keycloak>
  );
}

export default App;

docker-compose.yml

---
version: '3.7'
services:
  keycloak:
    image: jboss/keycloak:6.0.1
    environment:
    - KEYCLOAK_USER=admin
    - KEYCLOAK_PASSWORD=password
    - DB_ADDR=postgres
    - DB_PORT=5432
    - DB_DATABASE=keycloak
    - DB_SCHEMA=public
    - DB_USER=admin
    - DB_PASSWORD=password
    - DB_VENDOR=postgres
    depends_on:
    - postgres
    ports:
    - '8080:8080'
    - '8443:8443'
  postgres:
    image: postgres
    environment:
    - POSTGRES_PASSWORD=password
    - POSTGRES_USER=admin
    - POSTGRES_DB=keycloak
    ports:
    - '5432:5432'

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import { init } from './modules/keycloak.js';

// Initialize the Keycloak client
init();
// Render the React application
ReactDOM.render(<App />, document.getElementById('root'));

jwt.json

{
  "jti": "58838d2a-d86c-4a01-a926-9cf0d57fc556",
  "exp": 1563410747,
  "nbf": 0,
  "iat": 1563410447,
  "iss": "http://127.0.0.1:8080/auth/realms/React%20App",
  "aud": "react-app-1",
  "sub": "e4668f11-903c-4c79-953b-2f06bb3ee1f5",
  "typ": "ID",
  "azp": "react-app-1",
  "nonce": "c8c20eeb-458c-4a47-8128-7759ac1e3493",
  "auth_time": 1563410179,
  "session_state": "55a07b16-514c-4faf-97b7-212fa6485674",
  "acr": "0",
  "email_verified": false,
  "name": "Example User",
  "preferred_username": "example",
  "given_name": "Example",
  "family_name": "User",
  "email": "[email protected]"
}

keycloak.js

var keycloak;

function init() {
  // If the Keycloak constructor doesn't exist we'll throw
  // an error.
  if (window.Keycloak === undefined) {
    throw new Error('Can\'t find Keycloak on the global scope');
  }
  // Later on the article we'll see what a `realm` and
  // a `client` means in Keycloak.
  keycloak = new Keycloak({
    url: 'http://127.0.0.1:8080/auth',
    realm: 'React App',
    clientId: 'react-app-1'
  });
}

export { keycloak, init };

Keycloak.jsx

import React, {useState, useEffect} from 'react';
import keycloak from '../modules/keycloak.js';

function Keycloak({children}) {
  // We'll use this variable to halt the app
  // excecution until the user is Authenticated
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  // The `init()` method we'll be in charge of starting
  // the authentication flow.
  useEffect(() => {
    keycloak
      .init({
        // The `onLoad` option can be configured
        // with two possible values:
        // - `login-required`
        // - `check-sso`
        // Both do the same, except the first one
        // redirects the user to the login page if
        // he's not authenticated.
        onLoad: 'login-required'
      })
      .success((authenticated) => {
        // We can continue rendering the app
        // now that the user has been authenticated
        setIsAuthenticated(true);
      })
      .error((err) => {
        // Log an error method if something went
        // wrong.
        console.error(err);
      });
  }, []);
  // We'll render the component `children` only after the
  // user has been authenticated.
  return isAuthenticated === true
    ? children
    : <div>Please wait...</div>
}

export default Keycloak;

Welcome.jsx

function Welcome() {
  return (
    <div>
      Welcome {keycloak.idTokenParsed.name}!
      <button onClick={() => keycloak.accountManagement()}>
        Account
      </button>
      <button onClick={() => keycloak.logout()}>
        Logout
      </button>
    </div>
  );
}