{"id":20215529,"url":"https://github.com/casdoor/casdoor-react-sdk","last_synced_at":"2025-04-10T14:35:27.971Z","repository":{"id":58504533,"uuid":"529647172","full_name":"casdoor/casdoor-react-sdk","owner":"casdoor","description":"React client SDK for Casdoor","archived":false,"fork":false,"pushed_at":"2023-08-29T09:09:33.000Z","size":319,"stargazers_count":15,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-23T03:06:03.097Z","etag":null,"topics":["auth","authentication","authn","casdoor","iam","javascript","js","react","sdk","sso","ts","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/casdoor/casdoor","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/casdoor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-08-27T17:05:55.000Z","updated_at":"2024-12-12T02:54:57.000Z","dependencies_parsed_at":"2024-01-29T00:03:12.033Z","dependency_job_id":"2d82e17c-a1ca-4aa1-97d7-5218648d5bb7","html_url":"https://github.com/casdoor/casdoor-react-sdk","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.4,"last_synced_commit":"06e680747846a4c81a91f2db75f929ac2f6d8e30"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casdoor%2Fcasdoor-react-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casdoor%2Fcasdoor-react-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casdoor%2Fcasdoor-react-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casdoor%2Fcasdoor-react-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casdoor","download_url":"https://codeload.github.com/casdoor/casdoor-react-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248233952,"owners_count":21069493,"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":["auth","authentication","authn","casdoor","iam","javascript","js","react","sdk","sso","ts","typescript"],"created_at":"2024-11-14T06:22:55.037Z","updated_at":"2025-04-10T14:35:27.955Z","avatar_url":"https://github.com/casdoor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# casdoor-react-sdk\n\n[![NPM version](https://img.shields.io/npm/v/casdoor-react-sdk)](https://npmjs.com/package/casdoor-react-sdk)\n[![NPM download](https://img.shields.io/npm/dm/casdoor-react-sdk)](https://npmjs.com/package/casdoor-react-sdk)\n[![Github Actions](https://github.com/casdoor/casdoor-react-sdk/actions/workflows/release.yaml/badge.svg)](https://github.com/casdoor/casdoor-react-sdk/actions/workflows/release.yaml)\n[![Coverage Status](https://codecov.io/gh/casdoor/casdoor-react-sdk/branch/master/graph/badge.svg)](https://codecov.io/gh/casdoor/casdoor-react-sdk)\n[![Release](https://img.shields.io/github/v/release/casdoor/casdoor-react-sdk)](https://github.com/casdoor/casdoor-react-sdk/releases/latest)\n[![Discord](https://img.shields.io/discord/1022748306096537660?logo=discord\u0026label=discord\u0026color=5865F2)](https://discord.gg/5rPsrAzK7S)\n\n\nIt can help you quickly build a silent sign-in application based on Casdoor.\n\nWe have an implemented example: [casdoor-spring-security-react-example](https://github.com/casdoor/casdoor-spring-security-react-example).\n\nTo use this sdk just follow the steps below.\n\n### Installation\n\n```shell\n#NPM\nnpm i casdoor-react-sdk\n\n#YARN\nyarn add casdoor-react-sdk\n```\n\n### Use in React\n\nLet's take a look at the following example of a silent sign-in.\n\nFirst, you need to initialize the Casdoor SDK.\n\n```ts\nimport Sdk from \"casdoor-js-sdk\";\n\nexport const ServerUrl = \"http://localhost:7023\";\n\nconst sdkConfig = {\n  serverUrl: \"http://localhost:8000\",\n  clientId: \"d79fd3c4e09a309fb3f5123\",\n  appName: \"application_hnpzib\",\n  organizationName: \"organization_4emn5k\",\n  redirectPath: \"/callback\",\n  signinPath: \"/api/signin\",\n};\n\nexport const CasdoorSDK = new Sdk(sdkConfig);\n```\n\nThen, intercept the `/callback` path in your application, the `AuthCallback` component will help you automatically handle the logic of interacting with the server, you just need to make sure that your server `ServerUrl` implements the `${ServerUrl}/api/signin` api, and takes two parameters `code` and `state`, and returns `token`.\n\n\u003e Note: Here you need to implement the `saveTokenFromResponse` and `isGetTokenSuccessful` functions.\n\u003e\n\u003e - `isGetTokenSuccessful`：you need to judge from the response data whether the request is processed successfully by the server.\n\u003e - `saveTokenFromResponse`：when your `${ServerUrl}/api/signin` api successfully returns the token, you need to save the token.\n\n```tsx\nimport { Route, BrowserRouter, Routes } from \"react-router-dom\";\nimport { AuthCallback } from \"casdoor-react-sdk\";\nimport * as Setting from \"./Setting\";\nimport HomePage from \"./HomePage\";\n\nfunction App() {\n  const authCallback = (\n    \u003cAuthCallback\n      sdk={Setting.CasdoorSDK}\n      serverUrl={Setting.ServerUrl}\n      saveTokenFromResponse={(res) =\u003e {\n        // @ts-ignore\n        // save token\n        localStorage.setItem(\"token\", res.data.accessToken);\n      }}\n      isGetTokenSuccessful={(res) =\u003e {\n        // @ts-ignore\n        // according to the data returned by the server,\n        // determine whether the `token` is successfully obtained through `code` and `state`.\n        return res.success === true;\n      }}\n    /\u003e\n  );\n\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/callback\" element={authCallback} /\u003e\n        \u003cRoute path=\"/\" element={\u003cHomePage /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n\nexport default App;\n```\n\nIn your `HomePage` to determine whether you need to log in silently, if you need to log in silently, return the `SilentSignin` component, it will help you initiate a login request, and after the login is successful, it will call the `handleReceivedSilentSigninSuccessEvent` function, and when the login fails, it will also Call the `handleReceivedSilentSigninFailureEvent` function.\n\n```tsx\nimport * as Setting from \"./Setting\";\nimport { SilentSignin, isSilentSigninRequired } from \"casdoor-react-sdk\";\n\nfunction HomePage() {\n  const isLoggedIn = () =\u003e {\n    return localStorage.getItem(\"token\") !== null;\n  };\n\n  if (isSilentSigninRequired()) {\n    // if the `silentSignin` parameter exists, perform silent login processing\n    return (\n      \u003cSilentSignin\n        sdk={Setting.CasdoorSDK}\n        isLoggedIn={isLoggedIn}\n        handleReceivedSilentSigninSuccessEvent={() =\u003e {\n          // jump to the home page here and clear silentSignin parameter\n          window.location.href = \"/\";\n        }}\n        handleReceivedSilentSigninFailureEvent={() =\u003e {\n          // prompt the user to log in failed here\n          alert(\"login failed\");\n        }}\n      /\u003e\n    );\n  }\n\n  const renderContent = () =\u003e {\n    if (isLoggedIn()) {\n      return \u003cdiv\u003eHello!\u003c/div\u003e;\n    } else {\n      return \u003cdiv\u003eyou are not logged in\u003c/div\u003e;\n    }\n  };\n\n  return renderContent();\n}\n\nexport default HomePage;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasdoor%2Fcasdoor-react-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasdoor%2Fcasdoor-react-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasdoor%2Fcasdoor-react-sdk/lists"}