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