feat(clerk-js): Introduce navigate for setActive (#6486)

Co-authored-by: Nikos Douvlis <[email protected]>

Author: LauraBeatris

.changeset/rich-donuts-agree.md

@@ -0,0 +1,23 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Add `navigate` parameter to `clerk.setActive()` for custom navigation before the session and/or organization is set.
+
+It's useful for handling pending session tasks for after-auth flows:
+
+```typescript
+await clerk.setActive({
+  session,
+  navigate: async ({ session }) => {
+    const currentTask = session.currentTask;
+    if (currentTask) {
+      await router.push(`/onboarding/${currentTask.key}`)
+      return;
+    }
+
+    await router.push('/dashboard')
+  }
+});
+```

.changeset/warm-rocks-flow.md

@@ -0,0 +1,10 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/react-router': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/remix': minor
+'@clerk/vue': minor
+---
+
+Rename `RedirectToTask` control component to `RedirectToTasks`

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

@@ -83,7 +83,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       await u.po.signIn.enterTestOtpCode();
 
       // Resolves task
-      await u.po.signIn.waitForMounted();
+      await u.po.signUp.waitForMounted();
       const fakeOrganization = Object.assign(u.services.organizations.createFakeOrganization(), {
         slug: u.services.organizations.createFakeOrganization().slug + '-with-sign-in-sso',
       });

integration/tests/session-tasks-sign-up.test.ts

@@ -1,19 +1,28 @@
+import { createClerkClient } from '@clerk/backend';
 import { expect, test } from '@playwright/test';
 
 import { appConfigs } from '../presets';
+import { instanceKeys } from '../presets/envs';
 import type { FakeUser } from '../testUtils';
 import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+import { createUserService } from '../testUtils/usersService';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
   'session tasks after sign-up flow @nextjs',
   ({ app }) => {
     test.describe.configure({ mode: 'serial' });
 
-    let fakeUser: FakeUser;
+    let regularFakeUser: FakeUser;
+    let fakeUserForOAuth: FakeUser;
 
     test.beforeEach(() => {
       const u = createTestUtils({ app });
-      fakeUser = u.services.users.createFakeUser({
+      regularFakeUser = u.services.users.createFakeUser({
+        fictionalEmail: true,
+        withPhoneNumber: true,
+        withUsername: true,
+      });
+      fakeUserForOAuth = u.services.users.createFakeUser({
         fictionalEmail: true,
         withPhoneNumber: true,
         withUsername: true,
@@ -23,7 +32,16 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
     test.afterAll(async () => {
       const u = createTestUtils({ app });
       await u.services.organizations.deleteAll();
-      await fakeUser.deleteIfExists();
+      await regularFakeUser.deleteIfExists();
+
+      // Delete user from OAuth provider instance
+      const client = createClerkClient({
+        secretKey: instanceKeys.get('oauth-provider').sk,
+        publishableKey: instanceKeys.get('oauth-provider').pk,
+      });
+      const users = createUserService(client);
+      await users.deleteIfExists({ email: fakeUserForOAuth.email });
+
       await app.teardown();
     });
 
@@ -38,8 +56,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       const u = createTestUtils({ app, page, context });
       await u.po.signUp.goTo();
       await u.po.signUp.signUpWithEmailAndPassword({
-        email: fakeUser.email,
-        password: fakeUser.password,
+        email: regularFakeUser.email,
+        password: regularFakeUser.password,
       });
       await u.po.expect.toBeSignedIn();
 
@@ -68,12 +86,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       await u.po.signIn.getGoToSignUp().click();
 
       await u.po.signUp.waitForMounted();
-      await u.po.signUp.setEmailAddress(fakeUser.email);
+      await u.po.signUp.setEmailAddress(fakeUserForOAuth.email);
       await u.po.signUp.continue();
       await u.po.signUp.enterTestOtpCode();
 
       // Resolves task
-      await u.po.signIn.waitForMounted();
+      await u.po.signUp.waitForMounted();
       const fakeOrganization = Object.assign(u.services.organizations.createFakeOrganization(), {
         slug: u.services.organizations.createFakeOrganization().slug + '-with-sign-in-sso',
       });

packages/clerk-js/bundlewatch.config.json

@@ -1,9 +1,9 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "622.25KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "76KB" },
+    { "path": "./dist/clerk.js", "maxSize": "625KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "78KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "117KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "58KB" },
+    { "path": "./dist/clerk.headless*.js", "maxSize": "61KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "113KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },