Skip to main content
Docs

<TaskChooseOrganization /> component

The <TaskChooseOrganization /> component renders a UI for resolving the choose-organization task.

The <TaskChooseOrganization /> component renders a UI for resolving the choose-organization after-auth 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.

Properties

All props are optional.

  • Name
    redirectUrlComplete
    Type
    string
    Description

    The full URL or path to navigate to after successfully completing all tasks.

  • Name
    appearance
    Type
    Appearance | undefined
    Description

    Optional object to style your components. Will only affect Clerk components and not Account Portal pages.

Usage with frameworks

The following example demonstrates how to host the <TaskChooseOrganization /> component on a custom page.

app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'

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 .

app/onboarding/choose-organization/page.tsx
import { TaskChooseOrganization } from '@clerk/nextjs'

export default function Page() {
  return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}
index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ClerkProvider } from '@clerk/clerk-react'

// 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>,
)
src/onboarding/choose-organization.tsx
import { TaskChooseOrganization } from '@clerk/clerk-react'

const SelectOrganizationPage = () => <TaskChooseOrganization redirectUrlComplete="/dashboard" />

export default SelectOrganizationPage

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.

Feedback

What did you think of this content?

Last updated on