feat(clerk-js): Add Frontend API URL to allowed redirect origins (#4767)

Author: kostaspt

.changeset/silver-dodos-invite.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+`createAllowedRedirectOrigins` now takes the instance type into account to include Frontend API URL for development instances. This is necessary to properly support Clerk as an IdP with OAuth for development instances.

packages/clerk-js/src/core/clerk.ts

@@ -2170,7 +2170,11 @@ export class Clerk implements ClerkInterface {
     return {
       ...defaultOptions,
       ...options,
-      allowedRedirectOrigins: createAllowedRedirectOrigins(options?.allowedRedirectOrigins, this.frontendApi),
+      allowedRedirectOrigins: createAllowedRedirectOrigins(
+        options?.allowedRedirectOrigins,
+        this.frontendApi,
+        this.instanceType,
+      ),
     };
   };
 

packages/clerk-js/src/utils/__tests__/url.test.ts

@@ -511,26 +511,39 @@ describe('isAllowedRedirect', () => {
 });
 
 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 the default allowed origin values if no value is provided when production instance', () => {
+    const frontendApi = 'clerk.example.com';
+    const allowedRedirectOriginsValuesUndefined = createAllowedRedirectOrigins(undefined, frontendApi, 'production');
+    const allowedRedirectOriginsValuesEmptyArray = createAllowedRedirectOrigins([], frontendApi, 'production');
+
+    const expectedAllowedRedirectOrigins = [
+      'http://localhost', // Current location
+      `https://example.com`, // Primary domain
+      `https://*.example.com`, // Wildcard subdomains
+    ];
+
+    expect(allowedRedirectOriginsValuesUndefined).toEqual(expectedAllowedRedirectOrigins);
+    expect(allowedRedirectOriginsValuesEmptyArray).toEqual(expectedAllowedRedirectOrigins);
+  });
+
+  it('contains the default allowed origin values and FAPI if no value is provided when development instance', () => {
+    const frontendApi = 'foo-bar-42.clerk.accounts.dev';
+    const allowedRedirectOriginsValuesUndefined = createAllowedRedirectOrigins(undefined, frontendApi, 'development');
+    const allowedRedirectOriginsValuesEmptyArray = createAllowedRedirectOrigins([], frontendApi, 'development');
+
+    const expectedAllowedRedirectOrigins = [
+      'http://localhost', // Current location
+      `https://foo-bar-42.accounts.dev`, // Account Portal
+      `https://*.foo-bar-42.accounts.dev`, // Account Portal subdomains
+      `https://foo-bar-42.clerk.accounts.dev`, // Frontend API
+    ];
+
+    expect(allowedRedirectOriginsValuesUndefined).toEqual(expectedAllowedRedirectOrigins);
+    expect(allowedRedirectOriginsValuesEmptyArray).toEqual(expectedAllowedRedirectOrigins);
   });
 
   it('contains only the allowedRedirectOrigins options given', async () => {
-    const frontendApi = 'https://somename.clerk.accounts.dev';
+    const frontendApi = 'somename.clerk.accounts.dev';
     const allowedRedirectOriginsValues = createAllowedRedirectOrigins(
       ['https://test.host', 'https://*.test.host'],
       frontendApi,

packages/clerk-js/src/utils/url.ts

@@ -384,6 +384,7 @@ export const isAllowedRedirect =
 export function createAllowedRedirectOrigins(
   allowedRedirectOrigins: Array<string | RegExp> | undefined,
   frontendApi: string,
+  instanceType?: string,
 ): (string | RegExp)[] | undefined {
   if (Array.isArray(allowedRedirectOrigins) && !!allowedRedirectOrigins.length) {
     return allowedRedirectOrigins;
@@ -397,5 +398,9 @@ export function createAllowedRedirectOrigins(
   origins.push(`https://${getETLDPlusOneFromFrontendApi(frontendApi)}`);
   origins.push(`https://*.${getETLDPlusOneFromFrontendApi(frontendApi)}`);
 
+  if (instanceType === 'development') {
+    origins.push(`https://${frontendApi}`);
+  }
+
   return origins;
 }