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 wayconst oidcConfiguration = authority: 'https://some.authority.net' client_id: 'your_client' redirect_uri: `/signin-oidc` response_type: 'id_token token' scope: 'openid profile someScope' post_logout_redirect_uri: `/signout-oidc` silent_redirect_uri: `/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 = ="/signin-oidc" = /> <Route = ="/signout-oidc" = /> <Route = ="/silent-refresh" = /> <Route = ="/"> <Authenticated = = => <OidcContext.Consumer> <button =>Log out</button> </OidcContext.Consumer> <Route = ="/"> logged in </Route> <Switch> <Route ="/new">New item</Route> <Route ="/:id">Item detail</Route> </Switch> </Authenticated> </Route> </Switch> </BrowserRouter> ;;