@nevzatcirak/react-oidc-client
TypeScript icon, indicating that this package has built-in type declarations

2.2.6-rc1 • Public • Published

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

Package Sidebar

Install

npm i @nevzatcirak/react-oidc-client

Weekly Downloads

1

Version

2.2.6-rc1

License

GPL-2.0

Unpacked Size

1.83 MB

Total Files

12

Last publish

Collaborators

  • nevzatcirak