{"id":18611101,"url":"https://github.com/loginradius/loginradius-react","last_synced_at":"2025-04-10T22:33:00.964Z","repository":{"id":43321265,"uuid":"373814953","full_name":"LoginRadius/loginradius-react","owner":"LoginRadius","description":"LoginRadius React SDK","archived":false,"fork":false,"pushed_at":"2023-04-07T01:25:18.000Z","size":944,"stargazers_count":5,"open_issues_count":9,"forks_count":9,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-03-25T06:07:54.138Z","etag":null,"topics":["hacktoberfest","hacktoberfest2021","react","sdk"],"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/LoginRadius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-04T11:08:42.000Z","updated_at":"2023-01-13T17:08:53.000Z","dependencies_parsed_at":"2024-11-07T03:12:50.236Z","dependency_job_id":"666c8cc9-9274-47e8-a6e5-524320eb4756","html_url":"https://github.com/LoginRadius/loginradius-react","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoginRadius%2Floginradius-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoginRadius%2Floginradius-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoginRadius%2Floginradius-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoginRadius%2Floginradius-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LoginRadius","download_url":"https://codeload.github.com/LoginRadius/loginradius-react/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248310514,"owners_count":21082433,"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":["hacktoberfest","hacktoberfest2021","react","sdk"],"created_at":"2024-11-07T03:12:41.336Z","updated_at":"2025-04-10T22:32:55.947Z","avatar_url":"https://github.com/LoginRadius.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# loginradius-react\n\n[![License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT)\n[![npm](https://img.shields.io/npm/v/loginradius-react.svg?style=flat)](https://www.npmjs.com/package/loginradius-react)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Contributing](#contributing)\n- [Support + Feedback](#support--feedback)\n- [What is LoginRadius](#what-is-loginradius)\n- [License](#license)\n\n## Installation\n\nUsing [npm](https://npmjs.org/)\n\n```bash\nnpm install loginradius-react\n```\n\n## Getting Started\n\nConfigure the SDK by wrapping your application in `LRAuthProvider`:\n\n```jsx\n// src/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport { LRAuthProvider } from \"loginradius-react\";\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cLRAuthProvider\n      appName=\"YOUR_LOGINRADIUS_APPNAME\"\n      apiKey=\"YOUR_LOGINRADIUS_APIKEY\"\n      redirectUri={window.location.origin}\n    \u003e\n      \u003cApp /\u003e\n    \u003c/LRAuthProvider\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\nUse the `useLRAuth` 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 { useLRAuth } from \"loginradius-react\";\n\nfunction App() {\n  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =\n    useLRAuth();\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 onClick={() =\u003e logout({ returnTo: window.location.origin })}\u003e\n          Log out\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return \u003cbutton onClick={() =\u003e 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 \"loginradius-react\";\n\nconst PrivateRoute = () =\u003e \u003cdiv\u003ePrivate\u003c/div\u003e;\n\nexport default withAuthenticationRequired(PrivateRoute, {\n  // 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});\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 { useLRAuth } from \"loginradius-react\";\n\nconst CallAPI = () =\u003e {\n  const { getAccessTokenSilently } = useLRAuth();\n  const [resp setResp] = useState(null);\n\n  useEffect(() =\u003e {\n    (async () =\u003e {\n      try {\n        const token = await getAccessTokenSilently();\n        const response = await fetch(\n          `https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}\u0026apiKey=${process.env.REACT_APP_API_KEY}`,\n          {}\n        );\n        setResp(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    })();\n  }, [getAccessTokenSilently]);\n\n  if (!resp) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  return (\n    \u003cspan\u003e{JSON.stringify(state.apiMessage, null, 2)}\u003c/span\u003e\n  );\n};\n\nexport default CallAPI;\n```\n\n### Using loginWithPopup\n\nTo implement `loginWithPopup` functionality in your app you need to perform following steps:\n\n1. Open your LoginRadius Dashboard and navigate to `Auth Page (IDX) -\u003e Themes -\u003e Customize -\u003e Switch to Advance Editor`.\n2. In the right side you will find the tab called `Custom JS`, expand and select `Add New`.\n3. A popup will open where you need to enter this url in the `Url` tab - https://hosted-pages.lrinternal.com/Themes/sdk/default-auth-react-sdk.js and click **Confirm**\n4. This URL contains the script which will help to close the popup after the authentication is done.\n5. Finally Click on **Save** and then add `loginWithPopup` method in your application.\n\n## Contributing\n\nWe appreciate feedback and contribution to this repo! Before you get started, please see the following:\n\n- [This repo's contribution guide](https://github.com/loginradius/loginradius-react/blob/main/CONTRIBUTING.md)\n\n## Support + Feedback\n\nFor support or to provide feedback, please [raise an issue on our issue tracker](https://github.com/loginradius/loginradius-react/issues).\n\n## What is LoginRadius\n\n- LoginRadius was established with the vision of securing the identity of every person on the internet. Over a few short years, we have grown exponentially from a simple social login provider to a multi-faceted, industry-leading customer identity and access management (CIAM) platform.\n- The LoginRadius Identity Platform helps companies securely manage customer identities and data to deliver a unified customer experience. We offer suites of modules to serve businesses from startups to Fortune 500 enterprises with hundreds of millions of users.\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](https://github.com/loginradius/loginradius-react/blob/main/LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floginradius%2Floginradius-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floginradius%2Floginradius-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floginradius%2Floginradius-react/lists"}