React Components for OAuth2 Implicit Flow

Uses oidc-client package internally to provide couple of components for OAuth2 implicit flow.

Basically the app sits on / route. Plus there are /signin-oidc and /signout-oidc callbacks registered in the OAuth2 provider (for example in Google or Facebook).

Authenticated Component

The Authenticated component is the core. Callback onUserLoaded is called whenever user logs in and/or tokens are refreshed. Callback onUserUnloaded is called whenever OAuth2 provider redirects to sign-out route and should be used to remove the user from app state.

The component displays it's children only if the user is authenticated. In the example below, there is context used to pass OIDC user manager and configuration. It may be used to initiate sign-out for example.

Sign-in + Sign-out

If there is no user logged in, then the Authenticated component redirects to OAuth2 provider, see authority in OIDC configuration. Then user logs in, usually enters it's credentials, and the provider redirects to sign-in callback, in our case to /signin-oidc. If the SignInCallback component detects an user, then the onSuccess callback is called with appropriate user object. Sign-out works analogically.

Silent Refresh

The silent refresh is supported as well. The SilentRefreshCallback component basically wraps logic from UserManager. The logic is implemented in Authenticated component. If tokens are close to expiration, the automatic refresh is performed and the onUserLoaded callback is called with appropriate user object. In order to enable the silent refresh, the configuration must be set: automaticSilentRenew=true and silent_redirect_uri=".../silent-refresh". And the client in OAuth2 provider must be set to appropriate URLs as well.

Configuration

Generally the client in OAuth2 provider must be set up with appropriate callback URLs for sign-in, sign-out and silent refresh. See redirect_uri, post_logout_redirect_uri and silent_redirect_uri values. Don't forget to configure appropriate scope, client_id and client_secret.

Example Code

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import {
  Authenticated,
  SignInCallback,
  SignOutCallback,
  SilentRefreshCallback,
  OidcContext
} from 'react-oidc-auth/dist';

// TODO: Provide you configuration in better way
const oidcConfiguration = {
  authority: 'https://some.authority.net',
  client_id: 'your_client',
  redirect_uri: `${window.location.origin}/signin-oidc`,
  response_type: 'id_token token',
  scope: 'openid profile someScope',
  post_logout_redirect_uri: `${window.location.origin}/signout-oidc`,
  silent_redirect_uri: `${window.location.origin}/silent-refresh`,
  automaticSilentRenew: true
};

const App = ({ setUser, clearUser }) => {
  // setUser - adds the user (incl. tokens) to state/store
  // clearUse - removes the user from state/store
  return (
    <BrowserRouter>
      <Switch>
        <Route
          exact={true}
          path="/signin-oidc"
          render={routeProps => <SignInCallback onSuccess={user => routeProps.history.push('/')} />}
        />
        <Route
          exact={true}
          path="/signout-oidc"
          render={routeProps => <SignOutCallback onSuccess={() => routeProps.history.push('/')} />}
        />
        <Route exact={true} path="/silent-refresh" render={routeProps => <SilentRefreshCallback />} />

        <Route exact={false} path="/">
          <Authenticated oidcConfiguration={oidcConfiguration} onUserLoaded={setUser} onUserUnloaded={clearUser}>
            <OidcContext.Consumer>
              {value => <button onClick={() => value.userManager.signoutRedirect()}>Log out</button>}
            </OidcContext.Consumer>

            <Route exact={true} path="/">
              I'm logged in.
            </Route>
            <Switch>
              <Route path="/new">New item</Route>
              <Route path="/:id">Item detail</Route>
            </Switch>
          </Authenticated>
        </Route>
      </Switch>
    </BrowserRouter>
  );
};