feat(clerk-js,types): Support afterSignOutUrl and related methods in …

…Clerk instance
clerk · Dec 19, 2023 · bce4ca7 · bce4ca7
1 parent ebafd1a
commit bce4ca7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 44 deletions.
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -133,6 +133,7 @@ const defaultOptions: ClerkOptions = {
   signUpUrl: undefined,
   afterSignInUrl: undefined,
   afterSignUpUrl: undefined,
+  afterSignOutUrl: undefined,
 };
 
 export class Clerk implements ClerkInterface {
@@ -303,7 +304,7 @@ export class Clerk implements ClerkInterface {
     }
     const opts = callbackOrOptions && typeof callbackOrOptions === 'object' ? callbackOrOptions : options || {};
 
-    const redirectUrl = opts?.redirectUrl || '/';
+    const redirectUrl = opts?.redirectUrl || this.buildAfterSignOutUrl();
     const defaultCb = () => this.navigate(redirectUrl);
     const cb = typeof callbackOrOptions === 'function' ? callbackOrOptions : defaultCb;
 
@@ -761,6 +762,14 @@ export class Clerk implements ClerkInterface {
     return this.buildUrlWithAuth(this.#options.afterSignUpUrl);
   }
 
+  public buildAfterSignOutUrl(): string {
+    if (!this.#options.afterSignOutUrl) {
+      return '/';
+    }
+
+    return this.buildUrlWithAuth(this.#options.afterSignOutUrl);
+  }
+
   public buildCreateOrganizationUrl(): string {
     if (!this.#environment || !this.#environment.displayConfig) {
       return '';
@@ -851,6 +860,13 @@ export class Clerk implements ClerkInterface {
     return;
   };
 
+  public redirectToAfterSignOut = async (): Promise<unknown> => {
+    if (inBrowser()) {
+      return this.navigate(this.buildAfterSignOutUrl());
+    }
+    return;
+  };
+
   public handleEmailLinkVerification = async (
     params: HandleEmailLinkVerificationParams,
     customNavigate?: (to: string) => Promise<unknown>,

diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
@@ -232,7 +232,7 @@ export const useUserButtonContext = () => {
   const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl;
   const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl);
 
-  const afterSignOutUrl = ctx.afterSignOutUrl || '/';
+  const afterSignOutUrl = ctx.afterSignOutUrl || clerk.buildAfterSignOutUrl();
   const navigateAfterSignOut = () => navigate(afterSignOutUrl);
 
   const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl;

diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
@@ -75,6 +75,7 @@ type IsomorphicLoadedClerk = Without<
   | 'buildOrganizationProfileUrl'
   | 'buildAfterSignUpUrl'
   | 'buildAfterSignInUrl'
+  | 'buildAfterSignOutUrl'
   | 'buildUrlWithAuth'
   | 'handleRedirectCallback'
   | 'handleUnauthenticated'
@@ -115,6 +116,8 @@ type IsomorphicLoadedClerk = Without<
   buildAfterSignInUrl: () => string | void;
   // TODO: Align return type
   buildAfterSignUpUrl: () => string | void;
+  // TODO: Align return type
+  buildAfterSignOutUrl: () => string | void;
   // TODO: Align optional props
   mountUserButton: (node: HTMLDivElement, props: UserButtonProps) => void;
   mountOrganizationList: (node: HTMLDivElement, props: OrganizationListProps) => void;
@@ -278,6 +281,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  buildAfterSignOutUrl = (): string | void => {
+    const callback = () => this.clerkjs?.buildAfterSignOutUrl() || '';
+    if (this.clerkjs && this.#loaded) {
+      return callback();
+    } else {
+      this.premountMethodCalls.set('buildAfterSignOutUrl', callback);
+    }
+  };
+
   buildUserProfileUrl = (): string | void => {
     const callback = () => this.clerkjs?.buildUserProfileUrl() || '';
     if (this.clerkjs && this.#loaded) {
@@ -835,6 +847,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  redirectToAfterSignOut = (): void => {
+    const callback = () => this.clerkjs?.redirectToAfterSignOut();
+    if (this.clerkjs && this.#loaded) {
+      callback();
+    } else {
+      this.premountMethodCalls.set('redirectToAfterSignOut', callback);
+    }
+  };
+
   redirectToOrganizationProfile = async (): Promise<unknown> => {
     const callback = () => this.clerkjs?.redirectToOrganizationProfile();
     if (this.clerkjs && this.#loaded) {

diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
@@ -345,15 +345,20 @@ export interface Clerk {
   buildOrganizationProfileUrl(): string;
 
   /**
-   * Returns the configured afterSignIn url of the instance.
+   * Returns the configured afterSignInUrl of the instance.
    */
   buildAfterSignInUrl(): string;
 
   /**
-   * Returns the configured afterSignIn url of the instance.
+   * Returns the configured afterSignInUrl of the instance.
    */
   buildAfterSignUpUrl(): string;
 
+  /**
+   * Returns the configured afterSignOutUrl of the instance.
+   */
+  buildAfterSignOutUrl(): string;
+
   /**
    *
    * Redirects to the provided url after decorating it with the auth token for development instances.
@@ -401,6 +406,11 @@ export interface Clerk {
    */
   redirectToAfterSignUp: () => void;
 
+  /**
+   * Redirects to the configured afterSignOut URL.
+   */
+  redirectToAfterSignOut: () => void;
+
   /**
    * Completes an OAuth or SAML redirection flow started by
    * {@link Clerk.client.signIn.authenticateWithRedirect} or {@link Clerk.client.signUp.authenticateWithRedirect}
@@ -439,17 +449,7 @@ export interface Clerk {
   handleUnauthenticated: () => Promise<unknown>;
 }
 
-export type HandleOAuthCallbackParams = {
-  /**
-   * Full URL or path to navigate after successful sign up.
-   */
-  afterSignUpUrl?: string | null;
-
-  /**
-   * Full URL or path to navigate after successful sign in.
-   */
-  afterSignInUrl?: string | null;
-
+export type HandleOAuthCallbackParams = AfterActionURLs & {
   /**
    * Full URL or path to navigate after successful sign in
    * or sign up.
@@ -517,35 +517,34 @@ type ClerkOptionsNavigation = ClerkOptionsNavigationFn & {
   routerDebug?: boolean;
 };
 
-export type ClerkOptions = ClerkOptionsNavigation & {
-  appearance?: Appearance;
-  localization?: LocalizationResource;
-  polling?: boolean;
-  selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
-  /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
-  standardBrowser?: boolean;
-  /** Optional support email for display in authentication screens */
-  supportEmail?: string;
-  touchSession?: boolean;
-  signInUrl?: string;
-  signUpUrl?: string;
-  afterSignInUrl?: string;
-  afterSignUpUrl?: string;
-  allowedRedirectOrigins?: Array<string | RegExp>;
-  isSatellite?: boolean | ((url: URL) => boolean);
+export type ClerkOptions = ClerkOptionsNavigation &
+  AfterActionURLs & {
+    appearance?: Appearance;
+    localization?: LocalizationResource;
+    polling?: boolean;
+    selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
+    /** Controls if ClerkJS will load with the standard browser setup using Clerk cookies */
+    standardBrowser?: boolean;
+    /** Optional support email for display in authentication screens */
+    supportEmail?: string;
+    touchSession?: boolean;
+    signInUrl?: string;
+    signUpUrl?: string;
+    allowedRedirectOrigins?: Array<string | RegExp>;
+    isSatellite?: boolean | ((url: URL) => boolean);
 
-  /**
-   * Telemetry options
-   */
-  telemetry?:
-    | false
-    | {
-        disabled?: boolean;
-        debug?: boolean;
-      };
-
-  sdkMetadata?: SDKMetadata;
-};
+    /**
+     * Telemetry options
+     */
+    telemetry?:
+      | false
+      | {
+          disabled?: boolean;
+          debug?: boolean;
+        };
+
+    sdkMetadata?: SDKMetadata;
+  };
 
 export interface NavigateOptions {
   replace?: boolean;
@@ -576,7 +575,7 @@ export type SignUpInitialValues = {
   username?: string;
 };
 
-export type RedirectOptions = {
+type AfterActionURLs = {
   /**
    * Full URL or path to navigate after successful sign in.
    */
@@ -588,6 +587,13 @@ export type RedirectOptions = {
    */
   afterSignUpUrl?: string | null;
 
+  /**
+   * Full URL or path to navigate after successful sign out.
+   */
+  afterSignOutUrl?: string | null;
+};
+
+export type RedirectOptions = AfterActionURLs & {
   /**
    * Full URL or path to navigate after successful sign in,
    * or sign up.