From d4ec05fc4b9ea2a47ab997b1de25febd203fed88 Mon Sep 17 00:00:00 2001
From: Sagar Subedi <33160137+sagarsubedi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 22:32:43 -0400
Subject: [PATCH] docs: correct the docs to run on remix v2 (#795)

---
 packages/remix/README.md | 64 ++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/remix/README.md b/packages/remix/README.md
index 0ff2067a..85a5eb1f 100644
--- a/packages/remix/README.md
+++ b/packages/remix/README.md
@@ -1,4 +1,5 @@
 # Logto Remix SDK
+
 [![Version](https://img.shields.io/npm/v/@logto/remix)](https://www.npmjs.com/package/@logto/remix)
 [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
 [![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
@@ -7,6 +8,8 @@ The Logto Remix SDK written in TypeScript.
 
 ## Installation
 
+**Note:** This package requires Node.js version 20 or higher.
+
 ### Using npm
 
 ```bash
@@ -30,24 +33,17 @@ pnpm add @logto/remix
 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:
 
 ```ts
-// services/authentication.ts
-import { createCookieSessionStorage } from "@remix-run/node";
+// service/auth.server.ts
+import { createCookieSessionStorage } from '@remix-run/node';
+import { makeLogtoRemix } from '@logto/remix';
 
 const sessionStorage = createCookieSessionStorage({
   cookie: {
-    name: "logto-session",
+    name: 'logto-session',
     maxAge: 14 * 24 * 60 * 60,
-    secrets: ["s3cret1"],
+    secrets: ['secr3tSession'],
   },
 });
-```
-
-Afterwards, we can initialize the SDK via:
-
-```ts
-// app/services/authentication.ts
-
-import { makeLogtoRemix } from "@logto/remix";
 
 export const logto = makeLogtoRemix(
   {
@@ -64,29 +60,29 @@ Whereas the environment variables reflect the respective configuration of the ap
 
 ### Mounting the authentication route handlers
 
-The SDK ships with a convenient function that mounts the authentication routes: sign-in, sign-in callback and the sign-out route:
+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`
 
 ```ts
-// app/routes/api/logto/$action.ts
+// routes/api.logto.$action.ts
 
-import { logto } from "../../../services/authentication";
+import { logto } from '../../service/auth.server';
 
 export const loader = logto.handleAuthRoutes({
-  "sign-in": {
-    path: "/api/logto/sign-in",
-    redirectBackTo: "/api/logto/callback",
+  'sign-in': {
+    path: '/api/logto/sign-in',
+    redirectBackTo: '/api/logto/callback',
   },
-  "sign-in-callback": {
-    path: "/api/logto/callback",
-    redirectBackTo: "/",
+  'sign-in-callback': {
+    path: '/api/logto/callback',
+    redirectBackTo: '/',
   },
-  "sign-out": {
-    path: "/api/logto/sign-out",
-    redirectBackTo: "/",
+  'sign-out': {
+    path: '/api/logto/sign-out',
+    redirectBackTo: '/',
   },
-  "sign-up": {
-    path: "/api/logto/sign-up",
-    redirectBackTo: "/api/logto/callback",
+  'sign-up': {
+    path: '/api/logto/sign-up',
+    redirectBackTo: '/api/logto/callback',
   },
 });
 ```
@@ -101,23 +97,21 @@ A typical use case is to fetch the _authentication context_ which contains infor
 
 ```ts
 // app/routes/index.tsx
-import type { LogtoContext } from "@logto/remix";
-import { LoaderFunction, json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import type { LogtoContext } from '@logto/remix';
+import { LoaderFunction, json } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
 
-import { logto } from "~/services/authentication";
+import { logto } from '../../service/auth.server';
 
 type LoaderResponse = {
   readonly context: LogtoContext;
 };
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const context = await logto.getContext({ getAccessToken: false })(
-    request
-  );
+  const context = await logto.getContext({ getAccessToken: false })(request);
 
   if (!context.isAuthenticated) {
-    return redirect("/api/logto/sign-in");
+    return redirect('/api/logto/sign-in');
   }
 
   return json<LoaderResponse>({ context });