@slashid/remix 0.1.1
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 +238 -0
- package/dist/callback.d.ts +7 -0
- package/dist/callback.d.ts.map +1 -0
- package/dist/form.d.ts +2 -0
- package/dist/form.d.ts.map +1 -0
- package/dist/main.d.ts +7 -0
- package/dist/main.d.ts.map +1 -0
- package/dist/main.js +15910 -0
- package/dist/main.js.map +1 -0
- package/dist/root-loader.d.ts +11 -0
- package/dist/root-loader.d.ts.map +1 -0
- package/dist/slashid-app.d.ts +10 -0
- package/dist/slashid-app.d.ts.map +1 -0
- package/dist/slashid-provider.d.ts +4 -0
- package/dist/slashid-provider.d.ts.map +1 -0
- package/dist/styles.d.ts +5 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/use-slash-id.d.ts +3 -0
- package/dist/use-slash-id.d.ts.map +1 -0
- package/dist/util.d.ts +26 -0
- package/dist/util.d.ts.map +1 -0
- package/dist/verify.d.ts +6 -0
- package/dist/verify.d.ts.map +1 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Documentation
|
|
7
|
+
|
|
8
|
+
Check out our [developer docs](https://developer.slashid.dev/) for guides and API documentation.
|
|
9
|
+
|
|
10
|
+
## Setup
|
|
11
|
+
|
|
12
|
+
### Prerequisites
|
|
13
|
+
|
|
14
|
+
You will need to [sign up to SlashID](https://console.slashid.dev/) and create an organization, once you've complete this you'll find your organization ID in [Settings -> General](https://console.slashid.dev/settings/general).
|
|
15
|
+
|
|
16
|
+
Your environment should have the following dependencies installed:
|
|
17
|
+
- `node.js` => `>=20.x.x`
|
|
18
|
+
- `react` => `>=18.x.x`
|
|
19
|
+
|
|
20
|
+
### Quick start
|
|
21
|
+
|
|
22
|
+
#### 1. Install `@slashid/remix`
|
|
23
|
+
Once you have a Remix application ready to go, you need to install the SlashID Remix SDK. This SDK provides a prebuilt log-in & sign-up form, control components and hooks - tailor made for Remix.
|
|
24
|
+
```
|
|
25
|
+
npm install @slashid/remix
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
#### 2. Create SlashID app primitives
|
|
29
|
+
In your Remix application create a file `app/slashid.ts`.
|
|
30
|
+
|
|
31
|
+
In this file create the SlashID application primitives and re-export them, you'll use them later.
|
|
32
|
+
```ts
|
|
33
|
+
// app/slashid.ts
|
|
34
|
+
|
|
35
|
+
import { createSlashIDApp } from '@slashid/remix'
|
|
36
|
+
|
|
37
|
+
export const {
|
|
38
|
+
SlashIDApp,
|
|
39
|
+
slashIDRootLoader,
|
|
40
|
+
slashIDLoader
|
|
41
|
+
} = createSlashIDApp({ oid: "YOUR_ORGANIZATION_ID" });
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
Tip: `oid` is your organization ID, you can find it in the [SlashID console](https://console.slashid.dev/) under [Settings -> General](https://console.slashid.dev/settings/general).
|
|
45
|
+
|
|
46
|
+
#### 3. Configure `slashIDRootLoader`
|
|
47
|
+
To configure SlashID in your Remix application you'll need to update your root loader. With a small change you'll have easy access to authentication in all of your Remix routes.
|
|
48
|
+
|
|
49
|
+
Import the `slashIDRootLoader` you created in the previous step, invoke it and export it as `loader`.
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// root.ts
|
|
53
|
+
|
|
54
|
+
import { LoaderFunction } from "@remix-run/node";
|
|
55
|
+
import {
|
|
56
|
+
Links,
|
|
57
|
+
LiveReload,
|
|
58
|
+
Meta,
|
|
59
|
+
Outlet,
|
|
60
|
+
Scripts,
|
|
61
|
+
ScrollRestoration,
|
|
62
|
+
useLoaderData,
|
|
63
|
+
} from "@remix-run/react";
|
|
64
|
+
|
|
65
|
+
import { slashIDRootLoader } from "~/slashid";
|
|
66
|
+
|
|
67
|
+
export const loader: LoaderFunction = slashIDRootLoader();
|
|
68
|
+
|
|
69
|
+
export default function App() {
|
|
70
|
+
return (
|
|
71
|
+
<html lang="en">
|
|
72
|
+
<head>
|
|
73
|
+
<meta charSet="utf-8" />
|
|
74
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
75
|
+
<Meta />
|
|
76
|
+
<Links />
|
|
77
|
+
</head>
|
|
78
|
+
<body>
|
|
79
|
+
<Outlet />
|
|
80
|
+
<ScrollRestoration />
|
|
81
|
+
<Scripts />
|
|
82
|
+
<LiveReload />
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
If you need to load additional data via the root loader, you can simply pass a loader function to `slashIDRootLoader`. You can even check for authentication right here in the root loader.
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
// root.ts
|
|
93
|
+
|
|
94
|
+
import { slashIDRootLoader } from "~/slashid"
|
|
95
|
+
import { getUser } from '@slashid/remix'
|
|
96
|
+
|
|
97
|
+
export const loader: LoaderFunction = slashIDRootLoader((args) => {
|
|
98
|
+
const user = getUser(args)
|
|
99
|
+
|
|
100
|
+
if (user) {
|
|
101
|
+
// the user is logged in
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// fetch data
|
|
105
|
+
|
|
106
|
+
return {
|
|
107
|
+
hello: "world!" // your data
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### 4. Wrap your application body with `<SlashIDApp>`
|
|
113
|
+
In step 2 you created `SlashIDApp`, it provides authentication state to your React component tree. There is no configuration, just add it to your Remix application.
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
// root.tsx
|
|
117
|
+
|
|
118
|
+
import { SlashIDApp } from '~/slashid'
|
|
119
|
+
|
|
120
|
+
export default function App() {
|
|
121
|
+
return (
|
|
122
|
+
<html lang="en">
|
|
123
|
+
<head>
|
|
124
|
+
<meta charSet="utf-8" />
|
|
125
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
126
|
+
<Meta />
|
|
127
|
+
<Links />
|
|
128
|
+
</head>
|
|
129
|
+
<body>
|
|
130
|
+
{/* Wrap the contents of your <body> with SlashIDApp */}
|
|
131
|
+
<SlashIDApp>
|
|
132
|
+
<Outlet />
|
|
133
|
+
<ScrollRestoration />
|
|
134
|
+
<Scripts />
|
|
135
|
+
<LiveReload />
|
|
136
|
+
</SlashIDApp>
|
|
137
|
+
</body>
|
|
138
|
+
</html>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
#### 5. Create your log-in/sign-up page
|
|
144
|
+
SlashID offers a prebuilt form that works for both log-in and sign-up. Users with an account can log-in here and users without one need to simply complete the form to create their account.
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
// routes/login.tsx
|
|
148
|
+
|
|
149
|
+
import {
|
|
150
|
+
ConfigurationProvider,
|
|
151
|
+
Form,
|
|
152
|
+
type Factor,
|
|
153
|
+
} from "@slashid/remix";
|
|
154
|
+
|
|
155
|
+
const factors: Factor[] = [
|
|
156
|
+
{ method: "email_link" }
|
|
157
|
+
];
|
|
158
|
+
|
|
159
|
+
export default function LogIn() {
|
|
160
|
+
return (
|
|
161
|
+
<div style={{ width: "500px" }}>
|
|
162
|
+
<ConfigurationProvider factors={factors}>
|
|
163
|
+
<Form />
|
|
164
|
+
</ConfigurationProvider>
|
|
165
|
+
</div>
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
#### 6. Protecting your pages
|
|
170
|
+
|
|
171
|
+
##### Server side
|
|
172
|
+
To protect your routes you can use the `slashIDLoader` you created in step 2. This utility is a wrapper for your loaders that provides authentication state to your loader code.
|
|
173
|
+
|
|
174
|
+
You'll check if the user exists, and if not redirect them to the login page.
|
|
175
|
+
|
|
176
|
+
The `useSlashID()` hook provides authentication state & helper functions to your React code, here you'll implement `logOut` too.
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
// routes/_index.tsx
|
|
180
|
+
|
|
181
|
+
import { slashIDLoader } from '~/slashid'
|
|
182
|
+
import { getUser, useSlashID } from '@slashid/remix'
|
|
183
|
+
|
|
184
|
+
export const loader = slashIDLoader((args) => {
|
|
185
|
+
const user = getUser(args)
|
|
186
|
+
|
|
187
|
+
if (!user) {
|
|
188
|
+
return redirect("login")
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
return {}
|
|
192
|
+
})
|
|
193
|
+
|
|
194
|
+
export default function Index() {
|
|
195
|
+
const { logOut } = useSlashID()
|
|
196
|
+
|
|
197
|
+
return (
|
|
198
|
+
<div>
|
|
199
|
+
<h1>Index</h1>
|
|
200
|
+
<p>You are logged in!</p>
|
|
201
|
+
<button onClick={logOut}>
|
|
202
|
+
Log out
|
|
203
|
+
</button>
|
|
204
|
+
</div>
|
|
205
|
+
)
|
|
206
|
+
}
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
##### Client side
|
|
210
|
+
SlashID has several [Control Components](https://developer.slashid.dev/docs/access/react-sdk/reference/components/react-sdk-reference-loggedin) that allow you to conditionally show or hide content based on the users authentication state.
|
|
211
|
+
|
|
212
|
+
You'll implement `<LoggedIn>`, `<LoggedOut>`, and provide the option to log-out by implementing the `logOut` helper function from the `useSlashID()` hook.
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
// routes/_index.tsx
|
|
216
|
+
|
|
217
|
+
import { LoggedIn, LoggedOut, useSlashID } from '@slashid/remix'
|
|
218
|
+
import { useNavigate } from "@remix-run/react";
|
|
219
|
+
|
|
220
|
+
export default function Index() {
|
|
221
|
+
const { logOut } = useSlashID()
|
|
222
|
+
const navigate = useNavigate();
|
|
223
|
+
|
|
224
|
+
return (
|
|
225
|
+
<div>
|
|
226
|
+
<LoggedIn>
|
|
227
|
+
You are logged in!
|
|
228
|
+
<button onClick={logOut}>
|
|
229
|
+
Log out
|
|
230
|
+
</button>
|
|
231
|
+
</LoggedIn>
|
|
232
|
+
<LoggedOut>
|
|
233
|
+
{navigate("login")}
|
|
234
|
+
</LoggedOut>
|
|
235
|
+
</div>
|
|
236
|
+
)
|
|
237
|
+
}
|
|
238
|
+
```
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { LoaderFunctionArgs } from "@remix-run/server-runtime";
|
|
2
|
+
type ObjectAlike = Record<string, unknown> | null;
|
|
3
|
+
export type RootAuthLoaderCallbackReturn = Promise<Response> | Response | Promise<ObjectAlike> | ObjectAlike;
|
|
4
|
+
export type RootAuthLoaderCallback = (args: LoaderFunctionArgs) => RootAuthLoaderCallbackReturn;
|
|
5
|
+
export declare const isCallbackDefined: (callback: any) => callback is RootAuthLoaderCallback;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=callback.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"callback.d.ts","sourceRoot":"","sources":["../src/callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,4BAA4B,GACpC,OAAO,CAAC,QAAQ,CAAC,GACjB,QAAQ,GACR,OAAO,CAAC,WAAW,CAAC,GACpB,WAAW,CAAC;AAEhB,MAAM,MAAM,sBAAsB,GAAG,CACnC,IAAI,EAAE,kBAAkB,KACrB,4BAA4B,CAAC;AAElC,eAAO,MAAM,iBAAiB,aAClB,GAAG,uCAGd,CAAC"}
|
package/dist/form.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,sCAAuC,GAAG,4CAgB1D,CAAC"}
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { getUser } from "./util";
|
|
2
|
+
export { type Factor, SSR } from "@slashid/slashid";
|
|
3
|
+
export { LoggedIn, LoggedOut, ConfigurationProvider, Groups } from "@slashid/react";
|
|
4
|
+
export { createSlashIDApp } from "./slashid-app";
|
|
5
|
+
export { useSlashID } from "./use-slash-id";
|
|
6
|
+
export { Form } from "./form";
|
|
7
|
+
//# sourceMappingURL=main.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,KAAK,MAAM,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
|