feat(clerk-js): Add supportEmail property option

Author: igneel64

packages/clerk-js/src/ui/hooks/useSupportEmail.test.tsx

@@ -0,0 +1,32 @@
+import { renderHook } from '@clerk/shared/testUtils';
+
+const mockUseOptions = jest.fn();
+
+import { useSupportEmail } from './useSupportEmail';
+
+jest.mock('ui/contexts', () => {
+  return {
+    useCoreClerk: () => {
+      return {
+        frontendApi: 'clerk.clerk.dev',
+      };
+    },
+    useOptions: mockUseOptions,
+  };
+});
+
+describe('useSupportEmail', () => {
+  test('should use custom email when provided', () => {
+    mockUseOptions.mockImplementationOnce(() => ({ supportEmail: 'test@email.com' }));
+    const { result } = renderHook(() => useSupportEmail());
+
+    expect(result.current).toBe('test@email.com');
+  });
+
+  test('should fallback to default when supportEmail is not provided in options', () => {
+    mockUseOptions.mockImplementationOnce(() => ({ supportEmail: undefined }));
+    const { result } = renderHook(() => useSupportEmail());
+
+    expect(result.current).toBe('support@clerk.dev');
+  });
+});

packages/clerk-js/src/ui/hooks/useSupportEmail.ts

@@ -1,18 +1,20 @@
 import React from 'react';
 
 import { buildEmailAddress } from '../../utils';
-import { useCoreClerk } from '../contexts';
+import { useCoreClerk, useOptions } from '../contexts';
 
 export function useSupportEmail(): string {
   const Clerk = useCoreClerk();
+  const { supportEmail } = useOptions();
 
   const supportDomain = React.useMemo(
     () =>
+      supportEmail ||
       buildEmailAddress({
         localPart: 'support',
         frontendApi: Clerk.frontendApi,
       }),
-    [Clerk.frontendApi],
+    [Clerk.frontendApi, supportEmail],
   );
 
   return supportDomain;

packages/clerk-js/src/ui/signIn/SignInFactorOne.test.tsx

@@ -17,6 +17,7 @@ jest.mock('ui/contexts', () => {
     useSignInContext: jest.fn(),
     useCoreClerk: jest.fn(),
     useCoreSignIn: jest.fn(),
+    useOptions: jest.fn(() => ({ supportEmail: undefined })),
   };
 });
 

packages/clerk-js/src/ui/signIn/SignInStart.test.tsx

@@ -53,6 +53,7 @@ jest.mock('ui/contexts', () => {
     useCoreClerk: jest.fn(() => ({
       setActive: mockSetActive,
     })),
+    useOptions: jest.fn(() => ({ supportEmail: undefined })),
   };
 });
 

packages/clerk-js/src/ui/signIn/strategies/All.test.tsx

@@ -3,6 +3,8 @@ import { SignInFactor } from '@clerk/types';
 import { Session } from 'core/resources';
 import React from 'react';
 
+const mockUseOptions = jest.fn(() => ({}));
+
 import { All } from './All';
 
 jest.mock('ui/contexts', () => {
@@ -13,6 +15,7 @@ jest.mock('ui/contexts', () => {
         frontendAPI: 'clerk.clerk.dev',
       },
     })),
+    useOptions: mockUseOptions,
     useEnvironment: jest.fn(() => ({
       displayConfig: {
         theme: {
@@ -65,7 +68,18 @@ describe('<All/>', () => {
     },
   ];
 
-  it('renders the All sign in methods', async () => {
+  it('renders the All sign in methods', () => {
+    const tree = renderJSON(
+      <All
+        factors={factors}
+        selectFactor={jest.fn()}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the All sign in methods with custom support email', () => {
+    mockUseOptions.mockImplementationOnce(() => ({ supportEmail: 'test@test.com' }));
     const tree = renderJSON(
       <All
         factors={factors}
@@ -75,7 +89,7 @@ describe('<All/>', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('triggers selectStrategy callback on click', async () => {
+  it('triggers selectStrategy callback on click', () => {
     const mockSelectStrategy = jest.fn();
     render(
       <All

packages/clerk-js/src/ui/signIn/strategies/All.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import { Separator } from 'ui/common';
 import { useSupportEmail } from 'ui/hooks/useSupportEmail';
 import { allStrategiesButtonsComparator } from 'ui/signIn/strategies/factorSortingUtils';
-import { factorHasLocalStrategy } from '../utils';
 
+import { factorHasLocalStrategy } from '../utils';
 import { OAuth } from './OAuth';
 
 export function getButtonLabel(factor: SignInFactor): string {

packages/clerk-js/src/ui/signIn/strategies/__snapshots__/All.test.tsx.snap

@@ -81,3 +81,85 @@ Array [
   </div>,
 ]
 `;
+
+exports[`<All/> renders the All sign in methods with custom support email 1`] = `
+Array [
+  <div
+    className="cl-oauth-button-group"
+  >
+    <button
+      className="button outline primary cl-oauth-button"
+      disabled={false}
+      onClick={[Function]}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <img
+        alt="Google"
+        src="https://images.clerk.dev/static/google.svg"
+      />
+      <span>
+        Sign in with Google
+      </span>
+    </button>
+    <button
+      className="button outline primary cl-oauth-button"
+      disabled={false}
+      onClick={[Function]}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <img
+        alt="Facebook"
+        src="https://images.clerk.dev/static/facebook.svg"
+      />
+      <span>
+        Sign in with Facebook
+      </span>
+    </button>
+  </div>,
+  <div
+    className="cl-auth-form-separator"
+  />,
+  <button
+    className="button solid primary cl-primary-button"
+    onClick={[Function]}
+  >
+    Send magic link to +1*********9
+  </button>,
+  <button
+    className="button solid primary cl-primary-button"
+    onClick={[Function]}
+  >
+    Email code to j***@e*****.com
+  </button>,
+  <button
+    className="button solid primary cl-primary-button"
+    onClick={[Function]}
+  >
+    Send code to +1*********9
+  </button>,
+  <button
+    className="button solid primary cl-primary-button"
+    onClick={[Function]}
+  >
+    Sign in with your password
+  </button>,
+  <div
+    className="cl-auth-form-link cl-auth-trouble-link"
+  >
+    <a
+      href="mailto:test@test.com"
+      title="Contact support"
+    >
+      I am having trouble signing in
+    </a>
+  </div>,
+]
+`;

packages/types/src/clerk.ts

@@ -294,6 +294,8 @@ export interface ClerkOptions {
   polling?: boolean;
   selectInitialSession?: (client: ClientResource) => ActiveSessionResource | null;
   theme?: ClerkThemeOptions;
+  /** Optional support email for display in authentication screens */
+  supportEmail?: string;
 }
 
 export interface Resources {