Header.tsx

import * as React from 'react';
import { Menu, Icon, Dropdown, Button } from 'antd';
import { UserManager, User } from 'oidc-client';
import { useNexusContext } from '@bbp/react-nexus';
import { Realm } from '@bbp/nexus-sdk';
import { SETTINGS } from '../config';
import { getConfig } from '../utils/auth';
import HeaderComponent from '../components/Header';

const Login: React.FunctionComponent<{
  realms: Realm[];
  onRealmSelected(realm: Realm): void;
}> = ({ realms, onRealmSelected }) => {
  const [selectedRealm, setSelectedRealm] = React.useState<Realm>(realms[0]);

  React.useEffect(() => {
    if (!selectedRealm) {
      setSelectedRealm(realms[0]);
    }
  }, [realms, setSelectedRealm, selectedRealm]);

  const menu = (
    <Menu>
      {realms.map(realm => (
        <Menu.Item key={realm['@id']} onClick={() => setSelectedRealm(realm)}>
          {realm._label}
        </Menu.Item>
      ))}
    </Menu>
  );
  return selectedRealm ? (
    <Dropdown.Button
      overlay={menu}
      onClick={() => onRealmSelected(selectedRealm)}
      icon={<Icon type="down" />}
    >
      Login with {selectedRealm._label} <Icon type="login" />
    </Dropdown.Button>
  ) : null;
};
const Logout: React.FunctionComponent<{
  userName: string;
  onLogout(): void;
}> = ({ userName, onLogout }) => {
  return (
    <Button icon="logout" onClick={onLogout}>
      {userName}: Logout
    </Button>
  );
};

const Header: React.FunctionComponent<{
  userManager: UserManager | null;
  user: User | null;
}> = ({ userManager, user }) => {
  const nexus = useNexusContext();

  // fetch list of available realms when application mounts
  const [realms, setRealms] = React.useState<Realm[]>([]);
  React.useEffect(() => {
    nexus.Realm.list()
      .then(realms => {
        // nexus uses a realm called `serviceaccount` internally, we need to filter it out
        setRealms(
          realms._results.filter(
            realm => realm._label !== SETTINGS.serviceAccountName,
          ),
        );
      })
      .catch(e => console.error(e));
  }, [nexus]);

  const handleLogin = (realm: Realm) => {
    if (!userManager) {
      return;
    }
    const nextUserManagerConfig = getConfig(realm);
    const nextUserManager = new UserManager(nextUserManagerConfig);
    nextUserManager
      .signinRedirect()
      .then(() => {
        userManager.revokeAccessToken();
        userManager.clearStaleState();
        localStorage.setItem(
          SETTINGS.preferredRealmKey,
          JSON.stringify({ _issuer: nextUserManagerConfig.authority }),
        );
      })
      .catch(e => console.log(e.message));
  };

  const handleLogout = () => {
    if (!userManager) {
      return;
    }
    userManager
      .signoutRedirect()
      .then(() => {
        userManager.revokeAccessToken();
        userManager.clearStaleState();
        localStorage.removeItem(SETTINGS.preferredRealmKey);
      })
      .catch(e => console.log(e.message));
  };

  return HeaderComponent({
    handleLogout,
    handleLogin,
    Logout,
    Login,
    realms,
    userName: user && user.profile.name,
  });
};

export default Header;