Skip to content

Audit org docs; move org custom flows #2009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Feb 17, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -3,11 +3,7 @@ title: Enterprise SSO authentication flows
description: Learn about the Enterprise SSO authentication flows.
---

Clerk offers the following types of Enterprise SSO connections: [EASIE](#easie), [SAML](#saml), and [OIDC](#oidc).

## EASIE

EASIE connections support the authentication flows described at [easie.dev](https://easie.dev).
Clerk offers the following types of Enterprise SSO connections: [SAML](#saml), [OIDC](#oidc), and [EASIE](#easie).

## SAML

@@ -60,3 +56,7 @@ To mitigate the risks associated with IdP-initiated flows, Clerk implements seve
## OIDC

Clerk supports Enterprise SSO via the OpenID Connect (OIDC) protocol, either through [EASIE](#easie) or by [integrating with any OIDC-compatible provider](/docs/authentication/enterprise-connections/oidc/custom-provider).

### EASIE

EASIE connections support the authentication flows described at [easie.dev](https://easie.dev).
172 changes: 87 additions & 85 deletions docs/components/organization/organization-list.mdx
Original file line number Diff line number Diff line change
@@ -3,68 +3,68 @@ title: '`<OrganizationList />` component'
description: Clerk's <OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.
---

![The \<OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.](/docs/images/ui-components/organization-list.png){{ style: { maxWidth: '460px' } }}
![The \<OrganizationList /> component displays organization-related memberships and automatic invitations and suggestions for the user.](/docs/images/ui-components/organization-list.png){{ style: { maxWidth: '460px' } }}

The `<OrganizationList />` component is used to display organization related memberships, [invitations, and suggestions](/docs/organizations/overview#automatic-invitations-and-suggestions) for the user.
The `<OrganizationList />` component displays organization-related memberships and automatic [invitations](/docs/organizations/verified-domains#automatic-invitations) and [suggestions](/docs/organizations/verified-domains#automatic-suggestions) for the user.

## Properties

All props are optional.
The `<OrganizationList />` component accepts the following properties, all of which are **optional**:

<Properties>
- `hidePersonal`
- `boolean`
- `afterCreateOrganizationUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>

By default, users can switch between organization and their personal account. This option controls whether `<OrganizationList />` will include the user's personal account in the organization list. Setting this to `false` will hide the personal account entry, and users will only be able to switch between organizations. Defaults to `false`.
The full URL or path to navigate to after creating a new organization.

---

- `skipInvitationScreen`
- `boolean | undefined`
- `afterSelectOrganizationUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>

Hides the screen for sending invitations after an organization is created. When left undefined Clerk will automatically hide the screen if the number of max allowed members is equal to 1. Defaults to `false`.
The full URL or path to navigate to after selecting an organization. Defaults to `undefined`.

---

- `appearance`
- <code>[Appearance](/docs/customization/overview) | undefined</code>
- `afterSelectPersonalUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>

Optional object to style your components. Will only affect [Clerk components](/docs/components/overview) and not [Account Portal](/docs/customization/account-portal/overview) pages.
The full URL or path to navigate to after selecting the personal account. Defaults to `undefined`.

---

- `afterCreateOrganizationUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>
- `appearance`
- <code>[Appearance](/docs/customization/overview) | undefined</code>

Full URL or path to navigate to after creating a new organization.
Optional object to style your components. Will only affect [Clerk components](/docs/components/overview) and not [Account Portal](/docs/customization/account-portal/overview) pages.

---

- `afterSelectOrganizationUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>
- `fallback?`
- `ReactNode`

Full URL or path to navigate to after selecting an organization. Defaults to `undefined`.
An optional element to be rendered while the component is mounting.

---

- `afterSelectPersonalUrl`
- <code>((org: [Organization][org-ref]) => string) | string</code>
- `hidePersonal`
- `boolean`

Full URL or path to navigate to after selecting the personal account. Defaults to `undefined`.
A boolean that controls whether `<OrganizationList />` will include the user's personal account in the organization list. Setting this to `true` will hide the personal account option, and users will only be able to switch between organizations. Defaults to `false`.

---

- `hideSlug`
- `boolean`

Hides the optional slug field in the organization creation screen.
A boolean that controls whether the optional slug field in the organization creation screen is hidden. Defaults to `false`.

---

- `fallback?`
- `ReactNode`
- `skipInvitationScreen`
- `boolean | undefined`

An optional element to be rendered while the component is mounting.
A boolean that controls whether the screen for sending invitations after an organization is created is hidden. When `undefined`, Clerk will automatically hide the screen if the number of max allowed members is equal to 1. Defaults to `false`.
</Properties>

## Usage with frameworks
@@ -170,103 +170,105 @@ All props are optional.
</Tab>
</Tabs>

## Usage with JavaScript
<If sdk="javascript-frontend">
## Usage with JavaScript

The following methods available on an instance of the [`Clerk`](/docs/references/javascript/clerk/clerk) class are used to render and control the `<OrganizationList />` component:
The following methods available on an instance of the [`Clerk`](/docs/references/javascript/clerk/clerk) class are used to render and control the `<OrganizationList />` component:

- [`mountOrganizationList()`](#mount-organization-list)
- [`unmountOrganizationList()`](#unmount-organization-list)
- [`mountOrganizationList()`](#mount-organization-list)
- [`unmountOrganizationList()`](#unmount-organization-list)

The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application.
The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application.

## `mountOrganizationList()`
## `mountOrganizationList()`

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

```typescript
function mountOrganizationList(node: HTMLDivElement, props?: OrganizationListProps): void
```
```typescript
function mountOrganizationList(node: HTMLDivElement, props?: OrganizationListProps): void
```

### `mountOrganizationList()` params
### `mountOrganizationList()` params

<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)

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

---
---

- `props?`
- [`OrganizationListProps`](#properties)
- `props?`
- [`OrganizationListProps`](#properties)

The properties to pass to the `<OrganizationList />` component
</Properties>
The properties to pass to the `<OrganizationList />` component
</Properties>

### `mountOrganizationList()` usage
### `mountOrganizationList()` usage

```js {{ filename: 'main.js', mark: [15] }}
import { Clerk } from '@clerk/clerk-js'
```js {{ filename: 'main.js', mark: [15] }}
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()
const clerk = new Clerk(clerkPubKey)
await clerk.load()

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

const orgListDiv = document.getElementById('organization-list')
const orgListDiv = document.getElementById('organization-list')

clerk.mountOrganizationList(orgListDiv)
```
clerk.mountOrganizationList(orgListDiv)
```

## `unmountOrganizationList()`
## `unmountOrganizationList()`

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

```typescript
function unmountOrganizationList(node: HTMLDivElement): void
```
```typescript
function unmountOrganizationList(node: HTMLDivElement): void
```

### `unmountOrganizationList()` params
### `unmountOrganizationList()` params

<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)

The container `<div>` element with a rendered `<OrganizationList />` component instance
</Properties>
The container `<div>` element with a rendered `<OrganizationList />` component instance
</Properties>

### `unmountOrganizationList()` usage
### `unmountOrganizationList()` usage

```js {{ filename: 'main.js', mark: [19] }}
import { Clerk } from '@clerk/clerk-js'
```js {{ filename: 'main.js', mark: [19] }}
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()
const clerk = new Clerk(clerkPubKey)
await clerk.load()

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

const orgListDiv = document.getElementById('organization-list')
const orgListDiv = document.getElementById('organization-list')

clerk.mountOrganizationList(orgListDiv)
clerk.mountOrganizationList(orgListDiv)

// ...
// ...

clerk.unmountOrganizationList(orgListDiv)
```
clerk.unmountOrganizationList(orgListDiv)
```
</If>

## Force organizations

If you would like to prohibit people from using their personal accounts and force them to be part of an organization, the `hidePersonal` property forces your user to join or create an organization in order to continue. For more information on how to hide Personal Accounts and force organizations, see the [dedicated guide](/docs/organizations/force-organizations).
If you would like to prohibit people from using their personal accounts and force them to be part of an organization, the `hidePersonal` property forces your user to join or create an organization in order to continue. For more information on how to hide personal accounts and force organizations, see the [dedicated guide](/docs/organizations/force-organizations).

```tsx {{ filename: 'organization-portal.tsx' }}
export default function OrganizationListPage() {
Loading
Loading