@slashid/remix 0.1.4 → 0.2.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.
Files changed (7) hide show
  1. package/README.md +44 -49
  2. package/dist/main.d.ts +1 -1
  3. package/dist/main.d.ts.map +1 -1
  4. package/dist/main.js +13056 -7645
  5. package/dist/main.js.map +1 -1
  6. package/dist/slashid-provider.d.ts.map +1 -1
  7. package/package.json +5 -5
package/README.md CHANGED
@@ -14,30 +14,32 @@ Check out our [developer docs](https://developer.slashid.dev/) for guides and AP
14
14
  You will need to [sign up to SlashID](https://console.slashid.dev/) and create an organization, once you've done this you'll find your organization ID in [Settings -> General](https://console.slashid.dev/settings/general).
15
15
 
16
16
  ### 1. Install `@slashid/remix`
17
+
17
18
  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.
19
+
18
20
  ```
19
21
  npm install @slashid/remix
20
22
  ```
21
23
 
22
24
  ### 2. Create SlashID app primitives
25
+
23
26
  In your Remix application create a file `app/slashid.ts`.
24
27
 
25
28
  In this file create the SlashID application primitives and re-export them, you'll use them later.
29
+
26
30
  ```ts
27
31
  // app/slashid.ts
28
32
 
29
- import { createSlashIDApp } from '@slashid/remix'
30
-
31
- export const {
32
- SlashIDApp,
33
- slashIDRootLoader,
34
- slashIDLoader
35
- } = createSlashIDApp({ oid: "YOUR_ORGANIZATION_ID" });
33
+ import { createSlashIDApp } from "@slashid/remix";
36
34
 
35
+ export const { SlashIDApp, slashIDRootLoader, slashIDLoader } =
36
+ createSlashIDApp({ oid: "YOUR_ORGANIZATION_ID" });
37
37
  ```
38
+
38
39
  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).
39
40
 
40
41
  ### 3. Configure `slashIDRootLoader`
42
+
41
43
  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.
42
44
 
43
45
  Import the `slashIDRootLoader` you created in the previous step, invoke it and export it as `loader`.
@@ -57,9 +59,9 @@ import {
57
59
  } from "@remix-run/react";
58
60
 
59
61
  import { slashIDRootLoader } from "~/slashid";
60
-
62
+
61
63
  export const loader: LoaderFunction = slashIDRootLoader();
62
-
64
+
63
65
  export default function App() {
64
66
  return (
65
67
  <html lang="en">
@@ -85,11 +87,11 @@ If you need to load additional data via the root loader, you can simply pass a l
85
87
  ```ts
86
88
  // root.ts
87
89
 
88
- import { slashIDRootLoader } from "~/slashid"
89
- import { getUser } from '@slashid/remix'
90
+ import { slashIDRootLoader } from "~/slashid";
91
+ import { getUser } from "@slashid/remix";
90
92
 
91
93
  export const loader: LoaderFunction = slashIDRootLoader((args) => {
92
- const user = getUser(args)
94
+ const user = getUser(args);
93
95
 
94
96
  if (user) {
95
97
  // the user is logged in
@@ -98,18 +100,19 @@ export const loader: LoaderFunction = slashIDRootLoader((args) => {
98
100
  // fetch data
99
101
 
100
102
  return {
101
- hello: "world!" // your data
102
- }
103
+ hello: "world!", // your data
104
+ };
103
105
  });
104
106
  ```
105
107
 
106
108
  ### 4. Wrap your application body with `<SlashIDApp>`
109
+
107
110
  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.
108
111
 
109
112
  ```tsx
110
113
  // root.tsx
111
114
 
112
- import { SlashIDApp } from '~/slashid'
115
+ import { SlashIDApp } from "~/slashid";
113
116
 
114
117
  export default function App() {
115
118
  return (
@@ -135,20 +138,15 @@ export default function App() {
135
138
  ```
136
139
 
137
140
  ### 5. Create your log-in/sign-up page
141
+
138
142
  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.
139
143
 
140
144
  ```tsx
141
145
  // routes/login.tsx
142
146
 
143
- import {
144
- ConfigurationProvider,
145
- Form,
146
- type Factor,
147
- } from "@slashid/remix";
147
+ import { ConfigurationProvider, Form, type Factor } from "@slashid/remix";
148
148
 
149
- const factors: Factor[] = [
150
- { method: "email_link" }
151
- ];
149
+ const factors: Factor[] = [{ method: "email_link" }];
152
150
 
153
151
  export default function LogIn() {
154
152
  return (
@@ -168,21 +166,23 @@ When authentication has complete the form will tell the loader to run again, ref
168
166
  ```tsx
169
167
  // routes/login.tsx
170
168
 
171
- import { slashIDLoader } from '~/slashid'
169
+ import { slashIDLoader } from "~/slashid";
172
170
 
173
171
  export const loader = slashIDLoader((args) => {
174
- const user = getUser(args)
172
+ const user = getUser(args);
175
173
 
176
174
  if (user) {
177
- return redirect("index") // redirect to your desired destination
175
+ return redirect("index"); // redirect to your desired destination
178
176
  }
179
177
 
180
- return {}
181
- })
178
+ return {};
179
+ });
182
180
  ```
181
+
183
182
  ### 6. Protecting your pages
184
183
 
185
184
  #### Server side
185
+
186
186
  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.
187
187
 
188
188
  You'll check if the user exists, and if not redirect them to the login page.
@@ -192,35 +192,34 @@ The `useSlashID()` hook provides authentication state & helper functions to your
192
192
  ```tsx
193
193
  // routes/_index.tsx
194
194
 
195
- import { slashIDLoader } from '~/slashid'
196
- import { getUser, useSlashID } from '@slashid/remix'
197
-
195
+ import { slashIDLoader } from "~/slashid";
196
+ import { getUser, useSlashID } from "@slashid/remix";
197
+
198
198
  export const loader = slashIDLoader((args) => {
199
- const user = getUser(args)
199
+ const user = getUser(args);
200
200
 
201
201
  if (!user) {
202
- return redirect("login")
202
+ return redirect("login");
203
203
  }
204
204
 
205
- return {}
206
- })
205
+ return {};
206
+ });
207
207
 
208
208
  export default function Index() {
209
- const { logOut } = useSlashID()
209
+ const { logOut } = useSlashID();
210
210
 
211
211
  return (
212
212
  <div>
213
213
  <h1>Index</h1>
214
214
  <p>You are logged in!</p>
215
- <button onClick={logOut}>
216
- Log out
217
- </button>
215
+ <button onClick={logOut}>Log out</button>
218
216
  </div>
219
- )
217
+ );
220
218
  }
221
219
  ```
222
220
 
223
221
  #### Client side
222
+
224
223
  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.
225
224
 
226
225
  You'll implement `<LoggedIn>`, `<LoggedOut>`, and provide the option to log-out by implementing the `logOut` helper function from the `useSlashID()` hook.
@@ -228,25 +227,21 @@ You'll implement `<LoggedIn>`, `<LoggedOut>`, and provide the option to log-out
228
227
  ```tsx
229
228
  // routes/_index.tsx
230
229
 
231
- import { LoggedIn, LoggedOut, useSlashID } from '@slashid/remix'
230
+ import { LoggedIn, LoggedOut, useSlashID } from "@slashid/remix";
232
231
  import { useNavigate } from "@remix-run/react";
233
232
 
234
233
  export default function Index() {
235
- const { logOut } = useSlashID()
234
+ const { logOut } = useSlashID();
236
235
  const navigate = useNavigate();
237
236
 
238
237
  return (
239
238
  <div>
240
239
  <LoggedIn>
241
240
  You are logged in!
242
- <button onClick={logOut}>
243
- Log out
244
- </button>
241
+ <button onClick={logOut}>Log out</button>
245
242
  </LoggedIn>
246
- <LoggedOut>
247
- {navigate("login")}
248
- </LoggedOut>
243
+ <LoggedOut>{navigate("login")}</LoggedOut>
249
244
  </div>
250
- )
245
+ );
251
246
  }
252
247
  ```
package/dist/main.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { getUser } from "./util";
2
2
  export { type Factor, SSR } from "@slashid/slashid";
3
- export { LoggedIn, LoggedOut, ConfigurationProvider, Groups } from "@slashid/react";
3
+ export { LoggedIn, LoggedOut, ConfigurationProvider, Groups, } from "@slashid/react";
4
4
  export { createSlashIDApp } from "./slashid-app";
5
5
  export { useSlashID } from "./use-slash-id";
6
6
  export { Form } from "./form";
package/dist/main.d.ts.map CHANGED
@@ -1 +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"}
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,EACL,QAAQ,EACR,SAAS,EACT,qBAAqB,EACrB,MAAM,GACP,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}