chore(clerk-react,vue,nextjs): Introduce <RedirectToTask /> component (#6416)

Author: LauraBeatris

.changeset/slick-suns-hammer.md

@@ -0,0 +1,7 @@
+---
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/vue': minor
+---
+
+Introduce `<RedirectToTask />` component

packages/nextjs/src/client-boundary/controlComponents.ts

@@ -10,6 +10,7 @@ export {
   Protect,
   RedirectToSignIn,
   RedirectToSignUp,
+  RedirectToTask,
   RedirectToUserProfile,
   AuthenticateWithRedirectCallback,
   RedirectToCreateOrganization,

packages/nextjs/src/index.ts

@@ -12,6 +12,7 @@ export {
   RedirectToOrganizationProfile,
   RedirectToSignIn,
   RedirectToSignUp,
+  RedirectToTask,
   RedirectToUserProfile,
 } from './client-boundary/controlComponents';
 

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -20,6 +20,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "RedirectToOrganizationProfile",
   "RedirectToSignIn",
   "RedirectToSignUp",
+  "RedirectToTask",
   "RedirectToUserProfile",
   "SignIn",
   "SignInButton",

packages/react/src/components/controlComponents.tsx

@@ -166,6 +166,21 @@ export const RedirectToSignUp = withClerk(({ clerk, ...props }: WithClerkProp<Re
   return null;
 }, 'RedirectToSignUp');
 
+export const RedirectToTask = withClerk(({ clerk }: WithClerkProp) => {
+  const { session } = clerk;
+
+  React.useEffect(() => {
+    if (!session) {
+      void clerk.redirectToSignIn();
+      return;
+    }
+
+    void clerk.__internal_navigateToTaskIfAvailable();
+  }, []);
+
+  return null;
+}, 'RedirectToTask');
+
 /**
  * @function
  * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/references/javascript/clerk#redirect-to-user-profile) instead.

packages/react/src/components/index.ts

@@ -25,6 +25,7 @@ export {
   RedirectToOrganizationProfile,
   RedirectToSignIn,
   RedirectToSignUp,
+  RedirectToTask,
   RedirectToUserProfile,
   SignedIn,
   SignedOut,

packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -21,6 +21,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "RedirectToOrganizationProfile",
   "RedirectToSignIn",
   "RedirectToSignUp",
+  "RedirectToTask",
   "RedirectToUserProfile",
   "SignIn",
   "SignInButton",

packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -32,6 +32,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "RedirectToOrganizationProfile",
   "RedirectToSignIn",
   "RedirectToSignUp",
+  "RedirectToTask",
   "RedirectToUserProfile",
   "SignIn",
   "SignInButton",

packages/vue/src/components/controlComponents.ts

@@ -60,6 +60,21 @@ export const RedirectToSignUp = defineComponent((props: RedirectOptions) => {
   return () => null;
 });
 
+export const RedirectToTask = defineComponent((props: RedirectOptions) => {
+  const { sessionCtx } = useClerkContext();
+
+  useClerkLoaded(clerk => {
+    if (!sessionCtx.value) {
+      void clerk.redirectToSignIn(props);
+      return;
+    }
+
+    void clerk.__internal_navigateToTaskIfAvailable();
+  });
+
+  return () => null;
+});
+
 /**
  * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/references/javascript/clerk/redirect-methods#redirect-to-user-profile) instead.
  */