@logto/remix 2.2.6 → 2.2.7
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 +29 -35
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# Logto Remix SDK
|
|
2
|
+
|
|
2
3
|
[](https://www.npmjs.com/package/@logto/remix)
|
|
3
4
|
[](https://github.com/logto-io/js/actions/workflows/main.yml)
|
|
4
5
|
[](https://app.codecov.io/gh/logto-io/js?branch=master)
|
|
@@ -7,6 +8,8 @@ The Logto Remix SDK written in TypeScript.
|
|
|
7
8
|
|
|
8
9
|
## Installation
|
|
9
10
|
|
|
11
|
+
**Note:** This package requires Node.js version 20 or higher.
|
|
12
|
+
|
|
10
13
|
### Using npm
|
|
11
14
|
|
|
12
15
|
```bash
|
|
@@ -30,24 +33,17 @@ pnpm add @logto/remix
|
|
|
30
33
|
Before initializing the SDK, we have to create a `SessionStorage` instance which takes care of the session persistence. In our case, we want to use a cookie-based session:
|
|
31
34
|
|
|
32
35
|
```ts
|
|
33
|
-
//
|
|
34
|
-
import { createCookieSessionStorage } from
|
|
36
|
+
// service/auth.server.ts
|
|
37
|
+
import { createCookieSessionStorage } from '@remix-run/node';
|
|
38
|
+
import { makeLogtoRemix } from '@logto/remix';
|
|
35
39
|
|
|
36
40
|
const sessionStorage = createCookieSessionStorage({
|
|
37
41
|
cookie: {
|
|
38
|
-
name:
|
|
42
|
+
name: 'logto-session',
|
|
39
43
|
maxAge: 14 * 24 * 60 * 60,
|
|
40
|
-
secrets: [
|
|
44
|
+
secrets: ['secr3tSession'],
|
|
41
45
|
},
|
|
42
46
|
});
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
Afterwards, we can initialize the SDK via:
|
|
46
|
-
|
|
47
|
-
```ts
|
|
48
|
-
// app/services/authentication.ts
|
|
49
|
-
|
|
50
|
-
import { makeLogtoRemix } from "@logto/remix";
|
|
51
47
|
|
|
52
48
|
export const logto = makeLogtoRemix(
|
|
53
49
|
{
|
|
@@ -64,29 +60,29 @@ Whereas the environment variables reflect the respective configuration of the ap
|
|
|
64
60
|
|
|
65
61
|
### Mounting the authentication route handlers
|
|
66
62
|
|
|
67
|
-
The SDK ships with a convenient function that mounts the authentication routes: sign-in, sign-in callback and the sign-out route
|
|
63
|
+
The SDK ships with a convenient function that mounts the authentication routes: sign-in, sign-in callback and the sign-out route. Create a file `routes/api.logto.$action.ts`
|
|
68
64
|
|
|
69
65
|
```ts
|
|
70
|
-
//
|
|
66
|
+
// routes/api.logto.$action.ts
|
|
71
67
|
|
|
72
|
-
import { logto } from
|
|
68
|
+
import { logto } from '../../service/auth.server';
|
|
73
69
|
|
|
74
70
|
export const loader = logto.handleAuthRoutes({
|
|
75
|
-
|
|
76
|
-
path:
|
|
77
|
-
redirectBackTo:
|
|
71
|
+
'sign-in': {
|
|
72
|
+
path: '/api/logto/sign-in',
|
|
73
|
+
redirectBackTo: '/api/logto/callback',
|
|
78
74
|
},
|
|
79
|
-
|
|
80
|
-
path:
|
|
81
|
-
redirectBackTo:
|
|
75
|
+
'sign-in-callback': {
|
|
76
|
+
path: '/api/logto/callback',
|
|
77
|
+
redirectBackTo: '/',
|
|
82
78
|
},
|
|
83
|
-
|
|
84
|
-
path:
|
|
85
|
-
redirectBackTo:
|
|
79
|
+
'sign-out': {
|
|
80
|
+
path: '/api/logto/sign-out',
|
|
81
|
+
redirectBackTo: '/',
|
|
86
82
|
},
|
|
87
|
-
|
|
88
|
-
path:
|
|
89
|
-
redirectBackTo:
|
|
83
|
+
'sign-up': {
|
|
84
|
+
path: '/api/logto/sign-up',
|
|
85
|
+
redirectBackTo: '/api/logto/callback',
|
|
90
86
|
},
|
|
91
87
|
});
|
|
92
88
|
```
|
|
@@ -101,23 +97,21 @@ A typical use case is to fetch the _authentication context_ which contains infor
|
|
|
101
97
|
|
|
102
98
|
```ts
|
|
103
99
|
// app/routes/index.tsx
|
|
104
|
-
import type { LogtoContext } from
|
|
105
|
-
import { LoaderFunction, json } from
|
|
106
|
-
import { useLoaderData } from
|
|
100
|
+
import type { LogtoContext } from '@logto/remix';
|
|
101
|
+
import { LoaderFunction, json } from '@remix-run/node';
|
|
102
|
+
import { useLoaderData } from '@remix-run/react';
|
|
107
103
|
|
|
108
|
-
import { logto } from
|
|
104
|
+
import { logto } from '../../service/auth.server';
|
|
109
105
|
|
|
110
106
|
type LoaderResponse = {
|
|
111
107
|
readonly context: LogtoContext;
|
|
112
108
|
};
|
|
113
109
|
|
|
114
110
|
export const loader: LoaderFunction = async ({ request }) => {
|
|
115
|
-
const context = await logto.getContext({ getAccessToken: false })(
|
|
116
|
-
request
|
|
117
|
-
);
|
|
111
|
+
const context = await logto.getContext({ getAccessToken: false })(request);
|
|
118
112
|
|
|
119
113
|
if (!context.isAuthenticated) {
|
|
120
|
-
return redirect(
|
|
114
|
+
return redirect('/api/logto/sign-in');
|
|
121
115
|
}
|
|
122
116
|
|
|
123
117
|
return json<LoaderResponse>({ context });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@logto/remix",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./lib/index.cjs",
|
|
6
6
|
"module": "./lib/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"directory": "packages/remix"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@logto/node": "^2.5.
|
|
24
|
+
"@logto/node": "^2.5.8"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@remix-run/node": "^2.0.0",
|