@nevzatcirak/react-oidc-client v1.0.7

@nevzatcirak/react-oidc-client

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

oidc-client 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

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

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

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

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} />
    </>
  );
}