refactor(core,console): align the jwt token path enum

packages/console/src/containers/ConsoleContent/index.tsx

@@ -1,3 +1,4 @@
+import { LogtoJwtTokenPath } from '@logto/schemas';
 import { useContext } from 'react';
 import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
 
@@ -28,7 +29,7 @@ import Dashboard from '@/pages/Dashboard';
 import EnterpriseSsoConnectors from '@/pages/EnterpriseSso';
 import EnterpriseSsoConnectorDetails from '@/pages/EnterpriseSsoDetails';
 import GetStarted from '@/pages/GetStarted';
-import JwtClaims, { JwtTokenType } from '@/pages/JwtClaims';
+import JwtClaims from '@/pages/JwtClaims';
 import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
 import OrganizationDetails from '@/pages/OrganizationDetails';
@@ -206,14 +207,14 @@ function ConsoleContent() {
             )}
             {isDevFeaturesEnabled && (
               <Route path="jwt-claims">
-                <Route index element={<Navigate replace to={JwtTokenType.UserAccessToken} />} />
+                <Route index element={<Navigate replace to={LogtoJwtTokenPath.AccessToken} />} />
                 <Route
-                  path={JwtTokenType.UserAccessToken}
-                  element={<JwtClaims tab={JwtTokenType.UserAccessToken} />}
+                  path={LogtoJwtTokenPath.AccessToken}
+                  element={<JwtClaims tab={LogtoJwtTokenPath.AccessToken} />}
                 />
                 <Route
-                  path={JwtTokenType.MachineToMachineAccessToken}
-                  element={<JwtClaims tab={JwtTokenType.MachineToMachineAccessToken} />}
+                  path={LogtoJwtTokenPath.ClientCredentials}
+                  element={<JwtClaims tab={LogtoJwtTokenPath.ClientCredentials} />}
                 />
               </Route>
             )}

packages/console/src/pages/JwtClaims/ScriptSection.tsx

@@ -1,18 +1,19 @@
 /* Code Editor for the custom JWT claims script. */
+import { LogtoJwtTokenPath } from '@logto/schemas';
 import { useMemo } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Card from '@/ds-components/Card';
 
 import MonacoCodeEditor, { type ModelSettings } from './MonacoCodeEditor';
-import { userJwtFile, machineToMachineJwtFile, JwtTokenType } from './config';
+import { userJwtFile, machineToMachineJwtFile } from './config';
 import * as styles from './index.module.scss';
 import { type JwtClaimsFormType } from './type';
 
 const titlePhrases = Object.freeze({
-  [JwtTokenType.UserAccessToken]: 'user_jwt',
-  [JwtTokenType.MachineToMachineAccessToken]: 'machine_to_machine_jwt',
+  [LogtoJwtTokenPath.AccessToken]: 'user_jwt',
+  [LogtoJwtTokenPath.ClientCredentials]: 'machine_to_machine_jwt',
 });
 
 function ScriptSection() {
@@ -22,7 +23,7 @@ function ScriptSection() {
   const tokenType = watch('tokenType');
 
   const activeModel = useMemo<ModelSettings>(
-    () => (tokenType === JwtTokenType.UserAccessToken ? userJwtFile : machineToMachineJwtFile),
+    () => (tokenType === LogtoJwtTokenPath.AccessToken ? userJwtFile : machineToMachineJwtFile),
     [tokenType]
   );
   return (

packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx

@@ -1,3 +1,4 @@
+import { LogtoJwtTokenPath } from '@logto/schemas';
 import { Editor } from '@monaco-editor/react';
 import classNames from 'classnames';
 import { useCallback } from 'react';
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next';
 import Table from '@/ds-components/Table';
 
 import {
-  JwtTokenType,
   userDataDescription,
   tokenDataDescription,
   fetchExternalDataEditorOptions,
@@ -55,7 +55,7 @@ function InstructionTab({ isActive }: Props) {
   return (
     <div className={classNames(styles.tabContent, isActive && styles.active)}>
       <div className={styles.description}>{t('jwt_claims.jwt_claims_description')}</div>
-      {tokenType === JwtTokenType.UserAccessToken && (
+      {tokenType === LogtoJwtTokenPath.AccessToken && (
         <GuideCard name={CardType.UserData}>
           <Table
             hasBorder

packages/console/src/pages/JwtClaims/SettingsSection/TestTab.tsx

@@ -1,3 +1,4 @@
+import { LogtoJwtTokenPath } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormContext, Controller, type ControllerRenderProps } from 'react-hook-form';
@@ -11,7 +12,6 @@
   userTokenPayloadTestModel,
   machineToMachineTokenPayloadTestModel,
   userTokenContextTestModel,
-  JwtTokenType,
 } from '../config.js';
 import { type JwtClaimsFormType } from '../type.js';
 
@@ -35,7 +35,7 @@
 
   const editorModels = useMemo(
     () =>
-      tokenType === JwtTokenType.UserAccessToken
+      tokenType === LogtoJwtTokenPath.AccessToken
         ? userTokenModelSettings
         : machineToMachineTokenModelSettings,
     [tokenType]
@@ -46,7 +46,7 @@
   }, [editorModels, tokenType]);
 
   const onTestHandler = useCallback(() => {
     // TODO: API integration, read form data and send the request to the server
   }, []);
 
   const getModelControllerProps = useCallback(

packages/console/src/pages/JwtClaims/config.tsx

@@ -5,14 +5,6 @@
 
 import type { ModelSettings } from './MonacoCodeEditor/type.js';
 
-/**
- * JWT token types
- */
-export enum JwtTokenType {
-  UserAccessToken = 'user-access-token',
-  MachineToMachineAccessToken = 'm2m-access-token',
-}
-
 /**
  * JWT token code editor configuration
  */
@@ -131,7 +123,7 @@
 /**
  * JWT claims guide card configs
  */
 // TODO: align user properties and then i18n the descriptions
 type GuideTableData = {
   value: string;
   description: string;

packages/console/src/pages/JwtClaims/index.tsx

@@ -1,4 +1,5 @@
 import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
+import { LogtoJwtTokenPath } from '@logto/schemas';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -11,44 +12,41 @@
 
 import ScriptSection from './ScriptSection';
 import SettingsSection from './SettingsSection';
-import { JwtTokenType } from './config';
 import * as styles from './index.module.scss';
 import { type JwtClaimsFormType } from './type';
 
-export { JwtTokenType } from './config';
-
 const tabPhrases = Object.freeze({
-  [JwtTokenType.UserAccessToken]: 'user_jwt_tab',
-  [JwtTokenType.MachineToMachineAccessToken]: 'machine_to_machine_jwt_tab',
+  [LogtoJwtTokenPath.AccessToken]: 'user_jwt_tab',
+  [LogtoJwtTokenPath.ClientCredentials]: 'machine_to_machine_jwt_tab',
 });
 
-const getPath = (tab: JwtTokenType) => `/jwt-claims/${tab}`;
+const getPath = (tab: LogtoJwtTokenPath) => `/jwt-claims/${tab}`;
 
 type Props = {
-  tab: JwtTokenType;
+  tab: LogtoJwtTokenPath;
 };
 
 // TODO: API integration
 function JwtClaims({ tab }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const userJwtClaimsForm = useForm<JwtClaimsFormType>({
     defaultValues: {
-      tokenType: JwtTokenType.UserAccessToken,
+      tokenType: LogtoJwtTokenPath.AccessToken,
       environmentVariables: [{ key: '', value: '' }],
     },
   });
 
   const machineToMachineJwtClaimsForm = useForm<JwtClaimsFormType>({
     defaultValues: {
-      tokenType: JwtTokenType.MachineToMachineAccessToken,
+      tokenType: LogtoJwtTokenPath.ClientCredentials,
       environmentVariables: [{ key: '', value: '' }],
     },
   });
 
   const activeForm = useMemo(
     () =>
-      tab === JwtTokenType.UserAccessToken ? userJwtClaimsForm : machineToMachineJwtClaimsForm,
+      tab === LogtoJwtTokenPath.AccessToken ? userJwtClaimsForm : machineToMachineJwtClaimsForm,
     [machineToMachineJwtClaimsForm, tab, userJwtClaimsForm]
   );
 
@@ -59,7 +57,7 @@
   } = activeForm;
 
   const onSubmitHandler = handleSubmit(async (data) => {
     // TODO: API integration
   });
 
   return (
@@ -70,7 +68,7 @@
         className={styles.header}
       />
       <TabNav className={styles.tabNav}>
-        {Object.values(JwtTokenType).map((tokenType) => (
+        {Object.values(LogtoJwtTokenPath).map((tokenType) => (
           <TabNavItem key={tokenType} href={getPath(tokenType)} isActive={tokenType === tab}>
             {t(`jwt_claims.${tabPhrases[tokenType]}`)}
           </TabNavItem>

packages/console/src/pages/JwtClaims/type.ts

@@ -1,7 +1,7 @@
-import { type JwtTokenType } from './config.js';
+import type { LogtoJwtTokenPath } from '@logto/schemas';
 
 export type JwtClaimsFormType = {
-  tokenType: JwtTokenType;
+  tokenType: LogtoJwtTokenPath;
   script?: string;
   environmentVariables?: Array<{ key: string; value: string }>;
   testSample?: {

packages/core/src/routes/logto-config.ts

@@ -15,6 +15,7 @@ import {
   jwtCustomizerAccessTokenGuard,
   jwtCustomizerClientCredentialsGuard,
   LogtoJwtTokenKey,
+  LogtoJwtTokenPath,
 } from '@logto/schemas';
 import { z } from 'zod';
 
@@ -24,11 +25,6 @@ import { exportJWK } from '#src/utils/jwks.js';
 
 import type { AuthedRouter, RouterInitArgs } from './types.js';
 
-enum LogtoJwtTokenPath {
-  AccessToken = 'access-token',
-  ClientCredentials = 'client-credentials',
-}
-
 /**
  * Provide a simple API router key type and DB config key mapping
  */

packages/schemas/src/types/jwt-customizer.ts

@@ -54,3 +54,7 @@ export const customJwtFetcherGuard = jwtCustomizerGuard
     token: jsonObjectGuard,
     context: jsonObjectGuard.optional(),
   });
+export enum LogtoJwtTokenPath {
+  AccessToken = 'access-token',
+  ClientCredentials = 'client-credentials',
+}