chore(clerk-react,types): Align return types for redirectTo methods in ClerkJS [SDK-1037] (#2316)

Author: tmilewski

.changeset/witty-forks-cheer.md

@@ -0,0 +1,13 @@
+---
+'@clerk/clerk-react': major
+'@clerk/types': major
+---
+
+Align return types for redirectTo* methods in ClerkJS [SDK-1037]
+
+Breaking Changes:
+
+- `redirectToUserProfile` now returns `Promise<unknown>` instead of `void`
+- `redirectToOrganizationProfile` now returns `Promise<unknown>` instead of `void`
+- `redirectToCreateOrganization` now returns `Promise<unknown>` instead of `void`
+- `redirectToHome` now returns `Promise<unknown>` instead of `void`

packages/react/src/components/controlComponents.tsx

@@ -159,23 +159,23 @@ export const RedirectToSignUp = withClerk(({ clerk, ...props }: WithClerkProp<Re
 
 export const RedirectToUserProfile = withClerk(({ clerk }) => {
   React.useEffect(() => {
-    clerk.redirectToUserProfile();
+    void clerk.redirectToUserProfile();
   }, []);
 
   return null;
 }, 'RedirectToUserProfile');
 
 export const RedirectToOrganizationProfile = withClerk(({ clerk }) => {
   React.useEffect(() => {
-    clerk.redirectToOrganizationProfile();
+    void clerk.redirectToOrganizationProfile();
   }, []);
 
   return null;
 }, 'RedirectToOrganizationProfile');
 
 export const RedirectToCreateOrganization = withClerk(({ clerk }) => {
   React.useEffect(() => {
-    clerk.redirectToCreateOrganization();
+    void clerk.redirectToCreateOrganization();
   }, []);
 
   return null;

packages/react/src/isomorphicClerk.ts

@@ -75,9 +75,6 @@ type IsomorphicLoadedClerk = Without<
   | 'buildOrganizationProfileUrl'
   | 'buildHomeUrl'
   | 'buildUrlWithAuth'
-  | 'redirectWithAuth'
-  | 'redirectToSignIn'
-  | 'redirectToSignUp'
   | 'handleRedirectCallback'
   | 'handleUnauthenticated'
   | 'authenticateWithMetamask'
@@ -93,12 +90,6 @@ type IsomorphicLoadedClerk = Without<
   | 'mountUserProfile'
   | 'client'
 > & {
-  // TODO: Align return type
-  redirectWithAuth: (...args: Parameters<Clerk['redirectWithAuth']>) => void;
-  // TODO: Align return type
-  redirectToSignIn: (options: SignInRedirectOptions) => void;
-  // TODO: Align return type
-  redirectToSignUp: (options: SignUpRedirectOptions) => void;
   // TODO: Align return type and parms
   handleRedirectCallback: (params: HandleOAuthCallbackParams) => void;
   handleUnauthenticated: () => void;
@@ -777,66 +768,73 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  redirectWithAuth = (...args: Parameters<Clerk['redirectWithAuth']>): void => {
+  redirectWithAuth = async (...args: Parameters<Clerk['redirectWithAuth']>): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectWithAuth(...args);
     if (this.clerkjs && this.#loaded) {
-      void callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectWithAuth', callback);
+      return;
     }
   };
 
-  redirectToSignIn = (opts: SignInRedirectOptions): void => {
+  redirectToSignIn = async (opts: SignInRedirectOptions): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToSignIn(opts as any);
     if (this.clerkjs && this.#loaded) {
-      void callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToSignIn', callback);
+      return;
     }
   };
 
-  redirectToSignUp = (opts: SignUpRedirectOptions): void => {
+  redirectToSignUp = async (opts: SignUpRedirectOptions): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToSignUp(opts as any);
     if (this.clerkjs && this.#loaded) {
-      void callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToSignUp', callback);
+      return;
     }
   };
 
-  redirectToUserProfile = (): void => {
+  redirectToUserProfile = async (): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToUserProfile();
     if (this.clerkjs && this.#loaded) {
-      callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToUserProfile', callback);
+      return;
     }
   };
 
-  redirectToHome = (): void => {
+  redirectToHome = async (): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToHome();
     if (this.clerkjs && this.#loaded) {
-      callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToHome', callback);
+      return;
     }
   };
 
-  redirectToOrganizationProfile = (): void => {
+  redirectToOrganizationProfile = async (): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToOrganizationProfile();
     if (this.clerkjs && this.#loaded) {
-      callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToOrganizationProfile', callback);
+      return;
     }
   };
 
-  redirectToCreateOrganization = (): void => {
+  redirectToCreateOrganization = async (): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToCreateOrganization();
     if (this.clerkjs && this.#loaded) {
-      callback();
+      return callback();
     } else {
       this.premountMethodCalls.set('redirectToCreateOrganization', callback);
+      return;
     }
   };
 

packages/types/src/clerk.retheme.ts

@@ -371,22 +371,22 @@ export interface Clerk {
   /**
    * Redirects to the configured URL where <UserProfile/> is mounted.
    */
-  redirectToUserProfile: () => void;
+  redirectToUserProfile: () => Promise<unknown>;
 
   /**
    * Redirects to the configured URL where <OrganizationProfile /> is mounted.
    */
-  redirectToOrganizationProfile: () => void;
+  redirectToOrganizationProfile: () => Promise<unknown>;
 
   /**
    * Redirects to the configured URL where <CreateOrganization /> is mounted.
    */
-  redirectToCreateOrganization: () => void;
+  redirectToCreateOrganization: () => Promise<unknown>;
 
   /**
    * Redirects to the configured home URL of the instance.
    */
-  redirectToHome: () => void;
+  redirectToHome: () => Promise<unknown>;
 
   /**
    * Completes an OAuth or SAML redirection flow started by

packages/types/src/clerk.ts

@@ -371,22 +371,22 @@ export interface Clerk {
   /**
    * Redirects to the configured URL where <UserProfile/> is mounted.
    */
-  redirectToUserProfile: () => void;
+  redirectToUserProfile: () => Promise<unknown>;
 
   /**
    * Redirects to the configured URL where <OrganizationProfile /> is mounted.
    */
-  redirectToOrganizationProfile: () => void;
+  redirectToOrganizationProfile: () => Promise<unknown>;
 
   /**
    * Redirects to the configured URL where <CreateOrganization /> is mounted.
    */
-  redirectToCreateOrganization: () => void;
+  redirectToCreateOrganization: () => Promise<unknown>;
 
   /**
    * Redirects to the configured home URL of the instance.
    */
-  redirectToHome: () => void;
+  redirectToHome: () => Promise<unknown>;
 
   /**
    * Completes an OAuth or SAML redirection flow started by