@nevzatcirak/react-oidc-client

@nevzatcirak/react-oidc-client package is a convenience wrapper around the oidc-client-ts library to make it available in React by using hooks and context api.

oidc-client-ts is a JavaScript library intended to run in browsers. It provides protocol support for OIDC and OAuth2, as well as management functions for user sessions and access tokens management.

Usage

There are 3 components and 1 hook that you can use. They are ComposedAuthProvider , AuthenticationProvider , SecureApp and useAuthentication .

Note: You can find detailed example project in this repository.

SecureApp

SecureApp component will manage authenticating and the access token expired situation. Also, this component will redirect app to login screen, when no user found.

Hint: This component must be used inside the BrowserRouter and AuthenticationProvider .

Props

|Mandatory | Name | Description | |:------------: | ------------- | :-------------------------------------: | | ✔ | children | Child components of the component | | ✔ | history | Navigation object is from react-router |

AuthenticationProvider

AuthenticationProvider components manages passing oidc configuration object and custom events functions to oidc-client services. This component is main part of the Openid Connect/OAuth 2.0 Client to connect Authorization Servers.

Props

|Mandatory | Name | Description | |:------------: | ------------- | ------------------------------------- | | ✔ | children | Child components of the component | | ✔ | history | Navigation object is from react-router | | ✔ | configuration | Configuration object of oidc-client. Details are here.| | ❔ | customEvents | Oidc events, such as userSignedOut, accessTokenExpired, are listening inside. Defined methods in customEvents props will be called in related listeners. Hint: Declared methods should be used in useCallback.| | ❔ | authenticating | Component will be shown while trying to authenticate and when SecureApp is used and no user is logged in. | | ❔ | unathenticated | Component will be shown when history route in /authentication-error. | | ❔ | unauthorized | Component will be shown when authorization error is risen up and history route in /authorization-error. | | ❔ | sessionlost | Component will be shown when session is lost and history route in /session-lost. | | ❔ | authenticated | Component will be shown when login process is successfully done. |

These 5 components, which are authenticating, unauthenticated, unauthorized, sessionlost and authenticated, are just for information widgets.

ComposedAuthProvider

In ComposedAuthProvider component, AuthenticationProvider and SecureApp are utilized together to make a magical provider. This provider manages both oidc user existence and passing a configuration object to work properly.

Props

|Mandatory | Name | Description | |:------------: | ------------- | ------------------------------------- | | ✔ | children | Child components of the component | | ✔ | configuration | Configuration object of oidc-client. This property is same with AuthenticationProvider’s configuration property.| | ❔ | isActive | This prop is related with provider activity status. If value is true, provider will be active and openid client will begin to work. | | ❔ | customEvents | Oidc events, such as userSignedOut, accessTokenExpired, are listening inside. Defined methods in customEvents props will be called in related listeners. Hint: Declared methods should be used in useCallback.|

Example

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { BrowserRouter } from "react-router-dom";
import { ComposedAuthProvider, WebStorageStateStore } from '@nevzatcirak/react-oidc-client';

import 'bootstrap/dist/css/bootstrap.min.css';

export const webStorageStateStore = new WebStorageStateStore({ store: window.localStorage });

export const configuration = {
  client_id: "react",
  redirect_uri: "http://localhost:3000/authentication/callback",
  response_type: "code",
  post_logout_redirect_uri: "http://localhost:3000/",
  scope: "openid profile email",
  authority: "http://localhost:8080/auth/realms/master",
  silent_redirect_uri: "http://localhost:3000/authentication/silent_callback",
  userStore: webStorageStateStore,
};

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
      <ComposedAuthProvider
        configuration={configuration}
        isActive={true}
      >
        <App />
      </ComposedAuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

composed-auth-provider.tsx is inside of @nevzatcirak/react-oidc-client package. Below is just an example usage of AuthenticationProvider and SecureApp seperately.

composed-auth-provider.tsx

import {
  AuthenticationProvider,
  SecureApp,
  UserManagerSettings,
  CustomEvents,
} from "./index";
import React, { ReactNode } from "react";
import { useHistory } from "react-router-dom";
import { getBoolValue } from "./utils/common-utils";

export interface ComposedAuthProviderProps {
  children: ReactNode;
  configuration: UserManagerSettings;
  isActive?: Boolean;
  customEvents?: CustomEvents;
}

export const ComposedAuthProvider = (props: ComposedAuthProviderProps) => {
  const history = useHistory();

  const checkProviderActivity = () => {
    if (getBoolValue(props.isActive))
      return (
        <AuthenticationProvider
          configuration={props.configuration}
          history={history}
          customEvents={props.customEvents}
        >
          <SecureApp history={history}>{props.children}</SecureApp>
        </AuthenticationProvider>
      );
    else return <>{props.children}</>;
  };

  return checkProviderActivity();
};

useAuthentication

This hook is created by using AuthenticationContext . AuthenticationContext properties are defined in table below.

Hint: This hook must be used in the AuthenticationProvider .

AuthenticationContext State

|Name | Type | Description | |------------ | -------------------- | ---------------| | isLoading | boolean | Openid User loading status. (Default: false) | | oidcUser | User (details here) | Openid User (Default: undefined)| | error | String | An error message while logging in or out Openid User (Default: undefined) | | authenticating | ReactNode (exp: here)| Authenticating component is using in SecureApp component, when Openid User is expired or logged out. (Default: undefined) | | login | (force: boolean)=>Promise| Login method triggers login action if login is required or force parameter value is false. | | logout | () => Promise | Logout method triggers SSO process.| | renewToken | () => Promise | Sends renew token request Auth server and renews token. |

Example

AppContent.tsx

import * as React from "react";

import AuthContent from "./AuthContent";
import Buttons from "./Buttons";
import { useAuthentication } from "@nevzatcirak/react-oidc-client";

export default function AppContent() {
  const { oidcUser, logout, renewToken } = useAuthentication();

  const getUser = () => {
    return oidcUser;
  };

  return (
    <>
      <Buttons
        logout={logout}
        renewToken={renewToken}
        getUser={getUser}
      />
      <AuthContent user={oidcUser} />
    </>
  );
}