chore(e2e): drop mailsac and improve error logging in test utilities

nikosdouvlis · nikosdouvlis · commit 9b56b36a1f39 · 2025-12-07T23:55:09.000+02:00
Removed Mailsac API integration from emailService as it's no longer needed
for integration tests. Tests now use fictional emails with +clerk_test suffix
that can be verified using the 424242 OTP without sending actual emails.

Added withErrorLogging wrapper function to usersService that logs detailed
error information (status, message, errors, clerkTraceId) for all Clerk API
calls. This improves debugging when tests fail by providing immediate visibility
into API errors without requiring log aggregation.

Wrapped all clerkClient calls in usersService with withErrorLogging including:
- User operations: createUser, getUser, getUserList, deleteUser
- Organization operations: createOrganization, deleteOrganization
- API key operations: create, revoke
diff --git a/integration/templates/astro-hybrid/astro.config.mjs b/integration/templates/astro-hybrid/astro.config.mjs
@@ -4,7 +4,16 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   output: 'hybrid',
-  integrations: [clerk(), react()],
+  integrations: [
+    clerk({
+      appearance: {
+        options: {
+          showOptionalFields: true,
+        },
+      },
+    }),
+    react(),
+  ],
   server: {
     port: Number(process.env.PORT),
   },
diff --git a/integration/templates/astro-node/astro.config.mjs b/integration/templates/astro-node/astro.config.mjs
@@ -10,7 +10,17 @@ export default defineConfig({
   adapter: node({
     mode: 'standalone',
   }),
-  integrations: [clerk(), react(), tailwind()],
+  integrations: [
+    clerk({
+      appearance: {
+        options: {
+          showOptionalFields: true,
+        },
+      },
+    }),
+    react(),
+    tailwind(),
+  ],
   server: {
     port: Number(process.env.PORT),
   },
diff --git a/integration/templates/custom-flows-react-vite/src/main.tsx b/integration/templates/custom-flows-react-vite/src/main.tsx
@@ -23,6 +23,11 @@ createRoot(document.getElementById('root')!).render(
           publishableKey={PUBLISHABLE_KEY}
           clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL as string}
           clerkUiUrl={import.meta.env.VITE_CLERK_UI_URL as string}
+          appearance={{
+            options: {
+              showOptionalFields: true,
+            },
+          }}
         >
           <BrowserRouter>
             <Routes>
diff --git a/integration/templates/expo-web/app/_layout.tsx b/integration/templates/expo-web/app/_layout.tsx
@@ -10,6 +10,11 @@ export default function RootLayout() {
       routerReplace={to => router.replace(to)}
       clerkJSUrl={process.env.EXPO_PUBLIC_CLERK_JS_URL}
       clerkUiUrl={process.env.EXPO_PUBLIC_CLERK_UI_URL}
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
     >
       <ClerkLoaded>
         <Stack>
diff --git a/integration/templates/next-app-router-quickstart/src/app/layout.tsx b/integration/templates/next-app-router-quickstart/src/app/layout.tsx
@@ -11,7 +11,13 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider>
+    <ClerkProvider
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <html lang='en'>
         <body className={inter.className}>{children}</body>
       </html>
diff --git a/integration/templates/next-app-router/src/app/jwt-v2-organizations/(tests)/has-ssr/page.tsx b/integration/templates/next-app-router/src/app/jwt-v2-organizations/(tests)/has-ssr/page.tsx
@@ -3,7 +3,14 @@ import { SSR } from './client';
 
 export default function Page() {
   return (
-    <ClerkProvider dynamic>
+    <ClerkProvider
+      dynamic
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <SSR />
     </ClerkProvider>
   );
diff --git a/integration/templates/next-app-router/src/app/layout.tsx b/integration/templates/next-app-router/src/app/layout.tsx
@@ -13,7 +13,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider
       appearance={{
-        layout: {
+        options: {
+          showOptionalFields: true,
           // Icon buttons only contain accessible labels when they use an icon; our generated letter icon does not have
           // an accessible label. Using the "blockButton" variant ensures that the button contains a visible label that
           // can be selected by a Playwright selector.
diff --git a/integration/templates/next-app-router/src/app/settings/useAuth-has/layout.tsx b/integration/templates/next-app-router/src/app/settings/useAuth-has/layout.tsx
@@ -1,5 +1,16 @@
 import { ClerkProvider } from '@clerk/nextjs';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <ClerkProvider dynamic>{children}</ClerkProvider>;
+  return (
+    <ClerkProvider
+      dynamic
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
+    >
+      {children}
+    </ClerkProvider>
+  );
 }
diff --git a/integration/templates/nuxt-node/nuxt.config.js b/integration/templates/nuxt-node/nuxt.config.js
@@ -1,5 +1,12 @@
 export default defineNuxtConfig({
   modules: ['@clerk/nuxt'],
+  clerk: {
+    appearance: {
+      options: {
+        showOptionalFields: true,
+      },
+    },
+  },
   devtools: {
     enabled: false,
   },
diff --git a/integration/templates/react-cra/src/index.tsx b/integration/templates/react-cra/src/index.tsx
@@ -11,6 +11,11 @@ root.render(
       publishableKey={process.env.REACT_APP_CLERK_PUBLISHABLE_KEY as string}
       clerkJSUrl={process.env.REACT_APP_CLERK_JS as string}
       clerkUiUrl={process.env.REACT_APP_CLERK_UI as string}
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
     >
       <App />
     </ClerkProvider>
diff --git a/integration/templates/react-router-library/src/main.tsx b/integration/templates/react-router-library/src/main.tsx
@@ -10,7 +10,14 @@ const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+      <ClerkProvider
+        publishableKey={PUBLISHABLE_KEY}
+        appearance={{
+          options: {
+            showOptionalFields: true,
+          },
+        }}
+      >
         <Routes>
           <Route
             path='/'
diff --git a/integration/templates/react-router-node/app/root.tsx b/integration/templates/react-router-node/app/root.tsx
@@ -30,7 +30,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App({ loaderData }: Route.ComponentProps) {
   return (
-    <ClerkProvider loaderData={loaderData}>
+    <ClerkProvider
+      loaderData={loaderData}
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <main>
         <Outlet />
       </main>
diff --git a/integration/templates/react-vite/src/main.tsx b/integration/templates/react-vite/src/main.tsx
@@ -34,6 +34,11 @@ const Root = () => {
       clerkUiUrl={import.meta.env.VITE_CLERK_UI_URL as string}
       routerPush={(to: string) => navigate(to)}
       routerReplace={(to: string) => navigate(to, { replace: true })}
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
       experimental={{
         persistClient: import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT
           ? import.meta.env.VITE_EXPERIMENTAL_PERSIST_CLIENT === 'true'
diff --git a/integration/templates/tanstack-react-start/src/routes/__root.tsx b/integration/templates/tanstack-react-start/src/routes/__root.tsx
@@ -22,7 +22,13 @@ function RootComponent() {
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <ClerkProvider>
+    <ClerkProvider
+      appearance={{
+        options: {
+          showOptionalFields: true,
+        },
+      }}
+    >
       <html>
         <head>
           <HeadContent />
diff --git a/integration/templates/vue-vite/src/main.ts b/integration/templates/vue-vite/src/main.ts
@@ -10,6 +10,11 @@ app.use(clerkPlugin, {
   clerkJSUrl: import.meta.env.VITE_CLERK_JS_URL,
   clerkUiUrl: import.meta.env.VITE_CLERK_UI_URL,
   clerkJSVersion: import.meta.env.VITE_CLERK_JS_VERSION,
+  appearance: {
+    options: {
+      showOptionalFields: true,
+    },
+  },
 });
 app.use(router);
 app.mount('#app');
diff --git a/integration/testUtils/emailService.ts b/integration/testUtils/emailService.ts
@@ -12,8 +12,6 @@ export const createEmailService = () => {
 
   const fetcher = async (url: string | URL, init?: RequestInit) => {
     const headers = new Headers(init?.headers || {});
-    // eslint-disable-next-line turbo/no-undeclared-env-vars
-    headers.set('Mailsac-Key', process.env.MAILSAC_API_KEY);
     return fetch(url, { ...init, headers });
   };
 
diff --git a/integration/testUtils/usersService.ts b/integration/testUtils/usersService.ts
@@ -3,6 +3,19 @@ import { faker } from '@faker-js/faker';
 
 import { hash } from '../models/helpers';
 
+async function withErrorLogging<T>(operation: string, fn: () => Promise<T>): Promise<T> {
+  try {
+    return await fn();
+  } catch (e: any) {
+    console.error(`[usersService] ${operation} failed:`);
+    console.error('  Status:', e.status);
+    console.error('  Message:', e.message);
+    console.error('  Errors:', JSON.stringify(e.errors, null, 2));
+    console.error('  Clerk Trace ID:', e.clerkTraceId);
+    throw e;
+  }
+}
+
 type FakeUserOptions = {
   /**
    * A fictional email is an email that contains +clerk_test and can always be verified using 424242 as the OTP. No email will be sent.
@@ -126,15 +139,17 @@ export const createUserService = (clerkClient: ClerkClient) => {
       };
     },
     createBapiUser: async fakeUser => {
-      return await clerkClient.users.createUser({
-        emailAddress: fakeUser.email !== undefined ? [fakeUser.email] : undefined,
-        password: fakeUser.password,
-        firstName: fakeUser.firstName,
-        lastName: fakeUser.lastName,
-        phoneNumber: fakeUser.phoneNumber !== undefined ? [fakeUser.phoneNumber] : undefined,
-        username: fakeUser.username,
-        skipPasswordRequirement: fakeUser.password === undefined,
-      });
+      return withErrorLogging('createBapiUser', () =>
+        clerkClient.users.createUser({
+          emailAddress: fakeUser.email !== undefined ? [fakeUser.email] : undefined,
+          password: fakeUser.password,
+          firstName: fakeUser.firstName,
+          lastName: fakeUser.lastName,
+          phoneNumber: fakeUser.phoneNumber !== undefined ? [fakeUser.phoneNumber] : undefined,
+          username: fakeUser.username,
+          skipPasswordRequirement: fakeUser.password === undefined,
+        }),
+      );
     },
     getOrCreateUser: async fakeUser => {
       const existingUser = await self.getUser({ email: fakeUser.email });
@@ -147,10 +162,12 @@ export const createUserService = (clerkClient: ClerkClient) => {
       let id = opts.id;
 
       if (!id) {
-        const { data: users } = await clerkClient.users.getUserList({
-          emailAddress: [opts.email],
-          phoneNumber: [opts.phoneNumber],
-        });
+        const { data: users } = await withErrorLogging('getUserList', () =>
+          clerkClient.users.getUserList({
+            emailAddress: [opts.email],
+            phoneNumber: [opts.phoneNumber],
+          }),
+        );
         id = users[0]?.id;
       }
 
@@ -159,12 +176,12 @@ export const createUserService = (clerkClient: ClerkClient) => {
         return;
       }
 
-      await clerkClient.users.deleteUser(id);
+      await withErrorLogging('deleteUser', () => clerkClient.users.deleteUser(id));
     },
     getUser: async (opts: { id?: string; email?: string }) => {
       if (opts.id) {
         try {
-          const user = await clerkClient.users.getUser(opts.id);
+          const user = await withErrorLogging('getUser', () => clerkClient.users.getUser(opts.id));
           return user;
         } catch (err) {
           console.log(`Error fetching user "${opts.id}": ${err.message}`);
@@ -173,7 +190,9 @@ export const createUserService = (clerkClient: ClerkClient) => {
       }
 
       if (opts.email) {
-        const { data: users } = await clerkClient.users.getUserList({ emailAddress: [opts.email] });
+        const { data: users } = await withErrorLogging('getUserList', () =>
+          clerkClient.users.getUserList({ emailAddress: [opts.email] }),
+        );
         if (users.length > 0) {
           return users[0];
         } else {
@@ -186,33 +205,41 @@ export const createUserService = (clerkClient: ClerkClient) => {
     },
     createFakeOrganization: async userId => {
       const name = faker.animal.dog();
-      const organization = await clerkClient.organizations.createOrganization({
-        name: faker.animal.dog(),
-        createdBy: userId,
-      });
+      const organization = await withErrorLogging('createOrganization', () =>
+        clerkClient.organizations.createOrganization({
+          name: faker.animal.dog(),
+          createdBy: userId,
+        }),
+      );
       return {
         name,
         organization,
-        delete: () => clerkClient.organizations.deleteOrganization(organization.id),
+        delete: () =>
+          withErrorLogging('deleteOrganization', () => clerkClient.organizations.deleteOrganization(organization.id)),
       } satisfies FakeOrganization;
     },
     createFakeAPIKey: async (userId: string) => {
       const TWENTY_MINUTES = 20 * 60;
 
-      const apiKey = await clerkClient.apiKeys.create({
-        subject: userId,
-        name: `Integration Test - ${faker.string.uuid()}`,
-        secondsUntilExpiration: TWENTY_MINUTES,
-      });
+      const apiKey = await withErrorLogging('createAPIKey', () =>
+        clerkClient.apiKeys.create({
+          subject: userId,
+          name: `Integration Test - ${faker.string.uuid()}`,
+          secondsUntilExpiration: TWENTY_MINUTES,
+        }),
+      );
 
       return {
         apiKey,
         secret: apiKey.secret ?? '',
-        revoke: () => clerkClient.apiKeys.revoke({ apiKeyId: apiKey.id, revocationReason: 'For testing purposes' }),
+        revoke: () =>
+          withErrorLogging('revokeAPIKey', () =>
+            clerkClient.apiKeys.revoke({ apiKeyId: apiKey.id, revocationReason: 'For testing purposes' }),
+          ),
       } satisfies FakeAPIKey;
     },
     passwordCompromised: async (userId: string) => {
-      await clerkClient.users.__experimental_passwordCompromised(userId);
+      await withErrorLogging('passwordCompromised', () => clerkClient.users.__experimental_passwordCompromised(userId));
     },
   };
 
