"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "how-does-logto-custom-jwt-claims-work", "hProperties": { "id": "how-does-logto-custom-jwt-claims-work" } }, "depth": 2, "value": "How does Logto custom JWT claims work?" }, { "data": { "id": "boost-your-authorization-with-custom-jwt-claims-a-practical-example", "hProperties": { "id": "boost-your-authorization-with-custom-jwt-claims-a-practical-example" } }, "depth": 2, "value": "Boost your authorization with custom JWT claims: a practical example" }, { "data": { "id": "scenario-setup", "hProperties": { "id": "scenario-setup" } }, "depth": 3, "value": "Scenario setup" }, { "data": { "id": "logto-configurations", "hProperties": { "id": "logto-configurations" } }, "depth": 3, "value": "Logto configurations" }, { "data": { "id": "check-whether-the-custom-jwt-feature-kicks-in", "hProperties": { "id": "check-whether-the-custom-jwt-feature-kicks-in" } }, "depth": 3, "value": "Check whether the custom JWT feature kicks in" }, { "data": { "id": "update-service-provider-authorization-logic", "hProperties": { "id": "update-service-provider-authorization-logic" } }, "depth": 3, "value": "Update service provider authorization logic" }, { "data": { "id": "why-use-custom-jwt-claims", "hProperties": { "id": "why-use-custom-jwt-claims" } }, "depth": 3, "value": "Why use custom JWT claims?" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 8, "words": 2423, "text": "8 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "In previous articles, we mentioned that more and more systems are using JWT-format access tokens for user authentication and access control. One of the important reasons for this is that JWT can contain some useful information, such as user roles and permissions. This information can help us pass user identity information between the server and client, thereby achieving user authentication and access control." }), "\n", _jsxs(_components.p, { children: ["Usually, the information contained in JWT is determined by the authentication server. According to the OAuth 2.0 protocol, JWT usually contains fields such as ", _jsx(_components.code, { children: "sub" }), " (subject), ", _jsx(_components.code, { children: "aud" }), " (audience), and ", _jsx(_components.code, { children: "exp" }), " (expiration time), which are commonly referred to as claims. These claims can help verify the validity of the access token."] }), "\n", _jsx(_components.p, { children: "However, there are countless scenarios where JWT is used for verification, and common JWT claims may often not meet user needs. People often think that since JWT can contain some information, can we add some information to it to make authorization easier?" }), "\n", _jsx(_components.p, { children: "The answer is YES, we can add custom claims to JWT, such as the current user's scope and subscription level. In this way, we can pass user identity information between the client and the server (here refers to the server that provides various different services, also called service provider), to achieve user authentication and access control." }), "\n", _jsxs(_components.p, { children: ["For standard JWT claims, please refer to ", _jsx(_components.a, { href: "https://datatracker.ietf.org/doc/html/rfc7519", children: "RFC7519" }), ". Logto, as an identity solution that supports both authentication and authorization, has extended the resource and scope claims on this basis to support standard ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/rbac/", children: "RBAC" }), ". Although Logto's RBAC implementation is standard, it is not simple and flexible enough to fit all use cases."] }), "\n", _jsx(_components.p, { children: "Based on this, Logto launched a new feature of customizing JWT claims, which allows users to customize additional JWT claims, so that user authentication and access control can be implemented more flexibly." }), "\n", _jsx(LogtoCloudButton, {}), "\n", _jsxs(_components.h2, { id: "how-does-logto-custom-jwt-claims-work", children: ["How does Logto custom JWT claims work?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#how-does-logto-custom-jwt-claims-work", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "You can come to the Custom JWT listing page by clicking on the \"JWT claims\" button on the sidebar." }), "\n", _jsx("center", { children: _jsx("img", { alt: "custom-jwt-listing-page", src: "https://uploads.strapi.logto.io/1/custom_jwt_listing_page_f56a88c98f.webp", width: "800" }) }), "\n", _jsx(_components.p, { children: "Let's start from adding custom claims for end-users." }), "\n", _jsxs(_components.p, { children: ["In the editor on the left, you can customize your ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " function. This method has three input parameters: ", _jsx(_components.code, { children: "token" }), ", ", _jsx(_components.code, { children: "data" }), ", and ", _jsx(_components.code, { children: "envVariables" }), "."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "token" }), " is the raw access token payload obtained based on the current end-user's credentials and your system configuration, and the user's access-related information in Logto"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "data" }), " is all the information about the user in Logto, including all the user's roles, social sign-in identities, SSO identities, organization memberships, etc."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "envVariables" }), " are the environment variables you configured in Logto for the current end-user access token usage scenario, such as API key(s) of the required external APIs, etc."] }), "\n"] }), "\n", _jsx("center", { children: _jsx("img", { alt: "details-page-user-data", src: "https://uploads.strapi.logto.io/1/details_page_user_data_a92388f24a.webp", width: "800" }) }), "\n", _jsx(_components.p, { children: "The cards on the right can be expanded to show the introduction of the corresponding parameters, and you also can set the environment variables for the current scenario here." }), "\n", _jsx("center", { children: _jsx("img", { alt: "details-page-user-test", src: "https://uploads.strapi.logto.io/1/details_page_user_test_93932f6e66.webp", width: "800" }) }), "\n", _jsx(_components.p, { children: "After reading the introductions of all the cards on the right, you can switch to the test mode, where you can edit test data and use the edited test data to check whether the behavior of the script you wrote in the code editor on the left meets your expectations." }), "\n", _jsxs(_components.p, { children: ["This is a sequence diagram showing the execution process of the ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " function when an end user initiates an authentication request to Logto and eventually obtains the JWT-format access token returned by Logto."] }), "\n", _jsxs(_components.p, { children: ["If the Custom JWT feature is not enabled, step 3 in the figure will be skipped and step 4 will be executed right after step 2 ends. At this time, Logto will assume the return value of ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " to be an empty object, and then continue to go through subsequent steps."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant U as User or user agent\n participant IdP as Logto (identity provider)\n participant SP as Service Provider\n\n autonumber\n U ->> IdP: Auth request (with credentials)\n activate IdP\n IdP-->>IdP: Validate credentials &
generate raw access token payload\n rect rgb(191, 223, 255)\n note over IdP: Custom JWT\n IdP->>IdP: Run custom JWT claims script (`getCustomJwtClaims`) &
get extra JWT claims\n end\n IdP-->>IdP: Merge raw access token payload and extra JWT claims\n IdP-->>IdP: Sign & encrypt payload to get JWT access token\n deactivate IdP\n IdP-->>U: Issue JWT-format access token\n par Get service via API\n U->>SP: service request (with JWT access token)\n SP-->>U: service response\n end\n" }) }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["For security reasons, if the JWT claims returned by Logto's ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " function already\nexist in the access token payload, these claims WILL NOT take effect and they WILL NOT be able to\noverwrite the existing claims."] }) }), "\n", _jsxs(_components.h2, { id: "boost-your-authorization-with-custom-jwt-claims-a-practical-example", children: ["Boost your authorization with custom JWT claims: a practical example", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#boost-your-authorization-with-custom-jwt-claims-a-practical-example", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In the previous section, we introduced the working principle of the Logto custom JWT. In this part, we will show you how to use Logto custom JWT claims to improve the flexibility of authorization and the performance of the service provider through a real-world example." }), "\n", _jsxs(_components.h3, { id: "scenario-setup", children: ["Scenario setup", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#scenario-setup", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "John's team developed an AI Assistant App that allows users to converse with AI robots to obtain various services." }), "\n", _jsx(_components.p, { children: "The AI robot services are divided into free and paid services. Free services include special airfare recommendations, while paid services include stock predictions." }), "\n", _jsx(_components.p, { children: "The AI Assistant App uses Logto to manage all users, which are divided into three types: free users, pre-paid users, and premium users. Free users can only use free services, pre-paid users can use all services (charged by usage), and premium users can use all services (but have rate limits to prevent malicious use)." }), "\n", _jsx(_components.p, { children: "In addition, the AI Assistant App uses Stripe to manage user payments and has its own log service to record user operation logs." }), "\n", _jsxs(_components.h3, { id: "logto-configurations", children: ["Logto configurations", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-configurations", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["We first create API resources for the AI Assistant App service and create two scopes, ", _jsx(_components.code, { children: "recommend:flight" }), " and ", _jsx(_components.code, { children: "predict:stock" }), "."] }), "\n", _jsx("center", { children: _jsx("img", { alt: "ai-assistant-app-resource", src: "https://uploads.strapi.logto.io/1/ai_assistant_app_resource_e3c2ee0f03.webp", width: "800" }) }), "\n", _jsxs(_components.p, { children: ["Then we create two ", _jsx(_components.code, { children: "roles" }), ", ", _jsx(_components.code, { children: "free-user" }), " and ", _jsx(_components.code, { children: "paid-user" }), ", and assign the corresponding scopes:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Assign the ", _jsx(_components.code, { children: "recommend:flight" }), " scope to the ", _jsx(_components.code, { children: "free-user" }), " role."] }), "\n", _jsxs(_components.li, { children: ["Assign both ", _jsx(_components.code, { children: "recommend:flight" }), " and ", _jsx(_components.code, { children: "predict:stock" }), " scopes to the ", _jsx(_components.code, { children: "paid-user" }), " role."] }), "\n"] }), "\n", _jsx("center", { children: _jsx("img", { alt: "free-user-role", src: "https://uploads.strapi.logto.io/1/free_user_role_153a0277ba.webp", width: "800" }) }), "\n", _jsx("center", { children: _jsx("img", { alt: "paid-user-role", src: "https://uploads.strapi.logto.io/1/paid_user_role_d2fa9f5db6.webp", width: "800" }) }), "\n", _jsxs(_components.p, { children: ["Finally, we create three users, ", _jsx(_components.code, { children: "free-user" }), ", ", _jsx(_components.code, { children: "prepaid-user" }), ", and ", _jsx(_components.code, { children: "premium-user" }), ", and assign the corresponding roles:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Assign the ", _jsx(_components.code, { children: "free-user" }), " role to user ", _jsx(_components.code, { children: "free-user" }), "."] }), "\n", _jsxs(_components.li, { children: ["Assign the ", _jsx(_components.code, { children: "paid-user" }), " role to users ", _jsx(_components.code, { children: "prepaid-user" }), " and ", _jsx(_components.code, { children: "premium-user" }), "."] }), "\n"] }), "\n", _jsx("center", { children: _jsx("img", { alt: "assign-free-user-role", src: "https://uploads.strapi.logto.io/1/assign_free_user_role_f7d37cb5c9.webp", width: "800" }) }), "\n", _jsx("center", { children: _jsx("img", { alt: "assign-paid-user-role", src: "https://uploads.strapi.logto.io/1/assign_paid_user_role_2dbfd74d6e.webp", width: "800" }) }), "\n", _jsxs(_components.p, { children: ["As shown in the following figure, in order to implement the authorization information required for the scenario described above, we hope to include the ", _jsx(_components.code, { children: "roles" }), ", ", _jsx(_components.code, { children: "balance" }), " and ", _jsx(_components.code, { children: "numOfCallsToday" }), " information of the currently logged-in user in the JWT. When verifying the access token in the AI Assistant App, these information can be used to quickly perform permission verification."] }), "\n", _jsx("center", { children: _jsx("img", { alt: "test-custom-jwt-claims", src: "https://uploads.strapi.logto.io/1/test_custom_jwt_claims_3fcd4c2004.webp", width: "800" }) }), "\n", _jsxs(_components.p, { children: ["After configuring the ", _jsx(_components.code, { children: "envVariables" }), ", we implement the ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " function and click the \"Run test\" button to see the result of the extra JWT claims based on the current test data."] }), "\n", _jsxs(_components.p, { children: ["Since we have not configured the test data for ", _jsx(_components.code, { children: "data.user.roles" }), " , the ", _jsx(_components.code, { children: "roles" }), " shown in the result is an empty array."] }), "\n", _jsxs(_components.h3, { id: "check-whether-the-custom-jwt-feature-kicks-in", children: ["Check whether the custom JWT feature kicks in", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#check-whether-the-custom-jwt-feature-kicks-in", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["According to the Logto configuration above, we got the corresponding results in the test. Next, we will use the sample app provided by Logto to verify whether our custom JWT is effective. Find the SDK you are familiar with at ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/", children: "Logto SDKs" }), " and deploy a sample app according to the documentation and the corresponding GitHub repo."] }), "\n", _jsxs(_components.p, { children: ["Based on the configuration we described above, taking the ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/react/", children: "React SDK" }), " as an example, we need to update the corresponding configuration in LogtoConfig:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { LogtoProvider, LogtoConfig, UserScope } from '@logto/react';\n\nconst config: LogtoConfig = {\n appId,\n endpoint,\n scopes: [\n UserScope.Email,\n UserScope.Phone,\n UserScope.CustomData,\n UserScope.Identities,\n UserScope.Organizations,\n \"recommend:flight\",\n \"predict:stock\",\n ],\n resources: [\"https://api.aiassistant.app/v1\"]\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsxs(_components.p, { children: ["After signing in user ", _jsx(_components.code, { children: "free_user" }), " to the sample app that simulates the AI Assistant App, we can see the ", _jsx(_components.code, { children: "roles" }), ", ", _jsx(_components.code, { children: "balance" }), ", ", _jsx(_components.code, { children: "numOfCallsToday" }), ", ", _jsx(_components.code, { children: "isPaidUser" }), " and ", _jsx(_components.code, { children: "isPremiumUser" }), " information we added by viewing the payload part of the JWT access token."] }), "\n", _jsx("center", { children: _jsx("img", { alt: "sample-app-access-token-preview-free", src: "https://uploads.strapi.logto.io/1/sample_app_access_token_preview_free_117a8594c8.webp", width: "400" }) }), "\n", _jsxs(_components.p, { children: ["The values of ", _jsx(_components.code, { children: "balance" }), ", ", _jsx(_components.code, { children: "numOfCallsToday" }), ", ", _jsx(_components.code, { children: "isPaidUser" }), " and ", _jsx(_components.code, { children: "isPremiumUser" }), " are consistent with previous test, and ", _jsx(_components.code, { children: "roles" }), " equals ", _jsx(_components.code, { children: "[\"free-user\"]" }), ". This is because in the actual end-user login process, we will obtain all the accessible data of the user and process it accordingly."] }), "\n", _jsx("center", { children: _jsx("img", { alt: "sample-app-access-token-preview-premium", src: "https://uploads.strapi.logto.io/1/sample_app_access_token_preview_premium_673f6f3db1.webp", width: "400" }) }), "\n", _jsxs(_components.p, { children: ["For premium users, we can see that ", _jsx(_components.code, { children: "roles" }), " is ", _jsx(_components.code, { children: "[\"paid-user\"]" }), " and both ", _jsx(_components.code, { children: "isPaidUser" }), " and ", _jsx(_components.code, { children: "isPremiumUser" }), " are ", _jsx(_components.code, { children: "true" }), "."] }), "\n", _jsxs(_components.h3, { id: "update-service-provider-authorization-logic", children: ["Update service provider authorization logic", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#update-service-provider-authorization-logic", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In the previous steps, we added custom claims based on business needs to the user access token. Next, we can use these claims to quickly perform authorization verification." }), "\n", _jsxs(Note, { children: [_jsx(_components.p, { children: "It is important to note that we do not recommend relying entirely on custom claims for authorization verification." }), _jsx(_components.p, { children: "Since the implementation of RBAC follows the principle of least privilege, in order to ensure security, the verification using custom claims should be an additional auxiliary verification based on RBAC. This is to avoid expanding the scope of user authorization permissions due to the introduction of additional custom claims." })] }), "\n", _jsxs(_components.p, { children: ["Here we provide the logic of Logto verifying JWT access tokens on the API side. The complete code implementation can be found in the ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/blob/master/packages/core/src/middleware/koa-auth/index.ts", children: "GitHub repo" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import type { IncomingHttpHeaders } from 'node:http';\n\nimport { createLocalJWKSet, jwtVerify, type JWK } from 'jose';\n\nconst extractBearerTokenFromHeaders = (\n { authorization }: IncomingHttpHeaders\n) => {\n const bearerTokenIdentifier = 'Bearer';\n\n assertThat(\n authorization,\n new RequestError({\n code: 'auth.authorization_header_missing',\n status: 401\n })\n );\n assertThat(\n authorization.startsWith(bearerTokenIdentifier),\n new RequestError(\n { code: 'auth.authorization_token_type_not_supported', status: 401 },\n { supportedTypes: [bearerTokenIdentifier] }\n )\n );\n\n return authorization.slice(bearerTokenIdentifier.length + 1);\n};\n\nconst verifyBearerTokenFromRequest = async (\n publicJwks: JWT;\n issuer: string,\n request: Request,\n audience: Optional\n): Promise => {\n try {\n // Get the public JWKs and issuer.\n const [keys, issuer] = await getKeysAndIssuer();\n const { payload } = await jwtVerify(\n extractBearerTokenFromHeaders(request.headers),\n createLocalJWKSet({ keys }),\n {\n issuer,\n audience,\n }\n );\n\n const { sub, client_id: clientId, scope = '' } = payload;\n assertThat(sub,\n new RequestError({ code: 'auth.jwt_sub_missing', status: 401 }));\n\n return { sub, clientId, scopes: z.string().parse(scope).split(' ') };\n } catch (error: unknown) {\n if (error instanceof RequestError) {\n throw error;\n }\n\n throw new RequestError(\n { code: 'auth.unauthorized', status: 401 },\n error\n );\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["You can refer to the logic of Logto API for verifying access tokens and customize it according to your own business logic. For example, for the AI Assistant App scenario described here, you can add verification logic for custom claims such as ", _jsx(_components.code, { children: "roles" }), ", ", _jsx(_components.code, { children: "balance" }), ", ", _jsx(_components.code, { children: "numOfCallsToday" }), ", ", _jsx(_components.code, { children: "isPaidUser" }), " and ", _jsx(_components.code, { children: "isPremiumUser" }), " in the ", _jsx(_components.code, { children: "verifyBearerTokenFromRequest" }), " function."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const verifyBearerTokenFromRequest = async (\n publicJwks: JWT;\n issuer: string,\n request: Request,\n audience: Optional\n): Promise => {\n try {\n // Get the public JWKs and issuer.\n const [keys, issuer] = await getKeysAndIssuer();\n const { payload } = await jwtVerify(\n extractBearerTokenFromHeaders(request.headers),\n createLocalJWKSet({ keys }),\n {\n issuer,\n audience,\n }\n );\n\n const {\n sub,\n client_id: clientId,\n roles,\n balance,\n numOfCallsToday,\n isPaidUser,\n isPremiumUser,\n scope = ''\n } = payload;\n assertThat(sub,\n new RequestError({ code: 'auth.jwt_sub_missing', status: 401 }));\n\n return {\n sub,\n clientId,\n scopes: z.string().parse(scope).split(' '),\n roles,\n balance,\n numOfCallsToday,\n isPaidUser,\n isPremiumUser\n };\n } catch (error: unknown) {\n if (error instanceof RequestError) {\n throw error;\n }\n\n throw new RequestError({ code: 'auth.unauthorized', status: 401 }, error);\n }\n};\n\nconst authorizeBearerTokenPayload = (\n payload: Payload,\n requiredScopes: string[],\n requiredRoles: string[]\n): void => {\n const {\n scope,\n roles,\n balance,\n numOfCallsToday,\n isPaidUser,\n isPremiumUser\n } = payload;\n const scopes: string[] = scope.split(' ');\n\n // RBAC validation.\n /**\n * `free-user` does not have the `predict:stock` scope, so if the API requires\n * the `predict:stock` scope, the request will be rejected directly.\n */\n assertThat(\n requiredScopes.every((scope) => payload.scopes.includes(scope)),\n new RequestError(\n { code: 'auth.insufficient_scope', status: 403 },\n { requiredScopes })\n );\n\n /** Validation on extra claims in the `payload`. */\n assertThat(\n roles.includes('paid-user') && isPaidUser,\n new RequestError({ code: 'auth.role_mismatch', status: 403 }));\n // Supporse the daily call limit is 100.\n assertThat(\n numOfCallsToday < 100,\n new RequestError({ code: 'auth.rate_limit_exceeded', status: 403 }));\n // No need to check the `balance` of premium users.\n if (isPremiumUser) {\n return;\n }\n // Can access the service only when the balance is positive.\n assertThat(\n balance > 0,\n new RequestError({ code: 'auth.balance_insufficient', status: 403 }));\n /** Validation on extra claims in the `payload`. */\n};\n" }) }), "\n", _jsx(_components.p, { children: "The above example is for the scenario where it affects the end-user login and obtaining the JWT access token. If your use case is machine-to-machine (M2M), you can also configure custom JWT claims for M2M apps separately." }), "\n", _jsx(_components.p, { children: "Configuring custom JWT for users will not affect the result of M2M apps obtaining access tokens, and vice versa." }), "\n", _jsxs(_components.p, { children: ["Due to the generality of M2M connections, Logto does not currently provide the function of the ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " method of M2M apps to accept internal data from Logto. In other aspects, the configuration method of custom JWT for M2M apps is the same as that of user apps. This article will not elaborate on it. You can use Logto's custom JWT function to get started."] }), "\n", _jsxs(_components.h3, { id: "why-use-custom-jwt-claims", children: ["Why use custom JWT claims?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#why-use-custom-jwt-claims", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We have provided the AI Assistant App scenario for John and how to use Logto's Custom JWT feature to achieve more flexible authorization verification. In this process, we can see the advantages of the Custom JWT feature:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Without the Custom JWT feature, users need to request an external API (such as what you do in ", _jsx(_components.code, { children: "getCustomJwtClaims" }), ") every time they check permissions. For the service provider that provides this API, this may increase the extra burden. With the Custom JWT feature, these information can be put directly into the JWT, reducing the frequent calls to the external API."] }), "\n", _jsx(_components.li, { children: "For service providers, the Custom JWT feature can help them verify user permissions faster, especially when the client calls the service provider frequently, improving service performance." }), "\n", _jsx(_components.li, { children: "The Custom JWT feature can help you quickly implement additional authorization information required by the business, and the information can be passed between the client and the service provider in a secure manner since JWT is self-contained and could be envrypted so that it is hard to be forged." }), "\n"] }), "\n", _jsx(Info, { children: _jsx(_components.p, { children: "It is important to note that, as we mentioned in a previous blog post, once a JWT access token is\nissued, it will not change during its validity period. Therefore, the information contained in the\ncustom JWT claims should be combined with actual business needs and avoid including information\nthat is important for authorization but changes drastically during the validity period of the\naccess token." }) }), "\n", _jsxs(_components.p, { children: ["At the same time, since ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " is executed every time a user needs Logto to issue an access token, it is necessary to avoid executing overly complex logic and external API requests with high bandwidth requirements. Otherwise, it may take too long for end-users to wait for the result of ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " during the sign-in process. If your ", _jsx(_components.code, { children: "getCustomJwtClaims" }), " returns an empty object, we strongly recommend that you temporarily delete this configuration item until you actually need to use it."] }), "\n", _jsxs(_components.h2, { id: "conclusion", children: ["Conclusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In this article, Logto has extended the basic JWT access token and extended the function of extra JWT claims to allow users to put additional end-user information into the JWT access token according to their business needs, so that after the user logs in, the user's permissions can be quickly verified." }), "\n", _jsx(_components.p, { children: "We provide the scenario of John's AI Assistant App and demonstrate how to use Logto's Custom JWT feature to achieve more flexible authorization verification. We also point out some key points of using custom JWT. In combination with actual business scenarios, users can put various user-related information into the JWT access token according to their business needs, so that the service provider can quickly verify the user's permissions." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }