React OIDC

Wrapper for oidc-client-js, to be used in React apps.

Quick start

You should read the slow start and Routing Considerations too

yarn add react-oidc

You will need the config for the UserManager class.

Example using react-router

import { makeAuthenticator, makeUserManager, Callback } from 'react-oidc'

// supply this yourself
import App from '../layouts/App'
import userManagerConfig from '../config'

const userManager = makeUserManager(userManagerConfig)
const AppWithAuth = makeAuthenticator({
  userManager: userManager,
  signinArgs: {
    state: {
      foo: 15
    }
  }
})(App)

export default () => (
  <Router>
    <Switch>
      <Route
        path="/callback"
        render={routeProps => (
          <Callback
            onSuccess={user => {
              // `user.state` will reflect the state that was passed in via signinArgs.
              routeProps.history.push('/')
            }}
            userManager={userManager}
          />
        )}
      />
      <AppWithAuth />
    </Switch>
  </Router>
)

Slow start

There are 3 main parts to this library:

• makeUserManager function;
• makeAuthenticator function;
• Callback component

makeUserManager(config)

| Param | Type | Required | Default Value | Description | | -------- | ------------------------------ | -------- | ------------- | -------------------------------------- | | config | object (UserManagerSettings) | Yes | undefined | Config object to pass to UserManager |

Helper utility to create a UserManager instance.

makeAuthenticator(params)(<ProtectedApp />)

| Param | Type | Required | Default Value | Description | | ---------------------- | ------------- | -------- | ------------- | ---------------------------------------------------------------- | | userManager | UserManager | Yes | undefined | UserManager instance (the result of makeUserManager()) | | placeholderComponent | Component | No | null | Optional component to render while auth state is being retrieved |

This is a higher-order function that accepts a UserManager instance, and optionally a placeholder component to render when user auth state is being retrieved. It returns a function that accepts a React component. This component should contain all components that you want to be protected by your authentication. Ultimately you will get back a component that either renders the component you passed it (if the user is authenticated), or redirects to the OIDC login screen as defined by the Identity Provider.

The lifecycle of this component is as follows:

1. The component is constructed with a fetching flag set to true.

2. On mount, the .getUser() method from UserManager is called. If the user is already authenticated, it will set the fetching flag to false and render the component you passed it.

3. If the user is not authenticated or their token has expired, the user will be redirected to the login URL (defined by the Identity Provider) and the fetching flag will be set to false.

4. Upon successful authentication with the Identity Provider, the user will be redirected to the redirect_uri. You should render the Callback component at this location.

Note on the fetching flag

The fetching flag is set to true initially because of the asynchronous nature of .getUser(). There is a need to ensure that we do not redirect to the login page whilst getUser is resolving. Without some way of knowing when the user auth state query is complete, we would end up always redirecting to the login page.

<Callback />

| Prop | Type | Required | Default Value | Description | | ------------- | ------------- | -------- | ------------- | ----------------------------------------------------------------------------------------------- | | userManager | UserManager | Yes | undefined | UserManager instance (the result of makeUserManager()) | | children | Component | No | null | Optional component to render at the redirect page | | onError | function | No | undefined | Optional callback if there is an error from the Promise returned by .signinRedirectCallback() | | onSuccess | function | No | undefined | Optional callback when the Promise from .signinRedirectCallback() resolves |

The Callback component will call the .signinRedirectCallback() method from UserManager and if successful, call the onSuccess prop. On error it will call the onError prop. You should pass the same instance of UserManager that you passed to makeAuthenticator.

<UserData />

This component exposes the data of the authenticated user. If you are familiar with React's Context API (the official v16.3.x one), this component is just a Context.

<UserData.Consumer>
  {context => <p>{context.user.id_token}</p>}
</UserData.Consumer>

Render prop function

| Argument (key of context) | Type | Description | | --------------------------- | ------------- | -------------------------------------------- | | signOut | function | Call this to sign the current user out | | user | User | This is the User object from oidc-client | | userManager | UserManager | UserManager instance from oidc-client |

Routing considerations

This library is deliberately unopinionated about routing, however there are restrictions from the oidc-client library that should be considered.

1. There will be url redirects. It is highly recommended to use a routing library like react-router to help deal with this.

2. The redirect_uri should match eagerly. You should not render the result of makeAuthenticator()() at the location of the redirect_uri. If you do, you will end up in a redirect loop that ultimately leads you back to the authentication page. In the quick start above, a Switch from react-router is used, and the Callback component is placed before AppWithAuth. This ensures that when the user is redirected to the redirect_uri, AppWithAuth is not rendered. Once the user data has been loaded into storage, onSuccess is called and the user is redirected back to a protected route. When AppWithAuth loads now, the valid user session is in storage and the protected routes are rendered.