refactor(clerk-js): Extracted createAllowedRedirectOrigins origin get…

…ter to a utility function
clerk · Nov 16, 2023 · 7a3faa6 · 7a3faa6
1 parent c885c84
commit 7a3faa6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 46 deletions.
diff --git a/.changeset/fast-ads-mix.md b/.changeset/fast-ads-mix.md
@@ -6,6 +6,5 @@ Introducing default values for allowed redirect origins, this change will apply
 
 Let's assume the host of the application is `test.host`, the origins will be
 - `https://test.host/`
-- `https://test.host/*`
+- `https://yourawesomeapp.clerk.accounts.dev/`
 - `https://*.yourawesomeapp.clerk.accounts.dev/`
-- `https://*.yourawesomeapp.clerk.accounts.dev/*`
diff --git a/packages/clerk-js/src/core/clerk.test.ts b/packages/clerk-js/src/core/clerk.test.ts
@@ -401,29 +401,6 @@ describe('Clerk singleton', () => {
 
       expect(document.cookie).toContain(mockJwt);
     });
-
-    it('contains the default allowed origin values', async () => {
-      const sut = new Clerk(productionPublishableKey);
-      await sut.load();
-
-      const frontendApiStr = sut.frontendApi;
-
-      expect(sut.allowedRedirectOrigins).toEqual([
-        window.location.origin,
-        `${window.location.origin}/*`,
-        `https://*.${getETLDPlusOneFromFrontendApi(frontendApiStr)}`,
-        `https://*.${getETLDPlusOneFromFrontendApi(frontendApiStr)}/*`,
-      ]);
-    });
-
-    it('contains only the allowedRedirectOrigins options given', async () => {
-      const sut = new Clerk(productionPublishableKey);
-      await sut.load({
-        allowedRedirectOrigins: ['https://test.host'],
-      });
-
-      expect(sut.allowedRedirectOrigins).toEqual(['https://test.host']);
-    });
   });
 
   describe('.signOut()', () => {

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -59,12 +59,12 @@ import {
   appendAsQueryParams,
   buildURL,
   completeSignUpFlow,
+  createAllowedRedirectOrigins,
   createBeforeUnloadTracker,
   createCookieHandler,
   createPageLifecycle,
   errorThrower,
   getClerkQueryParam,
-  getETLDPlusOneFromFrontendApi,
   hasExternalAccountSignUpError,
   ignoreEventValue,
   inActiveBrowserTab,
@@ -256,25 +256,6 @@ export default class Clerk implements ClerkInterface {
 
   public isReady = (): boolean => this.#isReady;
 
-  get allowedRedirectOrigins(): (string | RegExp)[] | undefined {
-    if (!this.#options.allowedRedirectOrigins) {
-      const origins = [];
-      if (inBrowser()) {
-        origins.push(window.location.origin);
-        origins.push(window.location.origin + '/*');
-      }
-
-      const frontendApi = this.frontendApi;
-
-      origins.push(`https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}`);
-      origins.push(`https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}/*`);
-
-      return origins;
-    }
-
-    return this.#options.allowedRedirectOrigins;
-  }
-
   public load = async (options?: ClerkOptions): Promise<void> => {
     if (this.#isReady) {
       return;
@@ -285,7 +266,10 @@ export default class Clerk implements ClerkInterface {
       ...options,
     };
 
-    this.#options.allowedRedirectOrigins = this.allowedRedirectOrigins;
+    this.#options.allowedRedirectOrigins = createAllowedRedirectOrigins(
+      this.#options.allowedRedirectOrigins,
+      this.frontendApi,
+    );
 
     if (this.#options.standardBrowser) {
       this.#isReady = await this.#loadInStandardBrowser();

diff --git 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
@@ -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 (!allowedRedirectOrigins || allowedRedirectOrigins.length === 0) {
+    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;
+  }
+
+  return allowedRedirectOrigins;
+}