Skip to content
1 change: 1 addition & 0 deletions docs/_tooltips/session-tasks.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
**Session tasks** are pending requirements that users must complete after authentication, such as choosing an organization.
4 changes: 4 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -3226,6 +3226,10 @@
"title": "`<RedirectToSignUp />`",
"href": "/docs/reference/components/control/redirect-to-sign-up"
},
{
"title": "`<RedirectToTasks />`",
"href": "/docs/reference/components/control/redirect-to-tasks"
},
{
"title": "`<RedirectToUserProfile />`",
"href": "/docs/reference/components/control/redirect-to-user-profile"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: '`<RedirectToCreateOrganization />` (deprecated)'
description: The <RedirectToCreateOrganization /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
description: The <RedirectToCreateOrganization /> component will navigate to the create organization flow which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
sdk: nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
---

Expand Down
144 changes: 144 additions & 0 deletions docs/reference/components/control/redirect-to-tasks.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
---
title: '`<RedirectToTasks />`'
description: The <RedirectToTasks /> component will navigate to the tasks flow which has been configured in your application instance when users have pending session tasks. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
---

The `<RedirectToTasks />` component will navigate to the tasks flow which has been configured in your application instance when users have pending [session tasks](!session-tasks). The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

The `<RedirectToTasks />` component is primarily intended for use in custom flows. If you're using prebuilt components, you typically won't need to use `<RedirectToTasks />` as these components manage task redirection internally. [See the guide on handling session tasks outside of prebuilt components](/docs/guides/configure/session-tasks#redirecting-to-tasks).

## Example

<If sdk="nextjs">
```tsx {{ filename: 'app/layout.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/nextjs'

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<SignedOut>
<RedirectToTasks />
</SignedOut>
{children}
</>
)
}
```
</If>

<If sdk="react">
```tsx {{ filename: 'pages/index.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/clerk-react'

export default function Page() {
return (
<>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</>
)
}
```
</If>

<If sdk="react-router">
```tsx {{ filename: 'app/routes/home.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/react-router'

export default function Home() {
return (
<>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</>
)
}
```
</If>

<If sdk="chrome-extension">
> [!NOTE]
> This component relies on React Router for navigation. Ensure that you have integrated React Router into your Chrome Extension application before using it. [Learn how to add React Router to your Chrome Extension](/docs/guides/development/add-react-router).

```jsx {{ filename: 'src/routes/home.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/chrome-extension'

export default function Home() {
return (
<>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</>
)
}
```
</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/remix'

export default function Index() {
return (
<div>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</div>
)
}
```
</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/index.tsx' }}
import { SignedOut, RedirectToTasks } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
component: Home,
})

function Home() {
return (
<div>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</div>
)
}
```
</If>

<If sdk="vue">
```vue {{ filename: 'App.vue' }}
<script setup lang="ts">
import { SignedOut, RedirectToTasks } from '@clerk/vue'
</script>

<template>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</template>
```
</If>

<If sdk="nuxt">
```vue {{ filename: 'App.vue' }}
<script setup lang="ts">
// Components are automatically imported
</script>

<template>
<SignedOut>
<RedirectToTasks />
</SignedOut>
</template>
```
</If>
1 change: 1 addition & 0 deletions docs/reference/components/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ Control components manage authentication-related behaviors in your application.
- [`<Protect />`](/docs/reference/components/control/protect)
- [`<RedirectToSignIn />`](/docs/reference/components/control/redirect-to-sign-in)
- [`<RedirectToSignUp />`](/docs/reference/components/control/redirect-to-sign-up)
- [`<RedirectToTasks />`](/docs/reference/components/control/redirect-to-tasks)
- [`<RedirectToUserProfile />`](/docs/reference/components/control/redirect-to-user-profile)
- [`<RedirectToOrganizationProfile />`](/docs/reference/components/control/redirect-to-organization-profile)
- [`<RedirectToCreateOrganization />`](/docs/reference/components/control/redirect-to-create-organization)
Expand Down