Skip to content

Commit cd92468

Browse files
jake-slashidjake-slashid
authored
Remix: improve quickstart (#204)
1 parent 1f227a0 commit cd92468

2 files changed

Lines changed: 78 additions & 55 deletions

File tree

‎.changeset/grumpy-seas-buy.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@slashid/remix": patch
3+
---
4+
5+
Improve quick start documentation

‎packages/remix/README.md‎

Lines changed: 73 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,37 @@
77

88
Check out our [developer docs](https://developer.slashid.dev/) for guides and API documentation.
99

10-
## Setup
10+
## Quick Start
1111

12-
### Prerequisites
12+
`@slashid/remix` requires Remix v2.
1313

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-
18-
- `node.js` => `>=20.x.x`
19-
- `react` => `>=18.x.x`
20-
21-
### Quick start
22-
23-
#### 1. Install `@slashid/remix`
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).
2415

16+
### 1. Install `@slashid/remix`
2517
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.
26-
2718
```
2819
npm install @slashid/remix
2920
```
3021

31-
#### 2. Create SlashID app primitives
32-
22+
### 2. Create SlashID app primitives
3323
In your Remix application create a file `app/slashid.ts`.
3424

3525
In this file create the SlashID application primitives and re-export them, you'll use them later.
36-
3726
```ts
3827
// app/slashid.ts
3928

40-
import { createSlashIDApp } from "@slashid/remix";
29+
import { createSlashIDApp } from '@slashid/remix'
4130

42-
export const { SlashIDApp, slashIDRootLoader, slashIDLoader } =
43-
createSlashIDApp({ oid: "YOUR_ORGANIZATION_ID" });
44-
```
31+
export const {
32+
SlashIDApp,
33+
slashIDRootLoader,
34+
slashIDLoader
35+
} = createSlashIDApp({ oid: "YOUR_ORGANIZATION_ID" });
4536

37+
```
4638
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).
4739

48-
#### 3. Configure `slashIDRootLoader`
49-
40+
### 3. Configure `slashIDRootLoader`
5041
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.
5142

5243
Import the `slashIDRootLoader` you created in the previous step, invoke it and export it as `loader`.
@@ -66,9 +57,9 @@ import {
6657
} from "@remix-run/react";
6758

6859
import { slashIDRootLoader } from "~/slashid";
69-
60+
7061
export const loader: LoaderFunction = slashIDRootLoader();
71-
62+
7263
export default function App() {
7364
return (
7465
<html lang="en">
@@ -94,11 +85,11 @@ If you need to load additional data via the root loader, you can simply pass a l
9485
```ts
9586
// root.ts
9687

97-
import { slashIDRootLoader } from "~/slashid";
98-
import { getUser } from "@slashid/remix";
88+
import { slashIDRootLoader } from "~/slashid"
89+
import { getUser } from '@slashid/remix'
9990

10091
export const loader: LoaderFunction = slashIDRootLoader((args) => {
101-
const user = getUser(args);
92+
const user = getUser(args)
10293

10394
if (user) {
10495
// the user is logged in
@@ -107,19 +98,18 @@ export const loader: LoaderFunction = slashIDRootLoader((args) => {
10798
// fetch data
10899

109100
return {
110-
hello: "world!", // your data
111-
};
101+
hello: "world!" // your data
102+
}
112103
});
113104
```
114105

115-
#### 4. Wrap your application body with `<SlashIDApp>`
116-
106+
### 4. Wrap your application body with `<SlashIDApp>`
117107
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.
118108

119109
```tsx
120110
// root.tsx
121111

122-
import { SlashIDApp } from "~/slashid";
112+
import { SlashIDApp } from '~/slashid'
123113

124114
export default function App() {
125115
return (
@@ -144,16 +134,21 @@ export default function App() {
144134
}
145135
```
146136

147-
#### 5. Create your log-in/sign-up page
148-
137+
### 5. Create your log-in/sign-up page
149138
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.
150139

151140
```tsx
152141
// routes/login.tsx
153142

154-
import { ConfigurationProvider, Form, type Factor } from "@slashid/remix";
143+
import {
144+
ConfigurationProvider,
145+
Form,
146+
type Factor,
147+
} from "@slashid/remix";
155148

156-
const factors: Factor[] = [{ method: "email_link" }];
149+
const factors: Factor[] = [
150+
{ method: "email_link" }
151+
];
157152

158153
export default function LogIn() {
159154
return (
@@ -166,10 +161,28 @@ export default function LogIn() {
166161
}
167162
```
168163

169-
#### 6. Protecting your pages
164+
After the user has logged in, you might want to redirect them to another page. You can this with a loader.
170165

171-
##### Server side
166+
When authentication has complete the form will tell the loader to run again, refreshing the authentication context, and triggering the redirect.
172167

168+
```tsx
169+
// routes/login.tsx
170+
171+
import { slashIDLoader } from '~/slashid'
172+
173+
export const loader = slashIDLoader((args) => {
174+
const user = getUser(args)
175+
176+
if (user) {
177+
return redirect("index") // redirect to your desired destination
178+
}
179+
180+
return {}
181+
})
182+
```
183+
### 6. Protecting your pages
184+
185+
#### Server side
173186
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.
174187

175188
You'll check if the user exists, and if not redirect them to the login page.
@@ -179,56 +192,61 @@ The `useSlashID()` hook provides authentication state & helper functions to your
179192
```tsx
180193
// routes/_index.tsx
181194

182-
import { slashIDLoader } from "~/slashid";
183-
import { getUser, useSlashID } from "@slashid/remix";
184-
195+
import { slashIDLoader } from '~/slashid'
196+
import { getUser, useSlashID } from '@slashid/remix'
197+
185198
export const loader = slashIDLoader((args) => {
186-
const user = getUser(args);
199+
const user = getUser(args)
187200

188201
if (!user) {
189-
return redirect("login");
202+
return redirect("login")
190203
}
191204

192-
return {};
193-
});
205+
return {}
206+
})
194207

195208
export default function Index() {
196-
const { logOut } = useSlashID();
209+
const { logOut } = useSlashID()
197210

198211
return (
199212
<div>
200213
<h1>Index</h1>
201214
<p>You are logged in!</p>
202-
<button onClick={logOut}>Log out</button>
215+
<button onClick={logOut}>
216+
Log out
217+
</button>
203218
</div>
204-
);
219+
)
205220
}
206221
```
207222

208-
##### Client side
209-
223+
#### Client side
210224
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.
211225

212226
You'll implement `<LoggedIn>`, `<LoggedOut>`, and provide the option to log-out by implementing the `logOut` helper function from the `useSlashID()` hook.
213227

214228
```tsx
215229
// routes/_index.tsx
216230

217-
import { LoggedIn, LoggedOut, useSlashID } from "@slashid/remix";
231+
import { LoggedIn, LoggedOut, useSlashID } from '@slashid/remix'
218232
import { useNavigate } from "@remix-run/react";
219233

220234
export default function Index() {
221-
const { logOut } = useSlashID();
235+
const { logOut } = useSlashID()
222236
const navigate = useNavigate();
223237

224238
return (
225239
<div>
226240
<LoggedIn>
227241
You are logged in!
228-
<button onClick={logOut}>Log out</button>
242+
<button onClick={logOut}>
243+
Log out
244+
</button>
229245
</LoggedIn>
230-
<LoggedOut>{navigate("login")}</LoggedOut>
246+
<LoggedOut>
247+
{navigate("login")}
248+
</LoggedOut>
231249
</div>
232-
);
250+
)
233251
}
234252
```

0 commit comments

Comments
 (0)