āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/authentication/task-choose-organization ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: '<TaskChooseOrganization /> component'
description: Clerk's <TaskSelectComponent /> component renders a UI for resolving the choose-organization task.
sdk: js-frontend, nextjs, react, react-router, remix, tanstack-react-start
{{ style: { maxWidth: '460px' } }}
The <TaskChooseOrganization /> component renders a UI for resolving the choose-organization session task. The functionality of the <TaskChooseOrganization /> component is controlled by the instance settings you specify in the Clerk Dashboard, such as sign-in and sign-up options and social connections. You can further customize your <TaskChooseOrganization /> component by passing additional properties at the time of rendering.
[!IMPORTANT] The
<TaskChooseOrganization/>component cannot render when a user doesn't have current session tasks.
<If sdk={["nextjs", "react", "react-router", "remix", "tanstack-react-start"]}>
Example
The following example demonstrates how to host the <TaskChooseOrganization /> component on a custom page.
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ClerkProvider taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}>
{children}
</ClerkProvider>
</body>
</html>
)
}
```
The `<TaskChooseOrganization />` component must be used in conjunction with the `<SignIn />` component. See the [dedicated guide on how to self-host the `<SignIn />` component](/docs/nextjs/guides/development/custom-sign-in-or-up-page).
```tsx {{ filename: 'app/onboarding/choose-organization/page.tsx' }}
import { TaskChooseOrganization } from '@clerk/nextjs'
export default function Page() {
return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}
```
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Add your Clerk Publishable Key to the .env file')
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ClerkProvider
publishableKey={PUBLISHABLE_KEY}
taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}
>
<App />
</ClerkProvider>
</React.StrictMode>,
)
```
```jsx {{ filename: 'src/onboarding/choose-organization.tsx' }}
import { TaskChooseOrganization } from '@clerk/clerk-react'
const ChooseOrganizationPage = () => <TaskChooseOrganization redirectUrlComplete="/dashboard" />
export default ChooseOrganizationPage
```
```tsx {{ filename: 'app/root.tsx', mark: [6] }}
import { ClerkProvider } from '@clerk/react-router'
import { Outlet } from 'react-router'
export default function App() {
return (
<ClerkProvider taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}>
<Outlet />
</ClerkProvider>
)
}
```
The `<TaskChooseOrganization />` component must be used in conjunction with the `<SignIn />` component. See the [dedicated guide on how to self-host the `<SignIn />` component](/docs/react-router/guides/development/custom-sign-in-or-up-page).
```tsx {{ filename: 'app/routes/onboarding/choose-organization.tsx' }}
import { TaskChooseOrganization } from '@clerk/react-router'
export default function ChooseOrganizationPage() {
return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}
```
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
import { rootAuthLoader } from '@clerk/remix/ssr.server'
import { ClerkApp } from '@clerk/remix'
export const meta: MetaFunction = () => [
{
charset: 'utf-8',
title: 'New Remix App',
viewport: 'width=device-width,initial-scale=1',
},
]
export const loader: LoaderFunction = (args) => rootAuthLoader(args)
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}
function App() {
return <Outlet />
}
export default ClerkApp(App, {
taskUrls: { 'choose-organization': '/onboarding/choose-organization' },
})
```
The `<TaskChooseOrganization />` component must be used in conjunction with the `<SignIn />` component. See the [dedicated guide on how to self-host the `<SignIn />` component](/docs/remix/guides/development/custom-sign-in-or-up-page).
```tsx {{ filename: 'app/routes/onboarding.choose-organization.tsx' }}
import { TaskChooseOrganization } from '@clerk/remix'
export default function ChooseOrganizationPage() {
return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}
```
```tsx {{ filename: 'src/routes/__root.tsx', mark: [7] }}
import * as React from 'react'
import { HeadContent, Scripts } from '@tanstack/react-router'
import { ClerkProvider } from '@clerk/tanstack-react-start'
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}>
<html>
<head>
<HeadContent />
</head>
<body>
{children}
<Scripts />
</body>
</html>
</ClerkProvider>
)
}
```
The `<TaskChooseOrganization />` component must be used in conjunction with the `<SignIn />` component. See the [dedicated guide on how to self-host the `<SignIn />` component](/docs/tanstack-react-start/guides/development/custom-sign-in-or-up-page).
```tsx {{ filename: 'src/routes/onboarding/choose-organization.tsx' }}
import { TaskChooseOrganization } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/onboarding/choose-organization')({
component: ChooseOrganizationPage,
})
function ChooseOrganizationPage() {
return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}
```
The following methods available on an instance of the Clerk class are used to render and control the <TaskChooseOrganization /> component:
The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.
mountTaskChooseOrganization()
Render the <TaskChooseOrganization /> component to an HTML <div> element.
function mountTaskChooseOrganization(
node: HTMLDivElement,
props?: TaskChooseOrganizationProps,
): void
mountTaskChooseOrganization() params
<Properties>
- `node `
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
The `<div>` element used to render in the `<TaskChooseOrganization />` component
---
- `props?`
- [`TaskChooseOrganizationProps`](#properties)
The properties to pass to the `<TaskChooseOrganization />` component.
mountTaskChooseOrganization() usage
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(pubKey)
await clerk.load()
if (clerk.isSignedIn) {
// Mount user button component
document.getElementById('signed-in').innerHTML = `
<div id="user-button"></div>
`
const userbuttonDiv = document.getElementById('user-button')
clerk.mountUserButton(userbuttonDiv)
} else if (clerk.session?.currentTask) {
switch (clerk.session.currentTask.key) {
case 'choose-organization': {
document.getElementById('app').innerHTML = `
<div id="task-choose-organization"></div>
`
const taskChooseOrganizationDiv = document.getElementById('task-choose-organization')
clerk.mountTaskChooseOrganization(taskChooseOrganizationDiv)
}
}
}
unmountTaskChooseOrganization()
Unmount and run cleanup on an existing <TaskChooseOrganization /> component instance.
function unmountTaskChooseOrganization(node: HTMLDivElement): void
unmountTaskChooseOrganization() params
<Properties>
- `node `
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
The container `<div>` element with a rendered `<SignUp />` component instance
unmountTaskChooseOrganization() usage
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(pubKey)
await clerk.load()
if (clerk.isSignedIn) {
// Mount user button component
document.getElementById('signed-in').innerHTML = `
<div id="user-button"></div>
`
const userbuttonDiv = document.getElementById('user-button')
clerk.mountUserButton(userbuttonDiv)
} else if (clerk.session?.currentTask) {
switch (clerk.session.currentTask.key) {
case 'choose-organization': {
document.getElementById('app').innerHTML = `
<div id="task-choose-organization"></div>
`
const taskChooseOrganizationDiv = document.getElementById('task-choose-organization')
clerk.mountTaskChooseOrganization(taskChooseOrganizationDiv)
// ...
clerk.unmountTaskChooseOrganization(taskChooseOrganizationDiv)
}
}
}
Properties
All props are optional.
<Properties> - `redirectUrlComplete` - `string`The full URL or path to navigate to after successfully completing all tasks.
appearance- <code>Appearance | undefined</code>
Optional object to style your components. Will only affect Clerk components and not Account Portal pages. </Properties>
Customization
To learn about how to customize Clerk components, see the customization documentation.
If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā