react-oidc-context

Lightweight auth library based on oidc-client-ts for React single page appl...

Authentication / AuthorizationReact
authts/react-oidc-contextreact-oidc-context

README

react-oidc-context


Lightweight auth library using the
oidc-client-ts library for React
single page applications (SPA). Support for
hooks and
higher-order components (HOC).

Documentation


This library implements an auth context provider by making use of the
oidc-client-ts library. Its configuration is tight coupled to that library.

- oidc-client-ts

The
[User](https://authts.github.io/oidc-client-ts/classes/User.html)
and
[UserManager](https://authts.github.io/oidc-client-ts/classes/UserManager.html)
is hold in this context, which is accessible from the
React application. Additionally it intercepts the auth redirects by looking at
the query/fragment parameters and acts accordingly. You still need to setup a
redirect uri, which must point to your application, but you do not need to
create that route.

To renew the access token, the
automatic silent renew
feature of oidc-client-ts can be used.

Installation


Using npm

  1. ```bash
  2. npm install oidc-client-ts react-oidc-context --save
  3. ```

Using yarn

  1. ```bash
  2. yarn add oidc-client-ts react-oidc-context
  3. ```

Getting Started


Configure the library by wrapping your application in AuthProvider:

  1. ```jsx
  2. // src/index.jsx
  3. import React from "react";
  4. import ReactDOM from "react-dom";
  5. import { AuthProvider } from "react-oidc-context";
  6. import App from "./App";

  8. const oidcConfig = {
  9.   authority: "<your authority>",
  10.   client_id: "<your client id>",
  11.   redirect_uri: "<your redirect uri>",
  12.   // ...
  13. };

  15. ReactDOM.render(
  16.   <AuthProvider {...oidcConfig}>
  17.     <App />
  18.   </AuthProvider>,
  19.   document.getElementById("app")
  20. );
  21. ```

Use the useAuth hook in your components to access authentication state
(isLoading, isAuthenticated and user) and authentication methods
(signinRedirect, removeUser and signOutRedirect):

  1. ```jsx
  2. // src/App.jsx
  3. import React from "react";
  4. import { useAuth } from "react-oidc-context";

  6. function App() {
  7.     const auth = useAuth();

  9.     switch (auth.activeNavigator) {
  10.         case "signinSilent":
  11.             return <div>Signing you in...</div>;
  12.         case "signoutRedirect":
  13.             return <div>Signing you out...</div>;
  14.     }

  16.     if (auth.isLoading) {
  17.         return <div>Loading...</div>;
  18.     }

  20.     if (auth.error) {
  21.         return <div>Oops... {auth.error.message}</div>;
  22.     }

  24.     if (auth.isAuthenticated) {
  25.         return (
  26.         <div>
  27.             Hello {auth.user?.profile.sub}{" "}
  28.             <button onClick={() => void auth.removeUser()}>Log out</button>
  29.         </div>
  30.         );
  31.     }

  33.     return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
  34. }

  36. export default App;
  37. ```

You must provide an implementation of onSigninCallback to oidcConfig to remove the payload from the URL upon successful login. Otherwise if you refresh the page and the payload is still there, signinSilent - which handles renewing your token - won't work.

A working implementation is already in the code here.