feat(clerk-js): Throw error if routing options are used incorrectly (#…

…2208)

* feat(clerk-js): Throw error if routing options are used incorrectly

* test(clerk-js): Update normalizeRoutingOptions tests

* chore(repo): Added Changeset

.changeset/brave-suits-drive.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': major
+---
+
+All the components that using routing will throw a runtime error if the a path property is provided with a routing strategy other than path.
+
+Example that will throw an error:
+```tsx
+<SignIn routing='hash' path='/sign-in' />
+```

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

@@ -115,3 +115,7 @@ export function clerkRedirectUrlIsMissingScheme(): never {
 export function clerkFailedToLoadThirdPartyScript(name?: string): never {
   throw new Error(`${errorPrefix} Unable to retrieve a third party script${name ? ` ${name}` : ''}.`);
 }
+
+export function clerkInvalidRoutingStrategy(strategy?: string): never {
+  throw new Error(`${errorPrefix} Invalid routing strategy, path cannot be used in tandem with ${strategy}.`);
+}

packages/clerk-js/src/ui/common/__tests__/authPropHelpers.test.ts

@@ -6,10 +6,13 @@ describe('auth prop helpers', () => {
       expect(normalizeRoutingOptions({ path: 'test' })).toEqual({ routing: 'path', path: 'test' });
     });
 
-    it('returns the same options if routing was provided (any routing) and path was provided (avoid breaking integrations)', () => {
-      expect(normalizeRoutingOptions({ routing: 'path', path: 'test' })).toEqual({ routing: 'path', path: 'test' });
-      expect(normalizeRoutingOptions({ routing: 'hash', path: 'test' })).toEqual({ routing: 'hash', path: 'test' });
-      expect(normalizeRoutingOptions({ routing: 'virtual' })).toEqual({ routing: 'virtual' });
+    it('it throws an error when path is provided and routing strategy is not path', () => {
+      expect(() => {
+        normalizeRoutingOptions({ path: 'test', routing: 'hash' });
+      }).toThrow('ClerkJS: Invalid routing strategy, path cannot be used in tandem with hash.');
+      expect(() => {
+        normalizeRoutingOptions({ path: 'test', routing: 'virtual' });
+      }).toThrow('ClerkJS: Invalid routing strategy, path cannot be used in tandem with virtual.');
     });
   });
 });

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

@@ -3,6 +3,7 @@ import type { ClerkOptions, DisplayConfigResource, RoutingOptions, RoutingStrate
 import type { ParsedQs } from 'qs';
 import qs from 'qs';
 
+import { clerkInvalidRoutingStrategy } from '../core/errors';
 import { hasBannedProtocol, isAllowedRedirectOrigin, isValidUrl } from './url';
 
 type PickRedirectionUrlKey = 'afterSignUpUrl' | 'afterSignInUrl' | 'signInUrl' | 'signUpUrl';
@@ -124,5 +125,9 @@ export const normalizeRoutingOptions = ({
     return { routing: 'path', path };
   }
 
+  if (routing !== 'path' && !!path) {
+    return clerkInvalidRoutingStrategy(routing);
+  }
+
   return { routing, path } as RoutingOptions;
 };