{"id":40630199,"url":"https://github.com/developertown/oidc-provider","last_synced_at":"2026-01-21T07:32:07.597Z","repository":{"id":46799794,"uuid":"302122930","full_name":"developertown/oidc-provider","owner":"developertown","description":"OpenID Connect (OIDC) and OAuth2 protocol support for React Single Page Applications (SPA).","archived":false,"fork":false,"pushed_at":"2025-10-29T23:08:42.000Z","size":838,"stargazers_count":6,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-30T01:11:29.938Z","etag":null,"topics":["hooks","oauth2","oidc","openid-connect","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developertown.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-07T18:17:02.000Z","updated_at":"2025-10-29T23:08:41.000Z","dependencies_parsed_at":"2025-10-30T01:09:37.685Z","dependency_job_id":"f1425712-3931-4859-8f89-518aef5ebe01","html_url":"https://github.com/developertown/oidc-provider","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/developertown/oidc-provider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developertown%2Foidc-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developertown%2Foidc-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developertown%2Foidc-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developertown%2Foidc-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developertown","download_url":"https://codeload.github.com/developertown/oidc-provider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developertown%2Foidc-provider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28629915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","oauth2","oidc","openid-connect","react"],"created_at":"2026-01-21T07:32:07.521Z","updated_at":"2026-01-21T07:32:07.584Z","avatar_url":"https://github.com/developertown.png","language":"TypeScript","readme":"# @developertown/oidc-provider\n\nOpenID Connect (OIDC) and OAuth2 protocol support for React Single Page Applications (SPA).\n\n[![Version](https://img.shields.io/npm/v/@developertown/oidc-provider.svg)](https://npmjs.org/package/@developertown/oidc-provider)\n[![Downloads/week](https://img.shields.io/npm/dw/@developertown/oidc-provider.svg)](https://npmjs.org/package/@developertown/oidc-provider)\n![License](https://img.shields.io/npm/l/@developertown/oidc-provider)\n\n## Installation\n\nUsing [npm](https://npmjs.org/)\n\n```bash\nnpm install @developertown/oidc-provider\n```\n\nUsing [yarn](https://yarnpkg.com/)\n\n```bash\nyarn add @developertown/oidc-provider\n```\n\n## Getting Started\n\n### Auth0\n\n`@developertown/oidc-provider` provides a simplified api for integrating Auth0. The simplified api is nearly drop in equilvalent to [@auth0/auth0-react](https://github.com/auth0/auth0-react)\n\nConfigure the SDK by wrapping your application in `Auth0Provider`:\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Auth0Provider } from \"@developertown/oidc-provider\";\nimport App from \"./App\";\n\nReactDOM.render(\n  \u003cAuth0Provider\n    domain=\"YOUR_AUTH0_DOMAIN\"\n    audience=\"YOUR_API_DOMAIN\"\n    clientId=\"YOUR_AUTH0_CLIENT_ID\"\n    redirectUri={window.location.origin}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/Auth0Provider\u003e,\n  document.getElementById(\"app\")\n);\n```\n\nUse the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):\n\n```jsx\n// src/App.js\nimport React from \"react\";\nimport { useAuth0 } from \"@developertown/oidc-provider\";\n\nfunction App() {\n  const {\n    isLoading,\n    isAuthenticated,\n    error,\n    user,\n    loginWithRedirect,\n    logout,\n  } = useAuth0();\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n  if (error) {\n    return \u003cdiv\u003eOops... {error.message}\u003c/div\u003e;\n  }\n\n  if (isAuthenticated) {\n    return (\n      \u003cdiv\u003e\n        Hello {user.name}{\" \"}\n        \u003cbutton\n          onClick={() =\u003e {\n            // optionally pass a returnTo url\n            // https://auth0.com/docs/authenticate/login/logout/redirect-users-after-logout\n            logout({\n              extraQueryParams: {\n                returnTo: `${window.location.origin}/logout/callback`,\n              },\n            });\n            // or simply logut to return to the configured redirectUri\n            //logout()\n          }}\n        \u003e\n          Log out\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return (\n      \u003cbutton\n        onClick={() =\u003e {\n          //optionally pass a returnTo url\n          loginWithRedirect({\n            state: { returnTo: `${window.location.href}/login/callback` },\n          });\n          // or take the defaults\n          //loginWithRedirect()\n        }}\n      \u003e\n        Log in\n      \u003c/button\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n### AWS Cognito\n\nConfigure the SDK by wrapping your application in `CognitoProvider`:\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { CognitoProvider } from \"@developertown/oidc-provider\";\nimport App from \"./App\";\n\nReactDOM.render(\n  \u003cCognitoProvider\n    domain=\"YOUR_COGNITO_DOMAIN\"\n    issuer=\"YOUR_COGNITO_ISSUER\"\n    clientId=\"YOUR_COGNITO_CLIENT_ID\"\n    redirectUri={window.location.origin}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/CognitoProvider\u003e,\n  document.getElementById(\"app\")\n);\n```\n\nUse the `useCongito` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):\n\n```jsx\n// src/App.js\nimport React from \"react\";\nimport { useCongito } from \"@developertown/oidc-provider\";\n\nfunction App() {\n  const {\n    isLoading,\n    isAuthenticated,\n    error,\n    user,\n    loginWithRedirect,\n    logout,\n  } = useCongito();\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n  if (error) {\n    return \u003cdiv\u003eOops... {error.message}\u003c/div\u003e;\n  }\n\n  if (isAuthenticated) {\n    return (\n      \u003cdiv\u003e\n        Hello {user.name} \u003cbutton onClick={() =\u003e logout()}\u003eLog out\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return \u003cbutton onClick={loginWithRedirect}\u003eLog in\u003c/button\u003e;\n  }\n}\n\nexport default App;\n```\n\n### Azure AD B2C\n\nConfigure the SDK by wrapping your application in `AzureProvider`:\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { AzureProvider } from \"@developertown/oidc-provider\";\nimport App from \"./App\";\n\nReactDOM.render(\n  \u003cAzureProvider\n    domain=\"AZURE_AD_TENANT.b2clogin.com/AZURE_AD_TENANT.onmicrosoft.com\"\n    policy=\"b2c_1a_signup_signin\"\n    issuer=\"YOUR_AZURE_AD__ISSUER\"\n    clientId=\"YOUR_AZURE_AD_CLIENT_ID\"\n    clientSecret=\"YOUR_AZURE_AD_CLIENT_SECRET\"\n    redirectUri={window.location.origin}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/AzureProvider\u003e,\n  document.getElementById(\"app\")\n);\n```\n\nUse the `useAzure` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):\n\n```jsx\n// src/App.js\nimport React from \"react\";\nimport { useAzure } from \"@developertown/oidc-provider\";\n\nfunction App() {\n  const {\n    isLoading,\n    isAuthenticated,\n    error,\n    user,\n    loginWithRedirect,\n    logout,\n  } = useAzure();\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n  if (error) {\n    return \u003cdiv\u003eOops... {error.message}\u003c/div\u003e;\n  }\n\n  if (isAuthenticated) {\n    return (\n      \u003cdiv\u003e\n        Hello {user.name} \u003cbutton onClick={() =\u003e logout()}\u003eLog out\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return \u003cbutton onClick={loginWithRedirect}\u003eLog in\u003c/button\u003e;\n  }\n}\n\nexport default App;\n```\n\n### Other OpenID Connect\n\nThis library can be configured to work with an OpenID Connect authentication provider. Configure the SDK by wrapping your application in `OIDCProvider` see [IdentityModel/oidc-client-js](https://github.com/IdentityModel/oidc-client-js/wiki#usermanager) for the full list of options when configuring the `OIDCProvider`:\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { OIDCProvider } from \"@developertown/oidc-provider\";\nimport App from \"./App\";\n\nReactDOM.render(\n  \u003cOIDCProvider\n    authority={\"YOUR_OIDC_DOMAIN\"}\n    metadata={{\n      issuer: \"YOUR_OIDC_ISSUER\",\n      authorization_endpoint: \"YOUR_OIDC_AUTHORIZATION_ENDPOINT\",\n      token_endpoint: \"YOUR_OIDC_TOKEN_ENDPOINT\",\n      end_session_endpoint: \"YOUR_OIDC_END_SESSION_ENDPOINT\",\n    }}\n    client_id={\"YOUR_OIDC_CLIENT_ID\"}\n    response_type=\"code\"\n    loadUserInfo={false}\n    automaticSilentRenew\n    redirect_uri={window.location.origin}\n    post_logout_redirect_uri={window.location.origin}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/OIDCProvider\u003e,\n  document.getElementById(\"app\")\n);\n```\n\nUse the `useAuth` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):\n\n```jsx\n// src/App.js\nimport React from \"react\";\nimport { useAuth } from \"@developertown/oidc-provider\";\n\nfunction App() {\n  const {\n    isLoading,\n    isAuthenticated,\n    error,\n    user,\n    loginWithRedirect,\n    logout,\n  } = useAuth();\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n  if (error) {\n    return \u003cdiv\u003eOops... {error.message}\u003c/div\u003e;\n  }\n\n  if (isAuthenticated) {\n    return (\n      \u003cdiv\u003e\n        Hello {user.name} \u003cbutton onClick={() =\u003e logout()}\u003eLog out\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return \u003cbutton onClick={loginWithRedirect}\u003eLog in\u003c/button\u003e;\n  }\n}\n\nexport default App;\n```\n\n### Protect a Route\n\nProtect a route component using the `withAuthenticationRequired` higher order component. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login:\n\n```jsx\nimport React from \"react\";\nimport { withAuthenticationRequired } from \"@developertown/oidc-provider\";\n\nconst PrivateRoute = () =\u003e \u003cdiv\u003ePrivate\u003c/div\u003e;\n\nexport default withAuthenticationRequired(PrivateRoute, {\n  // optionally show a message while the authentication provider initializes.\n  onInitializing: () =\u003e \u003cdiv\u003eChecking for existing login...\u003c/div\u003e,\n  // optionally show a message while the user waits to be redirected to the login page.\n  onRedirecting: () =\u003e \u003cdiv\u003eRedirecting you to the login page...\u003c/div\u003e,\n  // optionally show a message login fails.\n  onError: (error: Error) =\u003e \u003cdiv\u003e{error.message}\u003c/div\u003e,\n  // optionally pass parameters to `loginWithRedirect` for example a returnTo location\n  loginWithRedirectParams: () =\u003e ({\n    state: { returnTo: window.location.href },\n  }),\n});\n```\n\n### Call an API\n\nCall a protected API with an Access Token:\n\n```jsx\nimport React, { useEffect, useState } from \"react\";\nimport { useAuth } from \"@developertown/oidc-provider\";\n\nconst Posts = () =\u003e {\n  const { getAccessTokenSilently } = useAuth();\n  const [posts, setPosts] = useState(null);\n\n  useEffect(() =\u003e {\n    (async () =\u003e {\n      try {\n        const token = await getAccessTokenSilently();\n        const response = await fetch(\"https://api.example.com/posts\", {\n          headers: {\n            Authorization: `Bearer ${token}`,\n          },\n        });\n        setPosts(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    })();\n  }, [getAccessTokenSilently]);\n\n  if (!posts) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  return (\n    \u003cul\u003e\n      {posts.map((post, index) =\u003e {\n        return \u003cli key={index}\u003e{post}\u003c/li\u003e;\n      })}\n    \u003c/ul\u003e\n  );\n};\n\nexport default Posts;\n```\n\n### Events\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n  Auth0Provider as AuthenticationProvider,\n  AppState,\n} from \"@developertown/oidc-provider\";\nimport App from \"./App\";\n\nReactDOM.render(\n  \u003cAuthenticationProvider\n    domain=\"YOUR_DOMAIN\"\n    clientId=\"YOUR_CLIENT_ID\"\n    redirectUri={window.location.origin}\n    useRefreshTokens\n    onAccessTokenChanged={(accessToken: string) =\u003e {\n      /* Do something with the accessToken*/\n      // dispatch(accessTokenChanged(accessToken))\n      // NOTE: this event may not be needed since getAccessTokenSilently() will always grab the latest access token\n      // or perform a silent refresh to get a fresh one\n    }}\n    onAccessTokenExpiring={() =\u003e {\n      // Let the user know their session is expiring\n      // NOTE: when useRefreshTokens is true accessTokens will be automatically refreshed\n    }}\n    onAccessTokenExpired={() =\u003e {\n      // Let the user know their session has expired\n      // NOTE: when useRefreshTokens is true as long as the silent refresh occurs successfully the token will not expire\n    }}\n    onAccessTokenRefreshError={(error: Error) =\u003e {\n      // Handle errors when silently refreshing access tokens.  Only applies when useRefreshTokens is true\n    }}\n    onRedirectCallback={(appState?: AppState) =\u003e {\n      // Perform action after redirecting from the authentication provider\n      // NOTE: if no onRedirectCallback is provided the default behavior is\n      window.history.replaceState(\n        {},\n        document.title,\n        appState?.returnTo || window.location.pathname\n      );\n    }}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/AuthenticationProvider\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](https://github.com/developertown/oidc-provider/blob/master/LICENSE) file for more info.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopertown%2Foidc-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopertown%2Foidc-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopertown%2Foidc-provider/lists"}