Prowise React Auth

This package wraps the open-source oidc-client-js library and provides a context, helpers and base set of config to enable authorizations for front-end React applications.

Installation

Simple add with yarn/npm:

• NPM: npm install @prowise/react-auth
• Yarn: yarn add @prowise/react-auth

You will need react@^16.9.0 as a dependency in your own project and you will want to install deep-diff@^1.0.2 if you're not yet using it.

Implementation

All the public interfaces are re-exported from index.ts, all other files and functions are considered private.

Bootstrapping Config

During bootstrapping, create an auth manager object. The returned object is the UserManager from oidc-client-js. When using SSR you can do this in componentDidMount or equivalent.

The settings object allows you to override config passed to the UserManager and allows you to set a home_path and error_path which will be arguments passed to the redirector component in certain scenarios.

import { createAuthManager } from "@prowise/react-auth";

// ...
createAuthManager(config.authority, config.clientId, settings);
// ...

See also the example implementation for this.

Setup Context Provider

Wrap your application/routes with the context provider setup / managed by the package. The signinSilent={true} is optional and will immediately try to assess login status on the background.

import React, { FC } from "react";

import { AuthProvider } from "@prowise/react-auth";

import MyAppRoutes from "routes";

const MyApp: FC = () => (
    <AuthProvider signinSilent={true}>
        <MyAppRoutes />
    </AuthProvider>
);

export default MyApp;

See also the example implementation for this.

Setup Callback Route

Implement the callback component on the callback URL, by default on the path /auth/callback but this can be overridden with redirect_uri in settings.

The redirector will get passed the path the user was on when the interactive login was triggered. The loader is rendered while the process is still being completed. Both parameters are required in this case.

The callback should be an unprotected route.

import React, { FC } from "react";

import { Redirect } from "react-router-dom";
import { AuthCallback } from "@prowise/react-auth";

const MyCallback: FC = () => (
    <AuthCallback
        redirector={({ to }) => (<Redirect to={to} />)}
        loader={() => <>Checking session status...</>}
    />
);

export default MyCallback;

See also the example implementation for this.

Use hook to get status

Once the above two are implemented you can use the useAuth hook to get the login state of a user, given the client used is authorized.

import React from "react";

import {useAuth} from "@prowise/react-auth";

const MyStatus = () => {
    const auth = useAuth();
    return (
        <>
            <pre>{JSON.stringify(auth, null, 2)}</pre>
            {auth.isAuthenticated ?
                <button onClick={auth.logout}>Logout</button> :
                <button onClick={auth.login}>Login</button>
            }
        </>
    );
};

export default MyStatus;

See also the example implementation for this.

Login_hint Query Parameter

The login_hint query parameter can be passed on to every URL of your application and will be automatically picked up and removed from the URL. It will then be passed on every sign-in request to the SSO, and stored until you close the browser tab/window.

Examples

Further examples can be found in the examples folder - if you want to run it you will have to have ran npm install and npm run local in the root folder first.