Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

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

Browse source 
align the jwt token path enum used in console and core
This commit is contained in:
simeng-li 2024-03-13 09:48:12 +08:00 committed by GitHub
parent 1965633bed
commit 2c5a4491ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 32 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/console/src/containers/ConsoleContent/index.tsx
View file

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

9
packages/console/src/pages/JwtClaims/ScriptSection.tsx
View file

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

4
packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx
View file

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

4
packages/console/src/pages/JwtClaims/SettingsSection/TestTab.tsx
View file

@ -1,3 +1,4 @@
import { LogtoJwtTokenPath } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { useFormContext, Controller, type ControllerRenderProps } from 'react-hook-form'; import { useFormContext, Controller, type ControllerRenderProps } from 'react-hook-form';
@ -11,7 +12,6 @@ import {
userTokenPayloadTestModel, userTokenPayloadTestModel,
machineToMachineTokenPayloadTestModel, machineToMachineTokenPayloadTestModel,
userTokenContextTestModel, userTokenContextTestModel,
JwtTokenType,
} from '../config.js'; } from '../config.js';
import { type JwtClaimsFormType } from '../type.js'; import { type JwtClaimsFormType } from '../type.js';
@ -35,7 +35,7 @@ function TestTab({ isActive }: Props) {
const editorModels = useMemo( const editorModels = useMemo(
() => () =>
tokenType === JwtTokenType.UserAccessToken tokenType === LogtoJwtTokenPath.AccessToken
? userTokenModelSettings ? userTokenModelSettings
: machineToMachineTokenModelSettings, : machineToMachineTokenModelSettings,
[tokenType] [tokenType]

8
packages/console/src/pages/JwtClaims/config.tsx
View file

@ -5,14 +5,6 @@ import UserFileIcon from '@/assets/icons/user-file-icon.svg';
import type { ModelSettings } from './MonacoCodeEditor/type.js'; 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 * JWT token code editor configuration
*/ */

20
packages/console/src/pages/JwtClaims/index.tsx
View file

@ -1,4 +1,5 @@
import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact'; import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
import { LogtoJwtTokenPath } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useForm, FormProvider } from 'react-hook-form'; import { useForm, FormProvider } from 'react-hook-form';
@ -11,21 +12,18 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
import ScriptSection from './ScriptSection'; import ScriptSection from './ScriptSection';
import SettingsSection from './SettingsSection'; import SettingsSection from './SettingsSection';
import { JwtTokenType } from './config';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
import { type JwtClaimsFormType } from './type'; import { type JwtClaimsFormType } from './type';
export { JwtTokenType } from './config';
const tabPhrases = Object.freeze({ const tabPhrases = Object.freeze({
[JwtTokenType.UserAccessToken]: 'user_jwt_tab', [LogtoJwtTokenPath.AccessToken]: 'user_jwt_tab',
[JwtTokenType.MachineToMachineAccessToken]: 'machine_to_machine_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 = { type Props = {
tab: JwtTokenType; tab: LogtoJwtTokenPath;
}; };
// TODO: API integration // TODO: API integration
@ -34,21 +32,21 @@ function JwtClaims({ tab }: Props) {
const userJwtClaimsForm = useForm<JwtClaimsFormType>({ const userJwtClaimsForm = useForm<JwtClaimsFormType>({
defaultValues: { defaultValues: {
tokenType: JwtTokenType.UserAccessToken, tokenType: LogtoJwtTokenPath.AccessToken,
environmentVariables: [{ key: '', value: '' }], environmentVariables: [{ key: '', value: '' }],
}, },
}); });
const machineToMachineJwtClaimsForm = useForm<JwtClaimsFormType>({ const machineToMachineJwtClaimsForm = useForm<JwtClaimsFormType>({
defaultValues: { defaultValues: {
tokenType: JwtTokenType.MachineToMachineAccessToken, tokenType: LogtoJwtTokenPath.ClientCredentials,
environmentVariables: [{ key: '', value: '' }], environmentVariables: [{ key: '', value: '' }],
}, },
}); });
const activeForm = useMemo( const activeForm = useMemo(
() => () =>
tab === JwtTokenType.UserAccessToken ? userJwtClaimsForm : machineToMachineJwtClaimsForm, tab === LogtoJwtTokenPath.AccessToken ? userJwtClaimsForm : machineToMachineJwtClaimsForm,
[machineToMachineJwtClaimsForm, tab, userJwtClaimsForm] [machineToMachineJwtClaimsForm, tab, userJwtClaimsForm]
); );
@ -70,7 +68,7 @@ function JwtClaims({ tab }: Props) {
className={styles.header} className={styles.header}
/> />
<TabNav className={styles.tabNav}> <TabNav className={styles.tabNav}>
{Object.values(JwtTokenType).map((tokenType) => ( {Object.values(LogtoJwtTokenPath).map((tokenType) => (
<TabNavItem key={tokenType} href={getPath(tokenType)} isActive={tokenType === tab}> <TabNavItem key={tokenType} href={getPath(tokenType)} isActive={tokenType === tab}>
{t(`jwt_claims.${tabPhrases[tokenType]}`)} {t(`jwt_claims.${tabPhrases[tokenType]}`)}
</TabNavItem> </TabNavItem>

4
packages/console/src/pages/JwtClaims/type.ts
View file

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

6
packages/core/src/routes/logto-config.ts
View file

@ -15,6 +15,7 @@ import {
jwtCustomizerAccessTokenGuard, jwtCustomizerAccessTokenGuard,
jwtCustomizerClientCredentialsGuard, jwtCustomizerClientCredentialsGuard,
LogtoJwtTokenKey, LogtoJwtTokenKey,
LogtoJwtTokenPath,
} from '@logto/schemas'; } from '@logto/schemas';
import { z } from 'zod'; import { z } from 'zod';
@ -24,11 +25,6 @@ import { exportJWK } from '#src/utils/jwks.js';
import type { AuthedRouter, RouterInitArgs } from './types.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 * Provide a simple API router key type and DB config key mapping
*/ */

4
packages/schemas/src/types/jwt-customizer.ts
View file

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