{"id":23058683,"url":"https://github.com/suhdev/react-oidc-client","last_synced_at":"2025-04-03T06:18:42.702Z","repository":{"id":39449233,"uuid":"274208548","full_name":"suhdev/react-oidc-client","owner":"suhdev","description":"A declarative approach to integrating oidc-client into React apps","archived":false,"fork":false,"pushed_at":"2023-03-05T01:54:30.000Z","size":602,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T20:13:51.078Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suhdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-22T18:03:54.000Z","updated_at":"2024-01-13T10:42:59.000Z","dependencies_parsed_at":"2023-02-05T19:30:40.217Z","dependency_job_id":null,"html_url":"https://github.com/suhdev/react-oidc-client","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-oidc-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-oidc-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-oidc-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suhdev%2Freact-oidc-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suhdev","download_url":"https://codeload.github.com/suhdev/react-oidc-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944385,"owners_count":20858772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-16T02:17:06.003Z","updated_at":"2025-04-03T06:18:42.689Z","avatar_url":"https://github.com/suhdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-oidc-client\n\nThe repository provides a declarative approach to working with `oidc-client`.\nIt wraps the different stages of the process in routes and handles everything behind the scenes.\n\nOnce authenticated, the children provided to the authentication components are rendered.\n\n## Usage\n\n### 1. Basic Example\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate } from \"react-oidc-client\";\n\nconst MySecretContent = () =\u003e \u003cdiv\u003eMy secure content\u003c/div\u003e;\n\nReactDOM.render(\n  \u003cAuthenticate\n    userManagerSettings={{\n      loadUserInfo: true,\n      userStore: new WebStorageStateStore({\n        store: localStorage\n      }),\n      authority: \"http://localhost:5000\",\n      client_id: \"JAVASCRIPT_CLIENT_ID\",\n      redirect_uri: \"http://localhost:3000/login_complete\",\n      response_type: \"id_token token\",\n      response_mode: \"fragment\",\n      scope: \"openid profile\", // add other scopes here\n      post_logout_redirect_uri: \"http://localhost:3000/logout\"\n    }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n\n### 2. Custom Login Complete and Logout Paths\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate } from \"react-oidc-client\";\n\nconst MySecretContent = () =\u003e \u003cdiv\u003eMy secure content\u003c/div\u003e;\n\nReactDOM.render(\n  \u003cAuthenticate\n    loginCompletePath=\"/my_login_complete_path\"\n    logoutPath=\"/my_logout_path\"\n    userManagerSettings={{\n      loadUserInfo: true,\n      userStore: new WebStorageStateStore({\n        store: localStorage\n      }),\n      authority: \"http://localhost:5000\",\n      client_id: \"JAVASCRIPT_CLIENT_ID\",\n      redirect_uri: \"http://localhost:3000/my_login_complete_path\",\n      response_type: \"id_token token\",\n      response_mode: \"fragment\",\n      scope: \"openid profile\", // add other scopes here\n      post_logout_redirect_uri: \"http://localhost:3000/my_logout_path\"\n    }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n\n### 3. Custom Loading Component\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate } from \"react-oidc-client\";\n\nconst MySecretContent:React.FC = () =\u003e \u003cdiv\u003eMy secure content\u003c/div\u003e;\nconst LoadingComponent:React.FC = ()=\u003cdiv\u003eMy loader\u003c/div\u003e\n\nReactDOM.render(\n  \u003cAuthenticate\n    LoadingComponent={LoadingComponent}\n    loginCompletePath=\"/my_login_complete_path\"\n    logoutPath=\"/my_logout_path\"\n    userManagerSettings={{\n      loadUserInfo: true,\n      userStore: new WebStorageStateStore({\n        store: localStorage\n      }),\n      authority: \"http://localhost:5000\",\n      client_id: \"JAVASCRIPT_CLIENT_ID\",\n      redirect_uri: \"http://localhost:3000/my_login_complete_path\",\n      response_type: \"id_token token\",\n      response_mode: \"fragment\",\n      scope: \"openid profile\", // add other scopes here\n      post_logout_redirect_uri: \"http://localhost:3000/my_logout_path\"\n    }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n\n### 4. Access Loggedin User Info\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate, useUserIdentity } from \"react-oidc-client\";\n\nconst MySecretContent:React.FC = () =\u003e {\n  const user = useUserIdentity();\n  return \u003cdiv\u003e{user.profile.name}\u003c/div\u003e\n};\nconst LoadingComponent:React.FC = ()=\u003cdiv\u003eMy loader\u003c/div\u003e\n\nReactDOM.render(\n  \u003cAuthenticate\n    LoadingComponent={LoadingComponent}\n    loginCompletePath=\"/my_login_complete_path\"\n    logoutPath=\"/my_logout_path\"\n    userManagerSettings={{\n      loadUserInfo: true,\n      userStore: new WebStorageStateStore({\n        store: localStorage\n      }),\n      authority: \"http://localhost:5000\",\n      client_id: \"JAVASCRIPT_CLIENT_ID\",\n      redirect_uri: \"http://localhost:3000/my_login_complete_path\",\n      response_type: \"id_token token\",\n      response_mode: \"fragment\",\n      scope: \"openid profile\", // add other scopes here\n      post_logout_redirect_uri: \"http://localhost:3000/my_logout_path\"\n    }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n\n### 5. Using create-react-app with a non-root relative path\n\nWhen using create-react-app, one might use the homepage property\nif the application isn't hosted at the root of the server.\nSee [here](https://create-react-app.dev/docs/deployment/#building-for-relative-paths) for more info.\nIf that's the case, you need provide the base name (as specified in the homepage property\nin order for the user to be redirected back to the appropraite page, as otherwise,\nthe user will be redirected to paths relative to the root. See the example below:\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate, useUserIdentity } from \"react-oidc-client\";\nconst MySecretContent:React.FC = () =\u003e {\n  const user = useUserIdentity();\n  return \u003cdiv\u003e{user.profile.name}\u003c/div\u003e\n};\nconst LoadingComponent:React.FC = ()=\u003cdiv\u003eMy loader\u003c/div\u003e\nReactDOM.render(\n  \u003cAuthenticate\n    basename=\"/myfolderpath\"\n    LoadingComponent={LoadingComponent}\n    loginCompletePath=\"/my_login_complete_path\"\n    logoutPath=\"/my_logout_path\"\n    userManagerSettings={{\n      loadUserInfo: true,\n      userStore: new WebStorageStateStore({\n        store: localStorage\n      }),\n      authority: \"http://localhost:5000\",\n      client_id: \"JAVASCRIPT_CLIENT_ID\",\n      redirect_uri: \"http://localhost:3000/my_login_complete_path\",\n      response_type: \"id_token token\",\n      response_mode: \"fragment\",\n      scope: \"openid profile\", // add other scopes here\n      post_logout_redirect_uri: \"http://localhost:3000/my_logout_path\"\n    }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n\n### 6. Usage as an alternative to `msal` to work with Azure B2C\n\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Authenticate, useUserIdentity } from \"react-oidc-client\";\nconst MySecretContent:React.FC = () =\u003e {\n  const user = useUserIdentity();\n  return \u003cdiv\u003e{user.profile.name}\u003c/div\u003e\n};\nconst LoadingComponent:React.FC = ()=\u003cdiv\u003eMy loader\u003c/div\u003e\nconst adTenant = \"ad_tenant\";\nconst appName = \"myApp\";\nconst userSignInFlow = \"B2C_1A_signup_signin\";\nconst adResoureceId = `https://${adTenant}.onmicrosoft.com/${appName}`\nReactDOM.render(\n  \u003cAuthenticate\n    basename=\"/myfolderpath\"\n    LoadingComponent={LoadingComponent}\n    loginCompletePath=\"/my_login_complete_path\"\n    logoutPath=\"/my_logout_path\"\n    userManagerSettings={{\n            client_id: window.appConfig.ad_clientId,\n            authority: `https://${adTenant}.b2clogin.com/${adTenant}.onmicrosoft.com/${userSignInFlow}/v2.0`,\n            redirect_uri: `http://localhost:3000/login_complete`,\n            popup_redirect_uri: `http://localhost:3000/login_complete`,\n            response_type: \"token id_token\",\n            automaticSilentRenew: true,\n            response_mode: \"fragment\",\n            scope: [\n              `${adResourceId}/user_impersonation`,\n              \"profile\",\n              \"openid\"\n            ].join(\" \"),\n            post_logout_redirect_uri: `http://localhost:3000/logout`,\n            loadUserInfo: false\n          }}\n  \u003e\n    \u003cMySecretContent /\u003e\n  \u003c/Authenticate\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuhdev%2Freact-oidc-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuhdev%2Freact-oidc-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuhdev%2Freact-oidc-client/lists"}