react-oidc-context

import React from 'react'; import ReactDOM from 'react-dom/client'; import { AuthProvider, useAuth } from 'react-oidc-context'; // Your OIDC configuration const oidcConfig = { authority: 'https://your-identity-provider.com', client_id: 'your-client-id', redirect_uri: window.location.origin + '/authentication/callback', onSigninCallback: () => { // IMPORTANT: Clear URL payload upon successful login to prevent issues with silent renew window.history.replaceState({}, document.title, window.location.pathname); }, // automaticSilentRenew: true, // Enable automatic token renewal // scope: 'openid profile email', // ... other oidc-client-ts UserManagerSettings }; function App() { const auth = useAuth(); switch (auth.activeNavigator) { case 'signinSilent': return <div>Signing you in silently...</div>; case 'signoutRedirect': return <div>Signing you out...</div>; } if (auth.isLoading) { return <div>Loading authentication status...</div>; } if (auth.error) { return <div>Authentication error: {auth.error.message}</div>; } if (auth.isAuthenticated) { return ( <div> Hello, {auth.user?.profile.name || auth.user?.profile.sub}{' '} <button onClick={() => void auth.removeUser()}>Log out locally</button> <button onClick={() => void auth.signoutRedirect()}>Log out from IdP</button> </div> ); } return ( <div> <p>You are not authenticated.</p> <button onClick={() => void auth.signinRedirect()}>Log in</button> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <AuthProvider {...oidcConfig}> <App /> </AuthProvider> </React.StrictMode> );