{"library":"react-oidc-context","title":"React OIDC Context","description":"react-oidc-context is a lightweight authentication library for React Single Page Applications (SPAs) that leverages the React Context API for state management, built on top of the `oidc-client-ts` library. The current stable version is 3.3.1. The package maintains a fairly active release cadence, with frequent bugfix and minor releases, and significant major versions introducing breaking changes as the underlying `oidc-client-ts` library evolves. It differentiates itself by providing convenient React hooks (`useAuth`) and Higher-Order Components (`withAuthenticationRequired`) to integrate OpenID Connect and OAuth2 authentication flows seamlessly into React components, handling aspects like token renewal and redirect callbacks without requiring manual route setup. It ships with full TypeScript support, making it suitable for modern React development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-oidc-context"],"cli":null},"imports":["import { AuthProvider } from 'react-oidc-context';","import { useAuth } from 'react-oidc-context';","import { withAuthenticationRequired } from 'react-oidc-context';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { AuthProvider, useAuth } from 'react-oidc-context';\n\n// Your OIDC configuration\nconst oidcConfig = {\n  authority: 'https://your-identity-provider.com',\n  client_id: 'your-client-id',\n  redirect_uri: window.location.origin + '/authentication/callback',\n  onSigninCallback: () => {\n    // IMPORTANT: Clear URL payload upon successful login to prevent issues with silent renew\n    window.history.replaceState({}, document.title, window.location.pathname);\n  },\n  // automaticSilentRenew: true, // Enable automatic token renewal\n  // scope: 'openid profile email',\n  // ... other oidc-client-ts UserManagerSettings\n};\n\nfunction App() {\n    const auth = useAuth();\n\n    switch (auth.activeNavigator) {\n        case 'signinSilent':\n            return <div>Signing you in silently...</div>;\n        case 'signoutRedirect':\n            return <div>Signing you out...</div>;\n    }\n\n    if (auth.isLoading) {\n        return <div>Loading authentication status...</div>;\n    }\n\n    if (auth.error) {\n        return <div>Authentication error: {auth.error.message}</div>;\n    }\n\n    if (auth.isAuthenticated) {\n        return (\n        <div>\n            Hello, {auth.user?.profile.name || auth.user?.profile.sub}{' '}\n            <button onClick={() => void auth.removeUser()}>Log out locally</button>\n            <button onClick={() => void auth.signoutRedirect()}>Log out from IdP</button>\n        </div>\n        );\n    }\n\n    return (\n      <div>\n        <p>You are not authenticated.</p>\n        <button onClick={() => void auth.signinRedirect()}>Log in</button>\n      </div>\n    );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <AuthProvider {...oidcConfig}>\n      <App />\n    </AuthProvider>\n  </React.StrictMode>\n);\n","lang":"typescript","description":"This quickstart demonstrates how to set up `AuthProvider` to configure OpenID Connect and use the `useAuth` hook within a functional component to manage authentication state (loading, authenticated, user info) and trigger authentication actions like login and logout. It highlights the critical `onSigninCallback` for proper token renewal.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}