<OrganizationSwitcher /> component

The <OrganizationSwitcher /> component allows a user to switch between their account types - their personal account and their joined organizations. This component is useful for applications that have a multi-tenant architecture, where users can be part of multiple organizations.

This component will show notifications to the user if they have organization invitations or suggestions. Admins will be able to see notifications for requests to join an organization.

If you would like to learn how to hide a user's personal account in order to enforce an organization-centric application, see the dedicated guide.

<OrganizationSwitcher /> properties

All props below are optional.

---

afterCreateOrganizationUrl string

Full URL or path to navigate to after creating a new organization.

---

appearance Appearance | undefined

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

---

createOrganizationUrl string

Full URL or path where the <OrganizationProfile /> component is mounted.

---

organizationProfileUrl string

Full URL or path where the <CreateOrganization /> component is mounted.

---

createOrganizationMode 'modal' | 'navigation'

Controls whether clicking the "Create organization" button will cause the <CreateOrganization/> component to open as a modal, or if the browser will navigate to the createOrganizationUrl where <CreateOrganization /> is mounted as a page.

Defaults to: 'modal'.

---

organizationProfileMode 'modal' | 'navigation'

Controls whether clicking the Manage organization button will cause the <OrganizationProfile /> component to open as a modal, or if the browser will navigate to the organizationProfileUrl where <OrganizationProfile /> is mounted as a page. Defaults to: 'modal'.

---

afterLeaveOrganizationUrl string

Full URL or path to navigate to after the user leaves the currently active organization.

---

afterSelectOrganizationUrl string

Full URL or path to navigate to after a successful organization switch.

---

hidePersonal boolean

By default, users can switch between organizations and their personal workspace. This option controls whether <OrganizationSwitcher /> will include the user's personal workspace in the organization list. Setting this to true will hide the personal workspace entry, and allow users to switch only between organizations. Defaults to: false.

---

defaultOpen boolean

Controls the default state of the <OrganizationSwitcher /> component.

---

organizationProfileProps object

Specify options for the underlying <OrganizationProfile /> component.

For example: {appearance: {...}}

---

hideSlug boolean Hides the optional slug field in the organization creation screen.

Usage with frameworks

Next.js

App Router

/app/organization-switcher/[[...organization-switcher]]/page.tsx

import { OrganizationSwitcher } from '@oneauxilia/nextjs'

export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  )
}

Pages Router

/pages/organization-switcher/[[...index]].tsx

import { OrganizationSwitcher } from '@oneauxilia/nextjs'

export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  )
}

React

organization-switcher.tsx

import { OrganizationSwitcher } from '@oneauxilia/oneauxilia-react'

export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  )
}

Remix

/pages/organization-switcher/$.tsx

import { OrganizationSwitcher } from '@oneauxilia/remix'

export default function OrganizationSwitcherPage() {
  return (
    <div>
      <OrganizationSwitcher />
    </div>
  )
}

Astro

/pages/organization-switcher.astro

---
import { OrganizationSwitcher } from '@oneauxilia/astro/components'
---

<OrganizationSwitcher />

Usage with JavaScript

The following methods available on an instance of the OneAuxilia class are used to render and control the <OrganizationSwitcher /> component:

• mountOrganizationSwitcher()

• unmountOrganizationSwitcher()

The following examples assume that you have followed the quickstart in order to add OneAuxilia to your JavaScript application.

mountOrganizationSwitcher()

Render the <OrganizationSwitcher /> component to an HTML <div> element.

function mountOrganizationSwitcher(node: HTMLDivElement, props?: OrganizationSwitcherProps): void

mountOrganizationSwitcher() params

---

node HTMLDivElement

The <div> element used to render in the <OrganizationSwitcher /> component

---

props? OrganizationSwitcherProps

The properties to pass to the <OrganizationSwitcher /> component

mountOrganizationSwitcher() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="organization-switcher"></div>
`

const orgSwitcherDiv = document.getElementById('organization-switcher')

oneauxilia.mountOrganizationSwitcher(orgSwitcherDiv)

unmountOrganizationSwitcher()

Unmount and run cleanup on an existing <OrganizationSwitcher /> component instance.

function unmountOrganizationSwitcher(node: HTMLDivElement): void

unmountOrganizationSwitcher() params

---

node HTMLDivElement

The container <div> element with a rendered <OrganizationSwitcher /> component instance

unmountOrganizationSwitcher() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="organization-switcher"></div>
`

const orgSwitcherDiv = document.getElementById('organization-switcher')

oneauxilia.mountOrganizationSwitcher(orgSwitcherDiv)

// ...

oneauxilia.unmountOrganizationSwitcher(orgSwitcherDiv)