mirror of
https://github.com/logto-io/logto.git
synced 2025-02-17 22:04:19 -05:00
chore(console): remove unmaintained remix guide (#6137)
This commit is contained in:
Xiao Yijun
GitHub
parent
4b9785b988
commit
08699f67c6
5 changed files with 0 additions and 203 deletions
|
|
@ -33,7 +33,6 @@ import webNuxt from './web-nuxt/index';
|
|||
import webOutline from './web-outline/index';
|
||||
import webPhp from './web-php/index';
|
||||
import webPython from './web-python/index';
|
||||
import webRemix from './web-remix/index';
|
||||
import webRuby from './web-ruby/index';
|
||||
import webRubyLogo from './web-ruby/logo.webp';
|
||||
import webSveltekit from './web-sveltekit/index';
|
||||
|
|
@ -196,13 +195,6 @@ export const guides: Readonly<Guide[]> = Object.freeze([
|
|||
Component: lazy(async () => import('./native-capacitor/README.mdx')),
|
||||
metadata: nativeCapacitor,
|
||||
},
|
||||
{
|
||||
order: 4,
|
||||
id: 'web-remix',
|
||||
Logo: lazy(async () => import('./web-remix/logo.svg')),
|
||||
Component: lazy(async () => import('./web-remix/README.mdx')),
|
||||
metadata: webRemix,
|
||||
},
|
||||
{
|
||||
order: 5,
|
||||
id: 'native-flutter',
|
||||
|
|
|
|||
|
|
@ -1,169 +0,0 @@
|
|||
import UriInputField from '@/mdx-components/UriInputField';
|
||||
import Tabs from '@mdx/components/Tabs';
|
||||
import TabItem from '@mdx/components/TabItem';
|
||||
import InlineNotification from '@/ds-components/InlineNotification';
|
||||
import { generateStandardSecret } from '@logto/shared/universal';
|
||||
import Steps from '@/mdx-components/Steps';
|
||||
import Step from '@/mdx-components/Step';
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step
|
||||
title="Add Logto SDK as a dependency"
|
||||
subtitle="Please select your favorite package manager"
|
||||
>
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```bash
|
||||
npm i @logto/remix
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```bash
|
||||
yarn add @logto/remix
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
|
||||
```bash
|
||||
pnpm add @logto/remix
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Create SessionStorage"
|
||||
subtitle="1 step"
|
||||
>
|
||||
|
||||
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:
|
||||
|
||||
|
||||
<Code className="language-ts">
|
||||
{`
|
||||
// services/authentication.ts
|
||||
import { createCookieSessionStorage } from "@remix-run/node";
|
||||
|
||||
const sessionStorage = createCookieSessionStorage({
|
||||
cookie: {
|
||||
name: "logto-session",
|
||||
maxAge: 14 * 24 * 60 * 60,
|
||||
secrets: '${generateStandardSecret()}', // Auto-generated secret
|
||||
},
|
||||
});`}
|
||||
</Code>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Init LogtoClient"
|
||||
subtitle="1 step"
|
||||
>
|
||||
|
||||
Use the `sessionStorage` created in the previous step to initialize LogtoClient:
|
||||
|
||||
<Code className="language-ts">
|
||||
{`// app/services/authentication.ts
|
||||
|
||||
import { makeLogtoRemix } from "@logto/remix";
|
||||
|
||||
export const logto = makeLogtoRemix(
|
||||
{
|
||||
endpoint: '${props.endpoint}',
|
||||
appId: '${props.app.id}',
|
||||
appSecret: '${props.app.secret}',
|
||||
baseUrl: 'http://localhost:3000', // Change to your own base URL
|
||||
},
|
||||
{ sessionStorage }
|
||||
);`}
|
||||
</Code>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Mount auth routes"
|
||||
subtitle="3 routes"
|
||||
>
|
||||
|
||||
The SDK ships with a convenient function that mounts the authentication routes: sign-in, sign-in callback and the sign-out route.
|
||||
|
||||
First, let’s enter your redirect URI. E.g. `http://localhost:3000/api/logto/sign-in-callback`.
|
||||
|
||||
<UriInputField name="redirectUris" />
|
||||
|
||||
Then mount 3 routes in your app:
|
||||
|
||||
```ts
|
||||
// app/routes/api/logto/$action.ts
|
||||
|
||||
import { logto } from "../../../services/authentication";
|
||||
|
||||
export const loader = logto.handleAuthRoutes({
|
||||
"sign-in": {
|
||||
path: "/api/logto/sign-in",
|
||||
redirectBackTo: "/api/logto/callback", // The redirect URI just entered
|
||||
},
|
||||
"sign-in-callback": {
|
||||
path: "/api/logto/callback",
|
||||
redirectBackTo: "/",
|
||||
},
|
||||
"sign-out": {
|
||||
path: "/api/logto/sign-out",
|
||||
redirectBackTo: "/",
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
As you can see, the mount process is configurable and you can adjust it for your particular route structure. The whole URL path structure can be customized via the passed configuration object.
|
||||
|
||||
When mounting the routes as described above, you can navigate your browser to `/api/logto/sign-in` and you should be redirected to your Logto instance where you have to authenticate then.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Get user profile"
|
||||
subtitle="and authentication context"
|
||||
>
|
||||
|
||||
A typical use case is to fetch the _authentication context_ which contains information about the respective user. With that information, it is possible to decide if the user is authenticated or not. The SDK exposes a function that can be used in a Remix `loader` function:
|
||||
|
||||
```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 { logto } from "~/services/authentication";
|
||||
|
||||
type LoaderResponse = {
|
||||
readonly context: LogtoContext;
|
||||
};
|
||||
|
||||
export const loader: LoaderFunction = async ({ request }) => {
|
||||
const context = await logto.getContext({ getAccessToken: false })(
|
||||
request
|
||||
);
|
||||
|
||||
if (!context.isAuthenticated) {
|
||||
return redirect("/api/logto/sign-in");
|
||||
}
|
||||
|
||||
return json<LoaderResponse>({ context });
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
const data = useLoaderData<LoaderResponse>();
|
||||
|
||||
return <div>Protected Route.</div>;
|
||||
};
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"order": 4
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { ApplicationType } from '@logto/schemas';
|
||||
|
||||
import { type GuideMetadata } from '../types';
|
||||
|
||||
const metadata: Readonly<GuideMetadata> = Object.freeze({
|
||||
name: 'Remix',
|
||||
description:
|
||||
'Remix is a modern SSR full stack web framework that lets you focus on the user interface and work back through web standards.',
|
||||
target: ApplicationType.Traditional,
|
||||
});
|
||||
|
||||
export default metadata;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_129_35385)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9908 32.1354C36.261 35.6016 36.261 37.2264 36.261 39H28.2352C28.2352 38.6138 28.2421 38.2602 28.249 37.902C28.2708 36.7878 28.2934 35.6262 28.1128 33.2802C27.8742 29.8456 26.394 29.0825 23.6725 29.0825H21.2614H11.0498V22.8335H24.0544C27.4921 22.8335 29.211 21.7886 29.211 19.0219C29.211 16.5891 27.4921 15.1148 24.0544 15.1148H11.0498V9H25.4868C33.2694 9 37.1368 12.673 37.1368 18.5404C37.1368 22.9289 34.4154 25.791 30.7389 26.268C33.8424 26.8883 35.6568 28.6532 35.9908 32.1354Z" fill="black"/>
|
||||
<path d="M11.0498 39.0002V34.3418H19.5358C20.9533 34.3418 21.261 35.3924 21.261 36.0188V39.0002H11.0498Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_129_35385">
|
||||
<rect width="30" height="30" fill="white" transform="translate(9 9)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 947 B |
Loading…
Add table
Reference in a new issue