Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/casdoor/casdoor-react-sdk
React client SDK for Casdoor
https://github.com/casdoor/casdoor-react-sdk
auth authentication authn casdoor iam javascript js react sdk sso ts typescript
Last synced: about 16 hours ago
JSON representation
React client SDK for Casdoor
- Host: GitHub
- URL: https://github.com/casdoor/casdoor-react-sdk
- Owner: casdoor
- License: apache-2.0
- Created: 2022-08-27T17:05:55.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-08-29T09:09:33.000Z (about 1 year ago)
- Last Synced: 2024-10-31T08:23:57.560Z (15 days ago)
- Topics: auth, authentication, authn, casdoor, iam, javascript, js, react, sdk, sso, ts, typescript
- Language: TypeScript
- Homepage: https://github.com/casdoor/casdoor
- Size: 312 KB
- Stars: 12
- Watchers: 3
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# casdoor-react-sdk
[](https://npmjs.com/package/casdoor-react-sdk)
[](https://npmjs.com/package/casdoor-react-sdk)
[](https://github.com/casdoor/casdoor-react-sdk/actions/workflows/release.yaml)
[](https://codecov.io/gh/casdoor/casdoor-react-sdk)
[](https://github.com/casdoor/casdoor-react-sdk/releases/latest)
[](https://discord.gg/5rPsrAzK7S)
It can help you quickly build a silent sign-in application based on Casdoor.
We have an implemented example: [casdoor-spring-security-react-example](https://github.com/casdoor/casdoor-spring-security-react-example).
To use this sdk just follow the steps below.
### Installation
```shell
#NPM
npm i casdoor-react-sdk
#YARN
yarn add casdoor-react-sdk
```
### Use in React
Let's take a look at the following example of a silent sign-in.
First, you need to initialize the Casdoor SDK.
```ts
import Sdk from "casdoor-js-sdk";
export const ServerUrl = "http://localhost:7023";
const sdkConfig = {
serverUrl: "http://localhost:8000",
clientId: "d79fd3c4e09a309fb3f5123",
appName: "application_hnpzib",
organizationName: "organization_4emn5k",
redirectPath: "/callback",
signinPath: "/api/signin",
};
export const CasdoorSDK = new Sdk(sdkConfig);
```
Then, 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`.
> Note: Here you need to implement the `saveTokenFromResponse` and `isGetTokenSuccessful` functions.
>
> - `isGetTokenSuccessful`：you need to judge from the response data whether the request is processed successfully by the server.
> - `saveTokenFromResponse`：when your `${ServerUrl}/api/signin` api successfully returns the token, you need to save the token.
```tsx
import { Route, BrowserRouter, Routes } from "react-router-dom";
import { AuthCallback } from "casdoor-react-sdk";
import * as Setting from "./Setting";
import HomePage from "./HomePage";
function App() {
const authCallback = (
{
// @ts-ignore
// save token
localStorage.setItem("token", res.data.accessToken);
}}
isGetTokenSuccessful={(res) => {
// @ts-ignore
// according to the data returned by the server,
// determine whether the `token` is successfully obtained through `code` and `state`.
return res.success === true;
}}
/>
);
return (
} />
);
}
export default App;
```
In 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.
```tsx
import * as Setting from "./Setting";
import { SilentSignin, isSilentSigninRequired } from "casdoor-react-sdk";
function HomePage() {
const isLoggedIn = () => {
return localStorage.getItem("token") !== null;
};
if (isSilentSigninRequired()) {
// if the `silentSignin` parameter exists, perform silent login processing
return (
{
// jump to the home page here and clear silentSignin parameter
window.location.href = "/";
}}
handleReceivedSilentSigninFailureEvent={() => {
// prompt the user to log in failed here
alert("login failed");
}}
/>
);
}
const renderContent = () => {
if (isLoggedIn()) {
return
Hello!;
} else {
return you are not logged in;
}
};
return renderContent();
}
export default HomePage;
```