diff --git a/.changeset/fast-ads-mix.md b/.changeset/fast-ads-mix.md new file mode 100644 index 00000000000..3fee680f3ef --- /dev/null +++ b/.changeset/fast-ads-mix.md @@ -0,0 +1,10 @@ +--- +'@clerk/clerk-js': minor +--- + +Introducing default values for `allowedRedirectOrigins`. If no value is provided, default values similar to the example below will apply. + +Let's assume the host of the application is `test.host`, the origins will be +- `https://test.host/` +- `https://yourawesomeapp.clerk.accounts.dev/` +- `https://*.yourawesomeapp.clerk.accounts.dev/` diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index f22d044b15c..3c25cf2a243 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -60,6 +60,7 @@ import { appendAsQueryParams, buildURL, completeSignUpFlow, + createAllowedRedirectOrigins, createBeforeUnloadTracker, createCookieHandler, createPageLifecycle, @@ -265,6 +266,11 @@ export class Clerk implements ClerkInterface { ...options, }; + this.#options.allowedRedirectOrigins = createAllowedRedirectOrigins( + this.#options.allowedRedirectOrigins, + this.frontendApi, + ); + if (this.#options.standardBrowser) { this.#isReady = await this.#loadInStandardBrowser(); } else { diff --git a/packages/clerk-js/src/utils/__tests__/url.test.ts b/packages/clerk-js/src/utils/__tests__/url.test.ts index 29fec96f5fe..40f6283dd43 100644 --- a/packages/clerk-js/src/utils/__tests__/url.test.ts +++ b/packages/clerk-js/src/utils/__tests__/url.test.ts @@ -3,6 +3,7 @@ import type { SignUpResource } from '@clerk/types'; import { appendAsQueryParams, buildURL, + createAllowedRedirectOrigins, getAllETLDs, getETLDPlusOneFromFrontendApi, getSearchParameterFromHash, @@ -460,3 +461,33 @@ describe('isAllowedRedirectOrigin', () => { expect(warnMock).toHaveBeenCalledTimes(Number(!expected)); // Number(boolean) evaluates to 0 or 1 }); }); + +describe('createAllowedRedirectOrigins', () => { + it('contains the default allowed origin values if no value is provided', async () => { + const frontendApi = 'https://somename.clerk.accounts.dev'; + const allowedRedirectOriginsValuesUndefined = createAllowedRedirectOrigins(undefined, frontendApi); + const allowedRedirectOriginsValuesEmptyArray = createAllowedRedirectOrigins([], frontendApi); + + expect(allowedRedirectOriginsValuesUndefined).toEqual([ + 'http://localhost', + `https://${getETLDPlusOneFromFrontendApi(frontendApi)}`, + `https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}`, + ]); + + expect(allowedRedirectOriginsValuesEmptyArray).toEqual([ + 'http://localhost', + `https://${getETLDPlusOneFromFrontendApi(frontendApi)}`, + `https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}`, + ]); + }); + + it('contains only the allowedRedirectOrigins options given', async () => { + const frontendApi = 'https://somename.clerk.accounts.dev'; + const allowedRedirectOriginsValues = createAllowedRedirectOrigins( + ['https://test.host', 'https://*.test.host'], + frontendApi, + ); + + expect(allowedRedirectOriginsValues).toEqual(['https://test.host', 'https://*.test.host']); + }); +}); diff --git a/packages/clerk-js/src/utils/url.ts b/packages/clerk-js/src/utils/url.ts index 61b787d53c3..57f566edfe7 100644 --- a/packages/clerk-js/src/utils/url.ts +++ b/packages/clerk-js/src/utils/url.ts @@ -350,3 +350,22 @@ export const isAllowedRedirectOrigin = (_url: string, allowedRedirectOrigins: Ar } return isAllowed; }; + +export function createAllowedRedirectOrigins( + allowedRedirectOrigins: Array | undefined, + frontendApi: string, +): (string | RegExp)[] | undefined { + if (Array.isArray(allowedRedirectOrigins) && !!allowedRedirectOrigins.length) { + return allowedRedirectOrigins; + } + + const origins = []; + if (typeof window !== 'undefined' && !!window.location) { + origins.push(window.location.origin); + } + + origins.push(`https://${getETLDPlusOneFromFrontendApi(frontendApi)}`); + origins.push(`https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}`); + + return origins; +}