feat(clerk-js): Introduce reset password session task (#7268)

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

Author: octoper

.changeset/loose-brooms-occur.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Introduce `reset-password` session task

.changeset/thick-dancers-battle.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Introducing `users.__experimental_passwordUntrusted` action

integration/presets/envs.ts

@@ -151,6 +151,13 @@ const withSessionTasks = base
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks').pk)
   .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
 
+const withSessionTasksResetPassword = base
+  .clone()
+  .setId('withSessionTasksResetPassword')
+  .setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
+  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-session-tasks-reset-password').sk)
+  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-session-tasks-reset-password').pk);
+
 const withBillingJwtV2 = base
   .clone()
   .setId('withBillingJwtV2')
@@ -203,6 +210,7 @@ export const envs = {
   withRestrictedMode,
   withReverification,
   withSessionTasks,
+  withSessionTasksResetPassword,
   withSignInOrUpEmailLinksFlow,
   withSignInOrUpFlow,
   withSignInOrUpwithRestrictedModeFlow,

integration/presets/longRunningApps.ts

@@ -31,14 +31,15 @@ export const createLongRunningApps = () => {
     { id: 'next.appRouter.withSignInOrUpFlow', config: next.appRouter, env: envs.withSignInOrUpFlow },
     { id: 'next.appRouter.withSignInOrUpEmailLinksFlow', config: next.appRouter, env: envs.withSignInOrUpEmailLinksFlow },
     { id: 'next.appRouter.withSessionTasks', config: next.appRouter, env: envs.withSessionTasks },
+    { id: 'next.appRouter.withSessionTasksResetPassword', config: next.appRouter, env: envs.withSessionTasksResetPassword },
     { id: 'next.appRouter.withLegalConsent', config: next.appRouter, env: envs.withLegalConsent },
 
     /**
      * Quickstart apps
      */
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
 
-    /** 
+    /**
      * Billing apps
      */
     { id: 'withBillingJwtV2.next.appRouter', config: next.appRouter, env: envs.withBillingJwtV2 },
@@ -60,14 +61,14 @@ export const createLongRunningApps = () => {
     { id: 'react.vite.withEmailLinks', config: react.vite, env: envs.withEmailLinks },
     { id: 'vue.vite', config: vue.vite, env: envs.withCustomRoles },
 
-    /** 
+    /**
      * Tanstack apps - basic flows
      */
     { id: 'tanstack.react-start', config: tanstack.reactStart, env: envs.withEmailCodes },
- 
+
     /**
      * Various apps - basic flows
-     */ 
+     */
     { id: 'withBilling.astro.node', config: astro.node, env: envs.withBilling },
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
     { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
@@ -80,7 +81,7 @@ export const createLongRunningApps = () => {
 
   const apps = configs.map(longRunningApplication);
 
-  return { 
+  return {
     getByPattern: (patterns: Array<string | (typeof configs)[number]['id']>) => {
       const res = new Set(patterns.map(pattern => apps.filter(app => idMatchesPattern(app.id, pattern))).flat());
       if (!res.size) {

integration/testUtils/organizationsService.ts

@@ -6,6 +6,7 @@ export type FakeOrganization = Pick<Organization, 'slug' | 'name'>;
 export type OrganizationService = {
   deleteAll: () => Promise<void>;
   createFakeOrganization: () => FakeOrganization;
+  createBapiOrganization: (fakeOrganization: FakeOrganization & { createdBy: string }) => Promise<Organization>;
 };
 
 export const createOrganizationsService = (clerkClient: ClerkClient) => {
@@ -19,6 +20,14 @@ export const createOrganizationsService = (clerkClient: ClerkClient) => {
       const bulkDeletionPromises = organizations.data.map(({ id }) => clerkClient.organizations.deleteOrganization(id));
       await Promise.all(bulkDeletionPromises);
     },
+    createBapiOrganization: async (fakeOrganization: FakeOrganization & { createdBy: string }) => {
+      const organization = await clerkClient.organizations.createOrganization({
+        name: fakeOrganization.name,
+        slug: fakeOrganization.slug,
+        createdBy: fakeOrganization.createdBy,
+      });
+      return organization;
+    },
   };
 
   return self;

integration/testUtils/usersService.ts

@@ -76,6 +76,7 @@ export type UserService = {
   createFakeOrganization: (userId: string) => Promise<FakeOrganization>;
   getUser: (opts: { id?: string; email?: string }) => Promise<User | undefined>;
   createFakeAPIKey: (userId: string) => Promise<FakeAPIKey>;
+  passwordUntrusted: (userId: string) => Promise<void>;
 };
 
 /**
@@ -210,6 +211,9 @@ export const createUserService = (clerkClient: ClerkClient) => {
         revoke: () => clerkClient.apiKeys.revoke({ apiKeyId: apiKey.id, revocationReason: 'For testing purposes' }),
       } satisfies FakeAPIKey;
     },
+    passwordUntrusted: async (userId: string) => {
+      await clerkClient.users.__experimental_passwordUntrusted(userId);
+    },
   };
 
   return self;

integration/tests/session-tasks-sign-in-reset-password.test.ts

@@ -0,0 +1,99 @@
+import { test } from '@playwright/test';
+
+import { hash } from '../models/helpers';
+import { appConfigs } from '../presets';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasksResetPassword] })(
+  'session tasks after sign-in reset password flow @nextjs',
+  ({ app }) => {
+    test.describe.configure({ mode: 'parallel' });
+
+    test.afterAll(async () => {
+      await app.teardown();
+    });
+
+    test('resolve both reset password and organization selection tasks after sign-in', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      const user = u.services.users.createFakeUser();
+      const createdUser = await u.services.users.createBapiUser(user);
+
+      await u.services.users.passwordUntrusted(createdUser.id);
+
+      // Performs sign-in
+      await u.po.signIn.goTo();
+      await u.po.signIn.setIdentifier(user.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(user.password);
+      await u.po.signIn.continue();
+
+      await u.page.getByRole('textbox', { name: 'code' }).click();
+      await u.page.keyboard.type('424242', { delay: 100 });
+
+      // Redirects back to tasks when accessing protected route by `auth.protect`
+      await u.page.goToRelative('/page-protected');
+
+      const newPassword = `${hash()}_testtest`;
+      await u.po.sessionTask.resolveResetPasswordTask({
+        newPassword: newPassword,
+        confirmPassword: newPassword,
+      });
+
+      await u.po.sessionTask.resolveForceOrganizationSelectionTask({
+        name: 'Test Organization',
+      });
+
+      // Navigates to after sign-in
+      await u.page.waitForAppUrl('/page-protected');
+
+      await u.page.signOut();
+      await u.page.context().clearCookies();
+
+      await user.deleteIfExists();
+      await u.services.organizations.deleteAll();
+    });
+
+    test('sign-in with email and resolve the reset password task', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      const user = u.services.users.createFakeUser();
+      const createdUser = await u.services.users.createBapiUser(user);
+
+      await u.services.users.passwordUntrusted(createdUser.id);
+      const fakeOrganization = u.services.organizations.createFakeOrganization();
+      await u.services.organizations.createBapiOrganization({
+        ...fakeOrganization,
+        createdBy: createdUser.id,
+      });
+
+      // Performs sign-in
+      await u.po.signIn.goTo();
+      await u.po.signIn.setIdentifier(user.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(user.password);
+      await u.po.signIn.continue();
+
+      await u.page.getByRole('textbox', { name: 'code' }).fill('424242');
+
+      await u.po.expect.toBeSignedIn();
+
+      // Redirects back to tasks when accessing protected route by `auth.protect`
+      await u.page.goToRelative('/page-protected');
+
+      const newPassword = `${hash()}_testtest`;
+      await u.po.sessionTask.resolveResetPasswordTask({
+        newPassword: newPassword,
+        confirmPassword: newPassword,
+      });
+
+      // Navigates to after sign-in
+      await u.page.waitForAppUrl('/page-protected');
+
+      await u.page.signOut();
+      await u.page.context().clearCookies();
+
+      await user.deleteIfExists();
+      await u.services.organizations.deleteAll();
+    });
+  },
+);

packages/backend/src/api/endpoints/UserApi.ts

@@ -447,4 +447,15 @@ export class UserAPI extends AbstractAPI {
       path: joinPaths(basePath, userId, 'totp'),
     });
   }
+
+  public async __experimental_passwordUntrusted(userId: string) {
+    this.requireId(userId);
+    return this.request<User>({
+      method: 'POST',
+      path: joinPaths(basePath, userId, 'password_untrusted'),
+      bodyParams: {
+        revokeAllSessions: false,
+      },
+    });
+  }
 }

packages/clerk-js/bundlewatch.config.json

@@ -31,6 +31,6 @@
     { "path": "./dist/op-plans-page*.js", "maxSize": "1.0KB" },
     { "path": "./dist/statement-page*.js", "maxSize": "1.0KB" },
     { "path": "./dist/payment-attempt-page*.js", "maxSize": "3.0KB" },
-    { "path": "./dist/sessionTasks*.js", "maxSize": "1.5KB" }
+    { "path": "./dist/sessionTasks*.js", "maxSize": "3.0KB" }
   ]
 }

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

@@ -8,6 +8,7 @@ import { buildURL, forwardClerkQueryParams } from '../utils';
  */
 export const INTERNAL_SESSION_TASK_ROUTE_BY_KEY: Record<SessionTask['key'], string> = {
   'choose-organization': 'choose-organization',
+  'reset-password': 'reset-password',
 } as const;
 
 /**