@slashid/remix 0.1.1 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-![SlashID Remix SDK](./banner.png)
+![SlashID Remix SDK](https://raw.githubusercontent.com/slashid/javascript/main/packages/remix/banner.png)
 
 ![npm](https://img.shields.io/npm/v/@slashid/remix)
 ![build](https://github.com/slashid/javascript/actions/workflows/ci.yml/badge.svg)
@@ -7,25 +7,19 @@
 
 Check out our [developer docs](https://developer.slashid.dev/) for guides and API documentation.
 
-## Setup
+## Quick Start
 
-### Prerequisites
+`@slashid/remix` requires Remix v2.
 
-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).
+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).
 
-Your environment should have the following dependencies installed:
-- `node.js` => `>=20.x.x`
-- `react` => `>=18.x.x`
-
-### Quick start
-
-#### 1. Install `@slashid/remix`
+### 1. Install `@slashid/remix`
 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.
 ```
 npm install @slashid/remix
 ```
 
-#### 2. Create SlashID app primitives
+### 2. Create SlashID app primitives
 In your Remix application create a file `app/slashid.ts`.
 
 In this file create the SlashID application primitives and re-export them, you'll use them later.
@@ -43,7 +37,7 @@ export const {
 ```
 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).
 
-#### 3. Configure `slashIDRootLoader`
+### 3. Configure `slashIDRootLoader`
 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.
 
 Import the `slashIDRootLoader` you created in the previous step, invoke it and export it as `loader`.
@@ -109,7 +103,7 @@ export const loader: LoaderFunction = slashIDRootLoader((args) => {
 });
 ```
 
-#### 4. Wrap your application body with `<SlashIDApp>`
+### 4. Wrap your application body with `<SlashIDApp>`
 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.
 
 ```tsx
@@ -140,7 +134,7 @@ export default function App() {
 }
 ```
 
-#### 5. Create your log-in/sign-up page
+### 5. Create your log-in/sign-up page
 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.
 
 ```tsx
@@ -166,9 +160,29 @@ export default function LogIn() {
   );
 }
 ```
-#### 6. Protecting your pages
 
-##### Server side
+After the user has logged in, you might want to redirect them to another page. You can this with a loader.
+
+When authentication has complete the form will tell the loader to run again, refreshing the authentication context, and triggering the redirect.
+
+```tsx
+// routes/login.tsx
+
+import { slashIDLoader } from '~/slashid'
+
+export const loader = slashIDLoader((args) => {
+  const user = getUser(args)
+
+  if (user) {
+    return redirect("index") // redirect to your desired destination
+  }
+
+  return {}
+})
+```
+### 6. Protecting your pages
+
+#### Server side
 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.
 
 You'll check if the user exists, and if not redirect them to the login page.
@@ -206,7 +220,7 @@ export default function Index() {
 }
 ```
 
-##### Client side
+#### Client side
 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.
 
 You'll implement `<LoggedIn>`, `<LoggedOut>`, and provide the option to log-out by implementing the `logOut` helper function from the `useSlashID()` hook.