diff --git a/docs/manifest.json b/docs/manifest.json index fff9c8650a..c153ff1832 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -3202,6 +3202,10 @@ "title": "``", "href": "/docs/reference/components/control/redirect-to-sign-up" }, + { + "title": "``", + "href": "/docs/reference/components/control/redirect-to-tasks" + }, { "title": "``", "href": "/docs/reference/components/control/redirect-to-user-profile" diff --git a/docs/reference/components/control/redirect-to-create-organization.mdx b/docs/reference/components/control/redirect-to-create-organization.mdx index f6032c01c5..411aff3b7d 100644 --- a/docs/reference/components/control/redirect-to-create-organization.mdx +++ b/docs/reference/components/control/redirect-to-create-organization.mdx @@ -1,6 +1,6 @@ --- title: '`` (deprecated)' -description: The 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 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 --- diff --git a/docs/reference/components/control/redirect-to-tasks.mdx b/docs/reference/components/control/redirect-to-tasks.mdx new file mode 100644 index 0000000000..7b1558972b --- /dev/null +++ b/docs/reference/components/control/redirect-to-tasks.mdx @@ -0,0 +1,142 @@ +--- +title: '``' +description: The 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 `` 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. [See the guide on creating custom pages for sessions tasks](/docs/guides/development/custom-flows/overview#session-tasks). + +## Example + + + ```tsx {{ filename: 'app/layout.tsx' }} + import { SignedOut, RedirectToTasks } from '@clerk/nextjs' + + export default function Layout({ children }: { children: React.ReactNode }) { + return ( + <> + + + + {children} + + ) + } + ``` + + + + ```tsx {{ filename: 'pages/index.tsx' }} + import { SignedOut, RedirectToTasks } from '@clerk/clerk-react' + + export default function Page() { + return ( + <> + + + + + ) + } + ``` + + + + ```tsx {{ filename: 'app/routes/home.tsx' }} + import { SignedOut, RedirectToTasks } from '@clerk/react-router' + + export default function Home() { + return ( + <> + + + + + ) + } + ``` + + + + > [!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 ( + <> + + + + + ) + } + ``` + + + + ```tsx {{ filename: 'app/routes/_index.tsx' }} + import { SignedOut, RedirectToTasks } from '@clerk/remix' + + export default function Index() { + return ( +
+ + + +
+ ) + } + ``` +
+ + + ```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 ( +
+ + + +
+ ) + } + ``` +
+ + + ```vue {{ filename: 'App.vue' }} + + + + ``` + + + + ```vue {{ filename: 'App.vue' }} + + + + ``` + diff --git a/docs/reference/components/overview.mdx b/docs/reference/components/overview.mdx index 09261cf3b7..26ff1234df 100644 --- a/docs/reference/components/overview.mdx +++ b/docs/reference/components/overview.mdx @@ -40,6 +40,7 @@ Control components manage authentication-related behaviors in your application. - [``](/docs/reference/components/control/protect) - [``](/docs/reference/components/control/redirect-to-sign-in) - [``](/docs/reference/components/control/redirect-to-sign-up) +- [``](/docs/reference/components/control/redirect-to-tasks) - [``](/docs/reference/components/control/redirect-to-user-profile) - [``](/docs/reference/components/control/redirect-to-organization-profile) - [``](/docs/reference/components/control/redirect-to-create-organization)