From 3034e899b9284a1e1bf4c89c6325b695338a3863 Mon Sep 17 00:00:00 2001 From: wangsijie Date: Tue, 20 Feb 2024 16:56:21 +0800 Subject: [PATCH] feat(console): add localhost notice (#5412) --- .../ds-components/TextInput/index.module.scss | 5 ++ .../src/ds-components/TextInput/index.tsx | 4 +- .../components/SessionForm.module.scss | 8 ++ .../components/SessionForm.tsx | 78 ++++++++++++++++++ .../ProtectedAppSettings/index.module.scss | 9 -- .../ProtectedAppSettings/index.tsx | 82 ++++++++----------- .../components/ProtectedAppForm/index.tsx | 35 ++++++-- .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 2 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../admin-console/protected-app.ts | 3 + .../toolkit/core-kit/src/utils/url.test.ts | 17 +++- packages/toolkit/core-kit/src/utils/url.ts | 9 ++ 24 files changed, 224 insertions(+), 67 deletions(-) create mode 100644 packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.module.scss create mode 100644 packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.tsx diff --git a/packages/console/src/ds-components/TextInput/index.module.scss b/packages/console/src/ds-components/TextInput/index.module.scss index 9e1141dc9..373703c98 100644 --- a/packages/console/src/ds-components/TextInput/index.module.scss +++ b/packages/console/src/ds-components/TextInput/index.module.scss @@ -124,4 +124,9 @@ font: var(--font-body-2); color: var(--color-error); margin-top: _.unit(1); + + a { + color: var(--color-error); + text-decoration: underline; + } } diff --git a/packages/console/src/ds-components/TextInput/index.tsx b/packages/console/src/ds-components/TextInput/index.tsx index 31e378535..1fb584176 100644 --- a/packages/console/src/ds-components/TextInput/index.tsx +++ b/packages/console/src/ds-components/TextInput/index.tsx @@ -19,7 +19,7 @@ import IconButton from '@/ds-components/IconButton'; import * as styles from './index.module.scss'; type Props = Omit, 'size'> & { - error?: string | boolean; + error?: string | boolean | ReactElement; icon?: ReactElement; /** * An element to be rendered on the right side of the input. @@ -116,7 +116,7 @@ function TextInput( ), })} - {Boolean(error) && typeof error === 'string' && ( + {Boolean(error) && typeof error !== 'boolean' && (
{error}
)} diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.module.scss new file mode 100644 index 000000000..ac66e92ee --- /dev/null +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.module.scss @@ -0,0 +1,8 @@ +.sessionDuration { + width: 135px; + + input { + width: 86px; + flex: unset; + } +} diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.tsx new file mode 100644 index 000000000..af0e1911d --- /dev/null +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/components/SessionForm.tsx @@ -0,0 +1,78 @@ +import { type Application, type SnakeCaseOidcConfig } from '@logto/schemas'; +import { type ChangeEvent } from 'react'; +import { Controller, useFormContext } from 'react-hook-form'; +import useSWRImmutable from 'swr/immutable'; + +import FormCard from '@/components/FormCard'; +import { openIdProviderConfigPath } from '@/consts/oidc'; +import FormField from '@/ds-components/FormField'; +import NumericInput from '@/ds-components/TextInput/NumericInput'; +import { type RequestError } from '@/hooks/use-api'; + +import { type ApplicationForm } from '../../utils'; + +import * as styles from './SessionForm.module.scss'; + +type Props = { + data: Application; +}; + +const maxSessionDuration = 365; // 1 year + +function SessionForm({ data }: Props) { + const { data: oidcConfig } = useSWRImmutable( + openIdProviderConfigPath + ); + + const { + control, + formState: { errors }, + } = useFormContext(); + + if (!data.protectedAppMetadata || !oidcConfig) { + return null; + } + + return ( + + + ( + ) => { + onChange(value && Number(value)); + }} + onValueUp={() => { + onChange(value + 1); + }} + onValueDown={() => { + onChange(value - 1); + }} + onBlur={() => { + if (value < 1) { + onChange(1); + } else if (value > maxSessionDuration) { + onChange(maxSessionDuration); + } + }} + /> + )} + /> + + + ); +} + +export default SessionForm; diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss index 1bdd48d76..c2e979428 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss @@ -98,15 +98,6 @@ gap: _.unit(3) _.unit(6); } -.sessionDuration { - width: 135px; - - input { - width: 86px; - flex: unset; - } -} - .tip { ol { margin: 0; diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx index c9a57dfb3..87e540119 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx @@ -1,4 +1,4 @@ -import { isValidRegEx, validateUriOrigin } from '@logto/core-kit'; +import { isLocalhost, isValidRegEx, validateUriOrigin } from '@logto/core-kit'; import { DomainStatus, type Application, @@ -7,8 +7,8 @@ import { } from '@logto/schemas'; import { cond } from '@silverhand/essentials'; import classNames from 'classnames'; -import { type ChangeEvent, useState, useEffect } from 'react'; -import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { useState, useEffect } from 'react'; +import { useFieldArray, useFormContext } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; import useSWR from 'swr'; import useSWRImmutable from 'swr/immutable'; @@ -25,7 +25,6 @@ import FormField from '@/ds-components/FormField'; import InlineNotification from '@/ds-components/InlineNotification'; import Spacer from '@/ds-components/Spacer'; import TextInput from '@/ds-components/TextInput'; -import NumericInput from '@/ds-components/TextInput/NumericInput'; import TextLink from '@/ds-components/TextLink'; import useApi, { type RequestError } from '@/hooks/use-api'; import useDocumentationUrl from '@/hooks/use-documentation-url'; @@ -35,6 +34,7 @@ import CustomDomain from '@/pages/TenantSettings/TenantDomainSettings/CustomDoma import EndpointsAndCredentials from '../EndpointsAndCredentials'; import { type ApplicationForm } from '../utils'; +import SessionForm from './components/SessionForm'; import * as styles from './index.module.scss'; type Props = { @@ -42,7 +42,6 @@ type Props = { }; const routes = Object.freeze(['/register', '/sign-in', '/sign-in-callback', '/sign-out']); -const maxSessionDuration = 365; // 1 year function ProtectedAppSettings({ data }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -136,14 +135,36 @@ function ProtectedAppSettings({ data }: Props) { - validateUriOrigin(value) || t('protected_app.form.errors.invalid_url'), + validate: (value) => { + if (!validateUriOrigin(value)) { + return t('protected_app.form.errors.invalid_url'); + } + + if (isLocalhost(value)) { + return t('protected_app.form.errors.localhost'); + } + + return true; + }, })} error={ - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - errors.protectedAppMetadata?.origin?.message || - (errors.protectedAppMetadata?.origin?.type === 'required' && - t('protected_app.form.errors.url_required')) + errors.protectedAppMetadata?.origin?.message === + t('protected_app.form.errors.localhost') ? ( + + ), + }} + > + {t('protected_app.form.errors.localhost')} + + ) : ( + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + errors.protectedAppMetadata?.origin?.message || + (errors.protectedAppMetadata?.origin?.type === 'required' && + t('protected_app.form.errors.url_required')) + ) } placeholder={t('protected_app.form.url_field_placeholder')} /> @@ -267,44 +288,7 @@ function ProtectedAppSettings({ data }: Props) { - - - ( - ) => { - onChange(value && Number(value)); - }} - onValueUp={() => { - onChange(value + 1); - }} - onValueDown={() => { - onChange(value - 1); - }} - onBlur={() => { - if (value < 1) { - onChange(1); - } else if (value > maxSessionDuration) { - onChange(maxSessionDuration); - } - }} - /> - )} - /> - - + ); } diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx index 2d5a82c69..8e437c3ca 100644 --- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx +++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx @@ -1,4 +1,4 @@ -import { validateUriOrigin } from '@logto/core-kit'; +import { isLocalhost, validateUriOrigin } from '@logto/core-kit'; import { ApplicationType, type Application, type RequestErrorBody } from '@logto/schemas'; import { isValidSubdomain } from '@logto/shared/universal'; import { condString, conditional } from '@silverhand/essentials'; @@ -18,6 +18,7 @@ import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button, { type Props as ButtonProps } from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import TextInput from '@/ds-components/TextInput'; +import TextLink from '@/ds-components/TextLink'; import useApi from '@/hooks/use-api'; import useApplicationsUsage from '@/hooks/use-applications-usage'; import useTenantPathname from '@/hooks/use-tenant-pathname'; @@ -123,14 +124,36 @@ function ProtectedAppForm({ inputContainerClassName={styles.input} {...register('origin', { required: true, - validate: (value) => - validateUriOrigin(value) || t('protected_app.form.errors.invalid_url'), + validate: (value) => { + if (!validateUriOrigin(value)) { + return t('protected_app.form.errors.invalid_url'); + } + + if (isLocalhost(value)) { + return t('protected_app.form.errors.localhost'); + } + + return true; + }, })} placeholder={t('protected_app.form.url_field_placeholder')} error={ - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - errors.origin?.message || - (errors.origin?.type === 'required' && t('protected_app.form.errors.url_required')) + // Error message can only be string, manually add link to the message + errors.origin?.message === t('protected_app.form.errors.localhost') ? ( + + ), + }} + > + {t('protected_app.form.errors.localhost')} + + ) : ( + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + errors.origin?.message || + (errors.origin?.type === 'required' && t('protected_app.form.errors.url_required')) + ) } /> diff --git a/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts index 10f4e2023..754fb5a8c 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/protected-app.ts @@ -34,6 +34,8 @@ const protected_app = { url_required: 'Origin URL is required.', invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, success_message: diff --git a/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/es/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/it/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/ja/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/ru/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts index bc04629c0..1cf27f137 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts +++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/protected-app.ts @@ -57,6 +57,9 @@ const protected_app = { /** UNTRANSLATED */ invalid_url: "Invalid Origin URL format: Use http:// or https://. Note: '/pathname' is not currently supported.", + /** UNTRANSLATED */ + localhost: + 'Please expose your local server to the internet first. Learn more about local development.', }, }, /** UNTRANSLATED */ diff --git a/packages/toolkit/core-kit/src/utils/url.test.ts b/packages/toolkit/core-kit/src/utils/url.test.ts index c9f839023..90742ca2e 100644 --- a/packages/toolkit/core-kit/src/utils/url.test.ts +++ b/packages/toolkit/core-kit/src/utils/url.test.ts @@ -1,4 +1,4 @@ -import { isValidUrl, validateRedirectUrl } from './url.js'; +import { isLocalhost, isValidUrl, validateRedirectUrl } from './url.js'; describe('url utilities', () => { it('should allow valid redirect URIs', () => { @@ -41,3 +41,18 @@ describe('url utilities', () => { expect(isValidUrl('abc.com/callback#test=123')).toBeFalsy(); }); }); + +describe('isLocalhost()', () => { + it('should return true for localhost', () => { + expect(isLocalhost('http://localhost')).toBeTruthy(); + expect(isLocalhost('http://localhost:3001')).toBeTruthy(); + expect(isLocalhost('https://localhost:3001')).toBeTruthy(); + expect(isLocalhost('http://localhost:3001/callback')).toBeTruthy(); + }); + + it('should return false for non-localhost', () => { + expect(isLocalhost('https://localhost.dev/callback')).toBeFalsy(); + expect(isLocalhost('https://my-company.com/callback?test=123')).toBeFalsy(); + expect(isLocalhost('https://abc.com/callback?test=123#param=hash')).toBeFalsy(); + }); +}); diff --git a/packages/toolkit/core-kit/src/utils/url.ts b/packages/toolkit/core-kit/src/utils/url.ts index 01c58f3c6..420899a3e 100644 --- a/packages/toolkit/core-kit/src/utils/url.ts +++ b/packages/toolkit/core-kit/src/utils/url.ts @@ -27,3 +27,12 @@ export const isValidUrl = (url?: string) => { return false; } }; + +/** + * Check if the given URL is localhost + */ +export const isLocalhost = (url: string) => { + const parsedUrl = new URL(url); + + return ['localhost', '127.0.0.1', '::1'].includes(parsedUrl.hostname); +};