feat(clerk-js): Add default Allowed redirect origins

.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/`

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 {

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']);
+ });
+});

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<string | RegExp> | 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;
+}