@logto/react 0.1.15 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -0
- package/package.json +3 -4
package/README.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Logto React SDK
|
|
2
|
+
[](https://www.npmjs.com/package/@logto/react)
|
|
3
|
+
[](https://github.com/logto-io/js/actions/workflows/main.yml)
|
|
4
|
+
[](https://app.codecov.io/gh/logto-io/js?branch=master)
|
|
5
|
+
|
|
6
|
+
The Logto React SDK written in TypeScript. Check out our [integration guide](https://docs.logto.io/integrate-sdk/react) or [docs](https://docs.logto.io/sdk/react) for more information.
|
|
7
|
+
|
|
8
|
+
We also provide [集成指南](https://docs.logto.io/zh-cn/integrate-sdk/react) and [文档](https://docs.logto.io/zh-cn/sdk/react) in Simplified Chinese.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
### Using npm
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @logto/react
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Using yarn
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
yarn add @logto/react
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Using pnpm
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm install @logto/react
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Using CDN
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Get Started
|
|
37
|
+
|
|
38
|
+
A sample project with the following code snippets can be found at [React Sample](https://github.com/logto-io/js/tree/master/packages/react-sample)
|
|
39
|
+
|
|
40
|
+
Check out the source code and try it yourself. (We use [pnpm](https://pnpm.io/) for package management)
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
pnpm i && pnpm start
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Initiate LogtoClient
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { LogtoProvider, LogtoConfig } from '@logto/react';
|
|
50
|
+
|
|
51
|
+
const App = () => {
|
|
52
|
+
const config: LogtoConfig = {
|
|
53
|
+
clientId: 'foo',
|
|
54
|
+
endpoint: 'https://your-endpoint-domain.com'
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<BrowserRouter>
|
|
59
|
+
<LogtoProvider config={config}>
|
|
60
|
+
<Routes>
|
|
61
|
+
<Route path="/" element={<Home />} />
|
|
62
|
+
<Route path="/callback" element={<Callback />} />
|
|
63
|
+
<Route
|
|
64
|
+
path="/protected-resource"
|
|
65
|
+
element={
|
|
66
|
+
<RequireAuth>
|
|
67
|
+
<ProtectedResource />
|
|
68
|
+
</RequireAuth>
|
|
69
|
+
}
|
|
70
|
+
/>
|
|
71
|
+
</Routes>
|
|
72
|
+
</LogtoProvider>
|
|
73
|
+
</BrowserRouter>
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Setup your sign-in
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { useLogto } from '@logto/react';
|
|
82
|
+
|
|
83
|
+
const SignInButton = () => {
|
|
84
|
+
const { signIn } = useLogto();
|
|
85
|
+
const redirectUrl = window.location.origin + '/callback';
|
|
86
|
+
|
|
87
|
+
return <button onClick={() => signIn(redirectUrl)}>Sign In</button>;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default SignInButton;
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Retrieve Auth Status
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { useLogto } from '@logto/react';
|
|
97
|
+
|
|
98
|
+
const App = () => {
|
|
99
|
+
const { isAuthenticated, signIn } = useLogto();
|
|
100
|
+
|
|
101
|
+
if !(isAuthenticated) {
|
|
102
|
+
return <SignInButton />
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
return <>
|
|
106
|
+
<AppContent />
|
|
107
|
+
<SignOutButton />
|
|
108
|
+
</>
|
|
109
|
+
};
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Sign out
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import React from 'react';
|
|
116
|
+
import { useLogto } from '@logto/react';
|
|
117
|
+
|
|
118
|
+
const SignOutButton = () => {
|
|
119
|
+
const { signOut } = useLogto();
|
|
120
|
+
const postLogoutRedirectUri = window.location.origin;
|
|
121
|
+
|
|
122
|
+
return <button onClick={() => signOut(postLogoutRedirectUri)}>Sign out</button>;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
export default SignOutButton;
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Resources
|
|
129
|
+
|
|
130
|
+
[](https://logto.io/)
|
|
131
|
+
[](https://docs.logto.io/docs/sdk/swift/)
|
|
132
|
+
[](https://discord.gg/UEPaF3j5e6)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@logto/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.18",
|
|
4
4
|
"main": "./lib/index.js",
|
|
5
5
|
"exports": "./lib/index.js",
|
|
6
6
|
"typings": "./lib/index.d.ts",
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
|
|
18
|
-
"preinstall": "npx only-allow pnpm",
|
|
19
18
|
"precommit": "lint-staged",
|
|
20
19
|
"build": "rm -rf lib/ && tsc -p tsconfig.build.json",
|
|
21
20
|
"lint": "eslint --ext .ts --ext .tsx src",
|
|
@@ -24,7 +23,7 @@
|
|
|
24
23
|
"prepack": "pnpm test"
|
|
25
24
|
},
|
|
26
25
|
"dependencies": {
|
|
27
|
-
"@logto/browser": "^0.1.
|
|
26
|
+
"@logto/browser": "^0.1.18",
|
|
28
27
|
"@silverhand/essentials": "^1.1.6"
|
|
29
28
|
},
|
|
30
29
|
"devDependencies": {
|
|
@@ -56,5 +55,5 @@
|
|
|
56
55
|
"publishConfig": {
|
|
57
56
|
"access": "public"
|
|
58
57
|
},
|
|
59
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "adf02e1985235ed71efc60f53281e9ab32c0f26a"
|
|
60
59
|
}
|