Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

refactor(console): upgrade mdx packages

Browse source
This commit is contained in:
Gao Sun 2024-06-26 16:32:45 +08:00
parent f2c7799ee6
commit 8fcb747032
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
39 changed files with 1521 additions and 890 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/.parcelrc
View file

@ -6,7 +6,7 @@
"@parcel/transformer-svg-react"
],
"*.{md,mdx}": [
"@parcel/transformer-mdx"
"./parcel-transformer-mdx2.js"
]
},
"compressors": {

2
packages/console/.parcelrc.arm64
View file

@ -10,7 +10,7 @@
"@parcel/transformer-svg-react"
],
"*.{md,mdx}": [
"@parcel/transformer-mdx"
"./parcel-transformer-mdx2.js"
]
},
"compressors": {

8
packages/console/package.json
View file

@ -36,12 +36,12 @@
"@logto/react": "^3.0.8",
"@logto/schemas": "workspace:^1.17.0",
"@logto/shared": "workspace:^3.1.1",
"@mdx-js/react": "^1.6.22",
"@mdx-js/mdx": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@monaco-editor/react": "^4.6.0",
"@parcel/compressor-brotli": "2.9.3",
"@parcel/compressor-gzip": "2.9.3",
"@parcel/core": "2.9.3",
"@parcel/transformer-mdx": "2.9.3",
"@parcel/transformer-sass": "2.9.3",
"@parcel/transformer-svg-react": "2.9.3",
"@silverhand/eslint-config": "6.0.1",
@ -55,8 +55,7 @@
"@types/color": "^3.0.3",
"@types/debug": "^4.1.7",
"@types/jest": "^29.4.0",
"@types/mdx": "^2.0.1",
"@types/mdx-js__react": "^1.5.5",
"@types/mdx": "^2.0.13",
"@types/react": "^18.0.31",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.0",
@ -88,6 +87,7 @@
"ky": "^1.2.3",
"libphonenumber-js": "^1.10.51",
"lint-staged": "^15.0.0",
"mermaid": "^10.9.1",
"nanoid": "^5.0.1",
"overlayscrollbars": "^2.0.2",
"overlayscrollbars-react": "^0.5.0",

57
packages/console/parcel-transformer-mdx2.js Normal file
View file

@ -0,0 +1,57 @@
// https://github.com/parcel-bundler/parcel/pull/7922#issuecomment-1750704973
import { compile } from '@mdx-js/mdx';
import { default as ThrowableDiagnostic } from '@parcel/diagnostic';
import { Transformer } from '@parcel/plugin';
export default new Transformer({
async transform({ asset }) {
const source = await asset.getCode();
let codeVFile;
try {
codeVFile = await compile(source, {
development: true,
jsx: true,
providerImportSource: '@mdx-js/react',
});
} catch (error) {
const { start, end } = error.position;
const highlight = {
message: error.reason,
start,
end,
};
if (!(end.line && end.column)) {
highlight.end = { ...start };
}
// Adjust for parser and reporter differences
highlight.start.column -= 1;
highlight.end.column -= 1;
throw new ThrowableDiagnostic({
diagnostic: {
message: 'Unable to compile MDX',
codeFrames: [
{
filePath: asset.filePath,
code: source,
codeHighlights: [highlight],
},
],
},
});
}
const code = String(codeVFile);
asset.type = 'jsx';
asset.setCode(code);
return [asset];
},
});

36
packages/console/src/assets/docs/guides/api-express/README.mdx
View file

@ -28,8 +28,7 @@ To proceed, you'll need to integrate the Logto SDK into your client application.
You'll also need to tweak the Logto SDK configuration to inform Logto that you want to request an access token for your API in this grant. Here's an example using React:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import { LogtoProvider } from '@logto/react';
const App = () => {
@ -44,13 +43,11 @@ const App = () => {
</LogtoProvider>
);
};`}
</code>
</pre>
</Code>
Once a user signs in with Logto, `isAuthenticated` within the Logto SDK will become `true`:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import { useLogto } from '@logto/react';
const Content = () => {
@ -58,13 +55,11 @@ const Content = () => {
console.log(isAuthenticated); // true
};`}
</code>
</pre>
</Code>
Now, you can use the `getAccessToken` method to retrieve an access token for your API:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`const Content = () => {
const { getAccessToken, isAuthenticated } = useLogto();
@ -75,13 +70,11 @@ Now, you can use the `getAccessToken` method to retrieve an access token for you
}
}, [isAuthenticated, getAccessToken]);
};`}
</code>
</pre>
</Code>
Lastly, include this access token in the `Authorization` header when making requests to your API:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`const Content = () => {
const { getAccessToken, isAuthenticated } = useLogto();
@ -97,8 +90,7 @@ Lastly, include this access token in the `Authorization` header when making requ
}
}, [isAuthenticated, getAccessToken]);
};`}
</code>
</pre>
</Code>
</Step>
@ -150,8 +142,7 @@ const extractBearerTokenFromHeaders = ({ authorization }: IncomingHttpHeaders) =
Subsequently, create a middleware to verify the access token:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import { createRemoteJWKSet, jwtVerify } from 'jose';
// Generate a JWKS using jwks_uri obtained from the Logto server
@ -181,8 +172,7 @@ export const authMiddleware = async (req, res, next) => {
return next();
};`}
</code>
</pre>
</Code>
You can now employ this middleware to protect your API endpoints:
@ -210,8 +200,7 @@ To address this, we can employ role-based access control (RBAC). In Logto, you c
After defining roles and permissions, you can add the `scopes` option to the `LogtoProvider` component:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`<LogtoProvider
config={{
// ...other configurations
@ -219,8 +208,7 @@ After defining roles and permissions, you can add the `scopes` option to the `Lo
scopes: ['read:products', 'write:products'], // Replace with the actual scope(s)
}}
>`}
</code>
</pre>
</Code>
Logto will then only issue an access token with the appropriate scope(s) to the user. For instance, if a user only has the `read:products` scope, the access token will solely contain that scope:

12
packages/console/src/assets/docs/guides/api-python/README.mdx
View file

@ -48,19 +48,16 @@ All the latest public Logto Authorization Configurations can be found at <code>{
e.g. You can locate the following two fields in the response body if you request the above endpoint.
</p>
<pre>
<code className="language-json">
<Code className="language-json">
{`{
"issuer": "${appendPath(props.endpoint, '/oidc')}",
"jwks_uri": "${appendPath(props.endpoint, '/oidc/jwks')}"
}`}
</code>
</pre>
</Code>
### Create the authorization validation decorator
<pre>
<code className="language-python">
<Code className="language-python">
{`"""requires-auth.py
"""
@ -105,8 +102,7 @@ def requires_auth(f):
return f(*args, **kwargs)
return decorated`}
</code>
</pre>
</Code>
<InlineNotification>
For <a href="https://docs.logto.io/docs/recipes/rbac/" target="_blank" rel="noopener">🔐 RBAC</a>, scope validation is also required.

18
packages/console/src/assets/docs/guides/api-spring-boot/README.mdx
View file

@ -59,16 +59,14 @@ Before moving on, you will need to get an issuer and a JWKS URI to verify the is
An example of the response:
<pre>
<code className="language-json">
<Code className="language-json">
{`{
// ...
"issuer": "${appendPath(props.endpoint, '/oidc')}",
"jwks_uri": "${appendPath(props.endpoint, '/oidc/jwks')}"
// ...
}`}
</code>
</pre>
</Code>
</Step>
@ -76,8 +74,7 @@ An example of the response:
Use an `application.yml` file (instead of the default `application.properties`) to configure the server port, audience, and OAuth2 resource server.
<pre>
<code className="language-yaml">
<Code className="language-yaml">
{`# path/to/project/src/main/resources/application.yaml
server:
port: 3000
@ -92,8 +89,7 @@ spring:
jwt:
issuer-uri: ${appendPath(props.endpoint, '/oidc')}
jwk-set-uri: ${appendPath(props.endpoint, '/oidc/jwks')}`}
</code>
</pre>
</Code>
- `audience`: The unique API identifier of your protected API resource.
- `spring.security.oauth2.resourceserver.jwt.issuer-uri`: The iss claim value and the issuer URI in the JWT issued by Logto.
@ -277,12 +273,10 @@ gradlew.bat bootRun
Request your protected API with the Access Token as the Bearer token in the Authorization header, e.g. execute the `curl` command.
<pre>
<code className="language-bash">
<Code className="language-bash">
{`curl --include '${appendPath(props.endpoint, '/api/profile')}' \\
--header 'Authorization: Bearer <your-access-token>'`}
</code>
</pre>
</Code>
If successful, you will get a response with 200 status:

18
packages/console/src/assets/docs/guides/native-android/README.mdx
View file

@ -55,8 +55,7 @@ Since the SDK needs internet access, you need to add the following permission to
Create a `LogtoViewModel.kt` and init `LogtoClient` in this view model:
<pre>
<code className="language-kotlin">
<Code className="language-kotlin">
{`//...with other imports
import io.logto.sdk.android.LogtoClient
import io.logto.sdk.android.type.LogtoConfig
@ -86,8 +85,7 @@ class LogtoViewModel(application: Application) : AndroidViewModel(application) {
}
}
}`}
</code>
</pre>
</Code>
then, create a `LogtoViewModel` for your `MainActivity.kt`:
@ -121,8 +119,7 @@ You can add the redirect URI in the following input field:
After the redirect URI is configured, we add a `signIn` method to your `LogtoViewModel.kt`, which will call `logtoClient.signIn` API to invoke the Logto sign-in page:
<pre>
<code className="language-kotlin">
<Code className="language-kotlin">
{`//...with other imports
class LogtoViewModel(application: Application) : AndroidViewModel(application) {
// ...other codes
@ -132,8 +129,7 @@ class LogtoViewModel(application: Application) : AndroidViewModel(application) {
}
}
}`}
</code>
</pre>
</Code>
Now setup on-click listener for the sign-in button in your `MainActivity.kt` to call the `signIn` method:
@ -205,8 +201,7 @@ In Logto SDK, we can use `logtoClient.isAuthenticated` to check the authenticati
Now, let's add a live data to `LogtoViewModel.kt` to observe the authentication status, and update the status when the user signed in or signed out:
<pre>
<code className="language-kotlin">
<Code className="language-kotlin">
{`//...with other imports
class LogtoViewModel(application: Application) : AndroidViewModel(application) {
// ...other codes
@ -232,8 +227,7 @@ class LogtoViewModel(application: Application) : AndroidViewModel(application) {
}
}
}`}
</code>
</pre>
</Code>
Then, we observe the `authenticated` live data in `MainActivity.kt`, when the user is signed in, we hide the sign-in button and show the sign-out button and vice versa:

18
packages/console/src/assets/docs/guides/native-capacitor/README.mdx
View file

@ -27,16 +27,14 @@ npm install @capacitor/browser @capacitor/app @capacitor/preferences
Add the following code to your Capacitor project:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import LogtoClient from '@logto/capacitor';
const logtoClient = new LogtoClient({
endpoint: '${props.endpoint}',
appId: '${props.app.id}',
});`}
</code>
</pre>
</Code>
</Step>
@ -50,15 +48,13 @@ Ensure that the URI redirects to the Capacitor app, for example, `com.example.ap
Remember to click on **Save changes** after updating the redirect URI. Then, add the following code to the `onClick` handler of the sign-in button:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`const onClick = async () => {
await logtoClient.signIn('${props.redirectUris[0] || 'com.example.app://callback'}');
console.log(await logtoClient.isAuthenticated()); // true
console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... }
};`}
</code>
</pre>
</Code>
</Step>
@ -108,13 +104,11 @@ The user needs to click "Done" to close the web view and return to the Capacitor
Ensure that the post sign-out redirect URI redirects to the Capacitor app. Then add the following code to the `onClick` handler of the sign-out button:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`const onClick = async () => {
await logtoClient.signOut('${props.postLogoutRedirectUris[0] || 'com.example.app://callback/sign-out'}');
};`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/native-expo/README.mdx
View file

@ -56,8 +56,7 @@ If you're installing this in a [bare React Native app](https://docs.expo.dev/bar
Import and use `LogtoProvider` to provide a Logto context:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { LogtoProvider, LogtoConfig } from '@logto/rn';
const config: LogtoConfig = {
@ -70,8 +69,7 @@ const App = () => (
<YourAppContent />
</LogtoProvider>
);`}
</code>
</pre>
</Code>
</Step>
@ -100,8 +98,7 @@ The redirect URI is used to redirect the user back to your app after they sign i
You can use `useLogto` hook to sign in and sign out:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { useLogto } from '@logto/rn';
import { Button } from 'react-native';
@ -120,8 +117,7 @@ const Content = () => {
</div>
);
};`}
</code>
</pre>
</Code>
</Step>
@ -129,8 +125,7 @@ const Content = () => {
To display the user's information, you can use the `getIdTokenClaims()` method:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { useLogto } from '@logto/rn';
import { Button, Text } from 'react-native';
@ -162,8 +157,7 @@ const Content = () => {
</div>
);
};`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/native-flutter/README.mdx
View file

@ -154,8 +154,7 @@ In order to capture the callback url from Logto's sign-in web page, you will nee
Import the `logto_dart_sdk` package and initialize the `LogtoClient` instance at the root of your application.
<pre>
<code className="language-dart">
<Code className="language-dart">
{`
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;
@ -175,8 +174,7 @@ void init() async {
);
}
`}
</code>
</pre>
</Code>
</Step>
<Step title="Sign In" subtitle="2 steps">
@ -193,14 +191,12 @@ Let's switch to the Application details page of Logto Admin Console. Add a Redir
### Implement a sign-in method
<pre>
<code className="language-dart">
<Code className="language-dart">
{`void signIn() async {
await logtoClient.signIn('${props.redirectUris[0] ?? 'io.logto://callback'}');
}
`}
</code>
</pre>
</Code>
</Step>
@ -235,8 +231,7 @@ user is signed in, the value will be `true`, otherwise, the value will be `false
Now let's wrap up the implementation and test your application.
<pre>
<code className="language-dart">
<Code className="language-dart">
{`import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;
@ -330,8 +325,7 @@ class _MyHomePageState extends State<MyHomePage> {
}
}
`}
</code>
</pre>
</Code>
</Step>

12
packages/console/src/assets/docs/guides/native-ios-swift/README.mdx
View file

@ -44,8 +44,7 @@ CocoaPods [does not support local dependency](https://github.com/CocoaPods/Cocoa
subtitle="1 step"
>
<pre>
<code className="language-swift">
<Code className="language-swift">
{`import Logto
import LogtoClient
@ -54,8 +53,7 @@ let config = try? LogtoConfig(
appId: "${props.app.id}"
)
let logtoClient = LogtoClient(useConfig: config)`}
</code>
</pre>
</Code>
By default, we store credentials like ID Token and Refresh Token in Keychain. Thus the user doesn't need to sign in again when he returns.
@ -91,8 +89,7 @@ First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
Go back to Xcode, use the following code to implement sign-in:
<pre>
<code className="language-swift">
<Code className="language-swift">
{`do {
try await client.signInWithBrowser(redirectUri: "${
props.redirectUris[0] ?? 'io.logto://callback'
@ -101,8 +98,7 @@ Go back to Xcode, use the following code to implement sign-in:
} catch let error as LogtoClientErrors.SignIn {
// error occured during sign in
}`}
</code>
</pre>
</Code>
</Step>

6
packages/console/src/assets/docs/guides/spa-angular/README.mdx
View file

@ -58,8 +58,7 @@ After signing out, it'll be great to redirect user back to your website. For exa
Back to your Angular project, add the auth provider your `app.config.ts`:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { UserScope, buildAngularAuthConfig } from '@logto/js';
import { provideAuth } from 'angular-auth-oidc-client';
@ -77,8 +76,7 @@ export const appConfig: ApplicationConfig = {
// ...other providers
],
};`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/spa-react/README.mdx
View file

@ -40,8 +40,7 @@ pnpm add @logto/react
Import and use `LogtoProvider` to provide a Logto context:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { LogtoProvider, LogtoConfig } from '@logto/react';
const config: LogtoConfig = {
@ -54,8 +53,7 @@ const App = () => (
<YourAppContent />
</LogtoProvider>
);`}
</code>
</pre>
</Code>
</Step>
@ -80,8 +78,7 @@ We provide two hooks `useHandleSignInCallback()` and `useLogto()` which can help
Go back to your IDE/editor, use the following code to implement the sign-in button:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { useLogto } from '@logto/react';
const SignIn = () => {
@ -97,8 +94,7 @@ const SignIn = () => {
</button>
);
};`}
</code>
</pre>
</Code>
### Handle redirect
@ -140,8 +136,7 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`const SignOut = () => {
const { signOut } = useLogto();
@ -153,8 +148,7 @@ After signing out, it'll be great to redirect user back to your website. Let's a
</button>
);
};`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/spa-vanilla/README.mdx
View file

@ -40,16 +40,14 @@ pnpm add @logto/browser
Import and init `LogtoClient` with configs:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import LogtoClient from '@logto/browser';
const logtoClient = new LogtoClient({
endpoint: '${props.endpoint}',
appId: '${props.app.id}',
});`}
</code>
</pre>
</Code>
</Step>
@ -72,15 +70,13 @@ First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`.
Go back to your IDE/editor, use the following code to implement the sign-in button:
<pre>
<code className="language-html">
<Code className="language-html">
{`<button onclick="logtoClient.signIn('${
props.redirectUris[0] ?? 'http://localhost:3000/callback'
}')">
Sign In
</button>`}
</code>
</pre>
</Code>
### Handle redirect
@ -119,15 +115,13 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button
<pre>
<code className="language-html">
<Code className="language-html">
{`<button onclick="logtoClient.signOut('${
props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'
}')">
Sign Out
</button>`}
</code>
</pre>
</Code>
</Step>

6
packages/console/src/assets/docs/guides/spa-vue/README.mdx
View file

@ -47,8 +47,7 @@ pnpm add @logto/vue
Import and use `createLogto` to install Logto plugin:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import { createLogto, LogtoConfig } from '@logto/vue';
const config: LogtoConfig = {
@ -60,8 +59,7 @@ const app = createApp(App);
app.use(createLogto, config);
app.mount("#app");`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/spa-webflow/README.mdx
View file

@ -22,8 +22,7 @@ In this step, we'll add global-level custom code to your Webflow site. Since NPM
Open the "Site settings" page, and navigate to the "Custom code" section. Add the following code to the "Head code" section.
<pre>
<code className="language-html">
<Code className="language-html">
{`<script type="module">
// Import \`@logto/browser\` SDK from the jsdelivr CDN
import LogtoClient from 'https://esm.run/@logto/browser';
@ -35,8 +34,7 @@ Open the "Site settings" page, and navigate to the "Custom code" section. Add th
appId: '${props.app.id}',
});
</script>`}
</code>
</pre>
</Code>
</Step>
@ -59,15 +57,13 @@ First, let’s enter your redirect URI. E.g. `https://your-awesome-site.webflow.
Return to your Webflow designer, drag and drop a "Sign in" button to the home page, and assign it an ID “sign-in” for later reference using `getElementById()`.
<pre>
<code className="language-html">
<Code className="language-html">
{`<script type="module">
const signInButton = document.getElementById('sign-in');
const onClickSignIn = () => logtoClient.signIn('${props.redirectUris[0] ?? 'https://your-awesome-site.webflow.io/callback'}');
signInButton.addEventListener('click', onClickSignIn);
</script>`}
</code>
</pre>
</Code>
### Handle redirect
@ -99,13 +95,11 @@ After signing out, it'll be great to redirect user back to your website. Let's a
Return to the Webflow designer, and add a “Sign out” button on your home page. Similarly, assign an ID “sign-out” to the button, and add the following code to the page-level custom code.
<pre>
<code className="language-js">
<Code className="language-js">
{`const signOutButton = document.getElementById('sign-out');
const onClickSignOut = () => logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'https://your-awesome-site.webflow.io'}');
signOutButton.addEventListener('click', onClickSignOut);`}
</code>
</pre>
</Code>
</Step>

6
packages/console/src/assets/docs/guides/web-dotnet-core-blazor-server/README.mdx
View file

@ -24,8 +24,7 @@ dotnet add package Logto.AspNetCore.Authentication
Open `Startup.cs` (or `Program.cs`) and add the following code to register Logto authentication middleware:
<pre>
<code className="language-csharp">
<Code className="language-csharp">
{`using Logto.AspNetCore.Authentication;
var builder = WebApplication.CreateBuilder(args);
@ -38,8 +37,7 @@ builder.Services.AddLogtoAuthentication(options =>
});
app.UseAuthentication();`}
</code>
</pre>
</Code>
The `AddLogtoAuthentication` method will do the following things:

6
packages/console/src/assets/docs/guides/web-dotnet-core-blazor-wasm/README.mdx
View file

@ -90,8 +90,7 @@ For example, set the URI to <code>{props.sampleUrls.origin + 'SignedOutCallback'
Add the following code to the `appsettings.json` file:
<pre>
<code className="language-json5">
<Code className="language-json5">
{`// ...
IdentityServer: {
Authority: '${props.endpoint}oidc',
@ -103,8 +102,7 @@ Add the following code to the `appsettings.json` file:
},
}
`}
</code>
</pre>
</Code>
</Step>

6
packages/console/src/assets/docs/guides/web-dotnet-core-mvc/README.mdx
View file

@ -24,8 +24,7 @@ dotnet add package Logto.AspNetCore.Authentication
Open `Startup.cs` (or `Program.cs`) and add the following code to register Logto authentication middleware:
<pre>
<code className="language-csharp">
<Code className="language-csharp">
{`using Logto.AspNetCore.Authentication;
var builder = WebApplication.CreateBuilder(args);
@ -38,8 +37,7 @@ builder.Services.AddLogtoAuthentication(options =>
});
app.UseAuthentication();`}
</code>
</pre>
</Code>
The `AddLogtoAuthentication` method will do the following things:

6
packages/console/src/assets/docs/guides/web-dotnet-core/README.mdx
View file

@ -24,8 +24,7 @@ dotnet add package Logto.AspNetCore.Authentication
Open `Startup.cs` (or `Program.cs`) and add the following code to register Logto authentication middleware:
<pre>
<code className="language-csharp">
<Code className="language-csharp">
{`using Logto.AspNetCore.Authentication;
var builder = WebApplication.CreateBuilder(args);
@ -38,8 +37,7 @@ builder.Services.AddLogtoAuthentication(options =>
});
app.UseAuthentication();`}
</code>
</pre>
</Code>
The `AddLogtoAuthentication` method will do the following things:

12
packages/console/src/assets/docs/guides/web-express/README.mdx
View file

@ -48,8 +48,7 @@ pnpm add @logto/express cookie-parser express-session
Import and initialize LogtoClient:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import LogtoClient from '@logto/express';
export const logtoClient = new LogtoClient({
@ -58,8 +57,7 @@ export const logtoClient = new LogtoClient({
appSecret: '${props.app.secret}',
baseUrl: 'http://localhost:3000', // Change to your own base URL
});`}
</code>
</pre>
</Code>
</Step>
@ -70,15 +68,13 @@ export const logtoClient = new LogtoClient({
The SDK requires [express-session](https://www.npmjs.com/package/express-session) to be configured in prior.
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import cookieParser from 'cookie-parser';
import session from 'express-session';
app.use(cookieParser());
app.use(session({ secret: '${generateStandardSecret()}', cookie: { maxAge: 14 * 24 * 60 * 60 } }));`}
</code>
</pre>
</Code>
</Step>

18
packages/console/src/assets/docs/guides/web-go/README.mdx
View file

@ -144,8 +144,7 @@ sessionStorage := &SessionStorage{session: session}
First, create a Logto config:
<pre>
<code className="language-go">
<Code className="language-go">
{`// main.go
func main() {
// ...
@ -158,8 +157,7 @@ func main() {
// ...
}`}
</code>
</pre>
</Code>
Then, you can create a `LogtoClient` for each user request with the Logto config above:
@ -209,8 +207,7 @@ For example, if you add `http://localhost:8080/sign-in-callback` to your Redirec
After the redirect URI is configured, we add a `sign-in` route to handle the sign-in request and also add an sign-in link on the home page:
<pre>
<code className="language-go">
<Code className="language-go">
{`//main.go
func main() {
// ...
@ -248,8 +245,7 @@ func main() {
// ...
}`}
</code>
</pre>
</Code>
Now, when your user visit `http://localhost:8080/sign-in`, the user will be redirected to the Logto sign-in page.
@ -306,8 +302,7 @@ Assuming that you add `http://localhost:8080` to the Post Sign-out Redirect URI
Now, let's add the `sign-out` route to handle the sign-out request and also add a sign-out link on the home page:
<pre>
<code className="language-go">
<Code className="language-go">
{`//main.go
func main() {
// ...
@ -346,8 +341,7 @@ func main() {
// ...
}`}
</code>
</pre>
</Code>
After the user makes a signing-out request, Logto will clear all user authentication information in the session.

6
packages/console/src/assets/docs/guides/web-java-spring-boot/README.mdx
View file

@ -67,8 +67,7 @@ For maven, include the following dependencies in your `pom.xml` file:
Register your application with Logto to get the client credentials and IdP configurations.
Add the following configuration to your `application.properties` file:
<pre>
<code className="language-properties">
<Code className="language-properties">
{`spring.security.oauth2.client.registration.logto.client-name=logto
spring.security.oauth2.client.registration.logto.client-id=${props.app.id}
spring.security.oauth2.client.registration.logto.client-secret=${props.app.secret}
@ -81,8 +80,7 @@ spring.security.oauth2.client.provider.logto.issuer-uri=${props.endpoint}oidc
spring.security.oauth2.client.provider.logto.authorization-uri=${props.endpoint}oidc/auth
spring.security.oauth2.client.provider.logto.jwk-set-uri=${props.endpoint}oidc/jwks
`}
</code>
</pre>
</Code>
</Step>

8
packages/console/src/assets/docs/guides/web-next-app-router/README.mdx
View file

@ -47,8 +47,7 @@ pnpm add @logto/next
Prepare configuration for the Logto client. Create a new file `app/logto.ts` and add the following code:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`export const logtoConfig = {
endpoint: '${props.endpoint}',
appId: '${props.app.id}',
@ -58,8 +57,7 @@ Prepare configuration for the Logto client. Create a new file `app/logto.ts` and
cookieSecure: process.env.NODE_ENV === 'production',
};
`}
</code>
</pre>
</Code>
</Step>
<Step
@ -267,4 +265,4 @@ export default async function Home() {
</Step>
</Steps>
</Steps>

6
packages/console/src/assets/docs/guides/web-next-auth/README.mdx
View file

@ -31,8 +31,7 @@ Modify your API route config of Next Auth, if you are using Pages Router, the fi
The following is an example of App Router:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import NextAuth from 'next-auth';
const handler = NextAuth({
@ -64,8 +63,7 @@ const handler = NextAuth({
});
export { handler as GET, handler as POST };`}
</code>
</pre>
</Code>
</Step>

6
packages/console/src/assets/docs/guides/web-next/README.mdx
View file

@ -47,8 +47,7 @@ pnpm add @logto/next
Import and initialize LogtoClient:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`// libraries/logto.js
import LogtoClient from '@logto/next';
@ -60,8 +59,7 @@ export const logtoClient = new LogtoClient({
cookieSecret: '${generateStandardSecret()}', // Auto-generated 32 digit secret
cookieSecure: process.env.NODE_ENV === 'production',
});`}
</code>
</pre>
</Code>
</Step>

16
packages/console/src/assets/docs/guides/web-nuxt/README.mdx
View file

@ -46,7 +46,7 @@ pnpm add @logto/nuxt
<Step title="Register Logto module">
In your Nuxt config file (`next.config.ts`), add the Logto module:
In your Nuxt config file (`nuxt.config.ts`), add the Logto module:
```ts
export default defineNuxtConfig({
@ -57,9 +57,8 @@ export default defineNuxtConfig({
The minimal configuration for the module is as follows:
<pre>
<code className="language-tsx">
{`export default defineNuxtConfig({
<Code className="language-tsx">
{`export default defineNuxtConfig({
modules: ['@logto/nuxt'],
runtimeConfig: {
logto: {
@ -71,20 +70,17 @@ The minimal configuration for the module is as follows:
},
// ...other configurations
});`}
</code>
</pre>
</Code>
Since these information are sensitive, it's recommended to use environment variables (`.env`):
<pre>
<code className="language-bash">
<Code className="language-bash">
{`NUXT_LOGTO_ENDPOINT=${props.endpoint}
NUXT_LOGTO_APP_ID=${props.app.id}
NUXT_LOGTO_APP_SECRET=${props.app.secret}
NUXT_LOGTO_COOKIE_ENCRYPTION_KEY=${cookieEncryptionKey} # Random-generated
`}
</code>
</pre>
</Code>
See [runtime config](https://nuxt.com/docs/guide/going-further/runtime-config) for more information.

24
packages/console/src/assets/docs/guides/web-php/README.mdx
View file

@ -26,8 +26,7 @@ composer require logto/sdk
Insert the following code into your PHP file:
<pre>
<code className="language-php">
<Code className="language-php">
{`use logto\sdk\LogtoClient;
use Logto\Sdk\LogtoConfig;
@ -38,8 +37,7 @@ $client = new LogtoClient(
appSecret: "${props.app.secret}",
),
);`}
</code>
</pre>
</Code>
By default, the SDK uses the built-in PHP session to store the Logto data. If you want to use other storage, you can pass a custom storage object as the second parameter:
@ -62,23 +60,19 @@ First, let’s enter your redirect URI. E.g. <code>{props.sampleUrls.callback}</
<UriInputField name="redirectUris" />
<pre>
<code className="language-php">
<Code className="language-php">
{`Route::get('/sign-in', function () {
return redirect($client->signIn('${props.redirectUris[0] || props.sampleUrls.callback}'));
});`}
</code>
</pre>
</Code>
If you want to show the sign-up page on the first screen, you can set `interactionMode` to `signUp`:
<pre>
<code className="language-php">
<Code className="language-php">
{`Route::get('/sign-in', function () {
return redirect($client->signIn('${props.redirectUris[0] || props.sampleUrls.callback}', InteractionMode::signUp));
});`}
</code>
</pre>
</Code>
Now, whenever your users visit `/sign-in`, it will start a new sign-in attempt and redirect the user to the Logto sign-in page.
@ -112,16 +106,14 @@ To clean up the Python session and Logto session, we can designate a post sign-o
And a sign-out route can be implemented as follows:
<pre>
<code className="language-php">
<Code className="language-php">
{`Route::get('/sign-out', function () {
return redirect(
// Redirect the user to the home page after a successful sign-out
$client->signOut('${props.postLogoutRedirectUris[0] || props.sampleUrls.origin}')
);
});`}
</code>
</pre>
</Code>
The post sign-out redierct URI is optional, and if not provided, the user will be redirected to a Logto default page after a successful sign-out (without redirecting back to your application).

30
packages/console/src/assets/docs/guides/web-python/README.mdx
View file

@ -24,8 +24,7 @@ pip install logto # or `poetry add logto` or whatever you use
Insert the following code into your Python file:
<pre>
<code className="language-python">
<Code className="language-python">
{`from logto import LogtoClient, LogtoConfig
client = LogtoClient(
@ -35,8 +34,7 @@ client = LogtoClient(
appSecret="${props.app.secret}",
)
)`}
</code>
</pre>
</Code>
Also replace the default memory storage with a persistent storage, for example:
@ -71,21 +69,18 @@ First, let’s enter your redirect URI. E.g. <code>{props.sampleUrls.callback}</
<UriInputField name="redirectUris" />
<pre>
<code className="language-python">
<Code className="language-python">
{`@app.route("/sign-in")
async def sign_in():
# Get the sign-in URL and redirect the user to it
return redirect(await client.signIn(
redirectUri="${props.redirectUris[0] || props.sampleUrls.callback}",
))`}
</code>
</pre>
</Code>
If you want to show the sign-up page on the first screen, you can set `interactionMode` to `signUp`:
<pre>
<code className="language-python">
<Code className="language-python">
{`@app.route("/sign-in")
async def sign_in():
# Get the sign-in URL and redirect the user to it
@ -93,8 +88,7 @@ async def sign_in():
redirectUri="${props.redirectUris[0] || props.sampleUrls.callback}",
interactionMode="signUp", # Show the sign-up page on the first screen
))`}
</code>
</pre>
</Code>
Now, whenever your users visit `/sign-in`, it will start a new sign-in attempt and redirect the user to the Logto sign-in page.
@ -104,8 +98,7 @@ Now, whenever your users visit `/sign-in`, it will start a new sign-in attempt a
After the user signs in, Logto will redirect the user to the callback URL you set in the Logto Console. In this example, we use `/callback` as the callback URL:
<pre>
<code className="language-python">
<Code className="language-python">
{`@app.route("/callback")
async def callback():
try:
@ -115,8 +108,7 @@ async def callback():
# Change this to your error handling logic
return "Error: " + str(e)
`}
</code>
</pre>
</Code>
</Step>
@ -128,8 +120,7 @@ To clean up the Python session and Logto session, we can designate a post sign-o
And a sign-out route can be implemented as follows:
<pre>
<code className="language-python">
<Code className="language-python">
{`@app.route("/sign-out")
async def sign_out():
return redirect(
@ -137,8 +128,7 @@ async def sign_out():
await client.signOut(postLogoutRedirectUri="${props.postLogoutRedirectUris[0] || props.sampleUrls.origin}")
)
`}
</code>
</pre>
</Code>
`postLogoutRedirectUri` is optional, and if not provided, the user will be redirected to a Logto default page after a successful sign-out (without redirecting back to your application).

12
packages/console/src/assets/docs/guides/web-remix/README.mdx
View file

@ -45,8 +45,7 @@ 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:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`
// services/authentication.ts
import { createCookieSessionStorage } from "@remix-run/node";
@ -58,8 +57,7 @@ const sessionStorage = createCookieSessionStorage({
secrets: '${generateStandardSecret()}', // Auto-generated secret
},
});`}
</code>
</pre>
</Code>
</Step>
@ -70,8 +68,7 @@ const sessionStorage = createCookieSessionStorage({
Use the `sessionStorage` created in the previous step to initialize LogtoClient:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`// app/services/authentication.ts
import { makeLogtoRemix } from "@logto/remix";
@ -85,8 +82,7 @@ export const logto = makeLogtoRemix(
},
{ sessionStorage }
);`}
</code>
</pre>
</Code>
</Step>

30
packages/console/src/assets/docs/guides/web-ruby/README.mdx
View file

@ -32,8 +32,7 @@ The following demonstration is for Ruby on Rails. However, you can apply the sam
In the file where you want to initialize the Logto client (e.g. a base controller or a middleware), add the following code:
<pre>
<code className="language-ruby">
<Code className="language-ruby">
{`require "logto/client"
@client = LogtoClient.new(
@ -46,13 +45,11 @@ In the file where you want to initialize the Logto client (e.g. a base controlle
storage: LogtoClient::SessionStorage.new(the_session_object)
)
end`}
</code>
</pre>
</Code>
For instance, in a Rails controller, the code might look like this:
<pre>
<code className="language-ruby">
<Code className="language-ruby">
{`# app/controllers/sample_controller.rb
require "logto/client"
@ -75,8 +72,7 @@ class SampleController < ApplicationController
)
end
end`}
</code>
</pre>
</Code>
</Step>
@ -104,26 +100,22 @@ After signing out, it'll be great to redirect user back to your website. For exa
Since the redirect URI has been set to <code>{props.redirectUris[0] || 'http://localhost:3000/callback'}</code>, it needs to be handled it in our application. In a Rails controller, you can add the following code:
</p>
<pre>
<code className="language-ruby">
<Code className="language-ruby">
{`# app/controllers/sample_controller.rb
class SampleController < ApplicationController
def ${props.redirectUris[0]?.split('/').pop() || 'callback'}
@client.handle_sign_in_callback(url: request.original_url)
end
end`}
</code>
</pre>
</Code>
And configure the route in `config/routes.rb`:
<pre>
<code className="language-ruby">
<Code className="language-ruby">
{`Rails.application.routes.draw do
get "${new URL(props.redirectUris[0] || 'http://localhost:3000/callback').pathname}", to: "sample#${props.redirectUris[0]?.split('/').pop() || 'callback'}"
end`}
</code>
</pre>
</Code>
</Step>
@ -133,8 +125,7 @@ end`}
There are various ways to invoke sign-in and sign-out in your application. For example, you can implement two routes in your Rails application:
<pre>
<code className="language-ruby">
<Code className="language-ruby">
{`# app/controllers/sample_controller.rb
class SampleController < ApplicationController
def sign_in
@ -147,8 +138,7 @@ class SampleController < ApplicationController
# ...
end`}
</code>
</pre>
</Code>
```ruby
# config/routes.rb

18
packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
View file

@ -46,8 +46,7 @@ Create a `hooks.server.ts` file in your project `src` root if you don't have one
In your `hooks.server.ts` file, add the following code to inject the Logto hook into your server:
<pre>
<code className="language-tsx">
<Code className="language-tsx">
{`import { handleLogto } from '@logto/sveltekit';
export const handle = handleLogto(
@ -60,13 +59,11 @@ export const handle = handleLogto(
encryptionKey: '${cookieEncryptionKey}', // Random-generated
}
);`}
</code>
</pre>
</Code>
Since these information are sensitive, it's recommended to use environment variables:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`import { handleLogto } from '@logto/sveltekit';
import { env } from '$env/dynamic/private';
@ -80,8 +77,7 @@ export const handle = handleLogto(
encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY,
}
);`}
</code>
</pre>
</Code>
If you have multiple hooks, you can use [the sequence() helper function](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) to chain them:
@ -126,8 +122,7 @@ After signing out, it'll be great to redirect user back to your website. For exa
In the page where you want to implement sign-in and sign-out, define the following actions:
<pre>
<code className="language-ts">
<Code className="language-ts">
{`// +page.server.ts
import type { Actions } from './$types';
@ -142,8 +137,7 @@ export const actions: Actions = {
},
};
`}
</code>
</pre>
</Code>
Then use these actions in your Svelte component:

34
packages/console/src/components/Guide/index.tsx
View file

@ -1,15 +1,12 @@
import { type ApplicationResponse } from '@logto/schemas';
import { MDXProvider } from '@mdx-js/react';
import classNames from 'classnames';
import { type LazyExoticComponent, Suspense, createContext, useContext } from 'react';
import { guides } from '@/assets/docs/guides';
import { type GuideMetadata } from '@/assets/docs/guides/types';
import Button from '@/ds-components/Button';
import CodeEditor from '@/ds-components/CodeEditor';
import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
import TextLink from '@/ds-components/TextLink';
import DetailsSummary from '@/mdx-components/DetailsSummary';
import MdxProvider from '@/mdx-components/MdxProvider';
import NotFound from '@/pages/NotFound';
import StepsSkeleton from './StepsSkeleton';
@ -66,36 +63,11 @@ function Guide({ className, guideId, isEmpty, isLoading, onClose }: Props) {
<OverlayScrollbar className={classNames(styles.content, className)}>
{isLoading && <StepsSkeleton />}
{isEmpty && !guide && <NotFound className={styles.notFound} />}
<MDXProvider
components={{
code: ({ className, children }) => {
const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? [];
return language ? (
<CodeEditor
isReadonly
// We need to transform `ts` to `typescript` for prismjs, and
// it's weird since it worked in the original Guide component.
// To be investigated.
language={language === 'ts' ? 'typescript' : language}
value={String(children).trimEnd()}
/>
) : (
<code>{String(children).trimEnd()}</code>
);
},
a: ({ children, ...props }) => (
<TextLink {...props} targetBlank>
{children}
</TextLink>
),
details: DetailsSummary,
}}
>
<MdxProvider>
<Suspense fallback={<StepsSkeleton />}>
{GuideComponent && <GuideComponent {...context} />}
</Suspense>
</MDXProvider>
</MdxProvider>
</OverlayScrollbar>
{!isApiResourceGuide && (
<nav className={styles.actionBar}>

24
packages/console/src/mdx-components/Code/index.tsx Normal file
View file

@ -0,0 +1,24 @@
import CodeEditor from '@/ds-components/CodeEditor';
import Mermaid from '../Mermaid';
export default function Code({ className, children }: JSX.IntrinsicElements['code']) {
const [, language] = /language-(\w+)/.exec(String(className ?? '')) ?? [];
if (language === 'mermaid') {
return <Mermaid>{String(children).trimEnd()}</Mermaid>;
}
return language ? (
<CodeEditor
isReadonly
// We need to transform `ts` to `typescript` for prismjs, and
// it's weird since it worked in the original Guide component.
// To be investigated.
language={language === 'ts' ? 'typescript' : language}
value={String(children).trimEnd()}
/>
) : (
<code>{String(children).trimEnd()}</code>
);
}

33
packages/console/src/mdx-components/MdxProvider/index.tsx Normal file
View file

@ -0,0 +1,33 @@
import { MDXProvider } from '@mdx-js/react';
import type React from 'react';
import TextLink from '@/ds-components/TextLink';
import Code from '../Code';
import DetailsSummary from '../DetailsSummary';
type Props = {
readonly children: React.ReactNode;
};
export default function MdxProvider({ children }: Props) {
return (
<MDXProvider
components={{
code: Code,
// Explicitly set a `Code` component since `<code />` cannot be swapped out with a
// custom component now.
// See: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474
Code,
a: ({ children, ...props }) => (
<TextLink {...props} targetBlank>
{children}
</TextLink>
),
details: DetailsSummary,
}}
>
{children}
</MDXProvider>
);
}

82
packages/console/src/mdx-components/Mermaid/index.tsx Normal file
View file

@ -0,0 +1,82 @@
import { Theme } from '@logto/schemas';
import mermaid from 'mermaid';
import { useEffect } from 'react';
import useTheme from '@/hooks/use-theme';
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose',
themeCSS: `
g.classGroup rect {
fill: #282a36;
stroke: #6272a4;
}
g.classGroup text {
fill: #f8f8f2;
}
g.classGroup line {
stroke: #f8f8f2;
stroke-width: 0.5;
}
.classLabel .box {
stroke: #21222c;
stroke-width: 3;
fill: #21222c;
opacity: 1;
}
.classLabel .label {
fill: #f1fa8c;
}
.relation {
stroke: #ff79c6;
stroke-width: 1;
}
#compositionStart, #compositionEnd {
fill: #bd93f9;
stroke: #bd93f9;
stroke-width: 1;
}
#aggregationEnd, #aggregationStart {
fill: #21222c;
stroke: #50fa7b;
stroke-width: 1;
}
#dependencyStart, #dependencyEnd {
fill: #00bcd4;
stroke: #00bcd4;
stroke-width: 1;
}
#extensionStart, #extensionEnd {
fill: #f8f8f2;
stroke: #f8f8f2;
stroke-width: 1;
}`,
fontFamily: 'Fira Code',
});
type Props = {
readonly children: string;
};
const themeToMermaidTheme = Object.freeze({
[Theme.Dark]: 'dark',
[Theme.Light]: 'default',
} satisfies Record<Theme, string>);
export default function Mermaid({ children }: Props) {
const theme = useTheme();
useEffect(() => {
mermaid.initialize({
theme: themeToMermaidTheme[theme],
});
}, [theme]);
useEffect(() => {
mermaid.contentLoaded();
}, []);
return <div className="mermaid">{children}</div>;
}

15
packages/console/src/pages/EnterpriseSsoDetails/SsoGuide/index.tsx
View file

@ -1,12 +1,11 @@
import { type SsoConnectorWithProviderConfig } from '@logto/schemas';
import { MDXProvider } from '@mdx-js/react';
import classNames from 'classnames';
import { Suspense } from 'react';
import ssoConnectorGuides from '@/assets/docs/single-sign-on';
import SsoConnectorContextProvider from '@/contexts/SsoConnectorContextProvider';
import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
import TextLink from '@/ds-components/TextLink';
import MdxProvider from '@/mdx-components/MdxProvider';
import NotFound from '@/pages/NotFound';
import * as styles from './index.module.scss';
@ -32,19 +31,11 @@ function SsoGuide({ ssoConnector, className }: Props) {
return (
<SsoConnectorContextProvider ssoConnector={ssoConnector}>
<OverlayScrollbar className={classNames(styles.content, className)}>
<MDXProvider
components={{
a: ({ children, ...props }) => (
<TextLink {...props} targetBlank>
{children}
</TextLink>
),
}}
>
<MdxProvider>
<Suspense>
<Guide />
</Suspense>
</MDXProvider>
</MdxProvider>
</OverlayScrollbar>
</SsoConnectorContextProvider>
);

1728
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff