Skip to content

Commit af291c6

Browse files
alexisintechalexisintech
authored
Audit org docs; move org custom flows (#2009)
1 parent 5d845e9 commit af291c6

31 files changed

+1044
-1061
lines changed

‎docs/authentication/enterprise-connections/authentication-flows.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ title: Enterprise SSO authentication flows
33
description: Learn about the Enterprise SSO authentication flows.
44
---
55

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

128
## SAML
139

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

6258
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).
59+
60+
### EASIE
61+
62+
EASIE connections support the authentication flows described at [easie.dev](https://easie.dev).

‎docs/components/organization/organization-list.mdx

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,68 @@ title: '`<OrganizationList />` component'
33
description: Clerk's <OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.
44
---
55

6-
![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' } }}
6+
![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' } }}
77

8-
The `<OrganizationList />` component is used to display organization related memberships, [invitations, and suggestions](/docs/organizations/overview#automatic-invitations-and-suggestions) for the user.
8+
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.
99

1010
## Properties
1111

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

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

18-
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`.
18+
The full URL or path to navigate to after creating a new organization.
1919

2020
---
2121

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

25-
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`.
25+
The full URL or path to navigate to after selecting an organization. Defaults to `undefined`.
2626

2727
---
2828

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

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

3434
---
3535

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

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

4141
---
4242

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

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

4848
---
4949

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

53-
Full URL or path to navigate to after selecting the personal account. Defaults to `undefined`.
53+
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`.
5454

5555
---
5656

5757
- `hideSlug`
5858
- `boolean`
5959

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

6262
---
6363

64-
- `fallback?`
65-
- `ReactNode`
64+
- `skipInvitationScreen`
65+
- `boolean | undefined`
6666

67-
An optional element to be rendered while the component is mounting.
67+
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`.
6868
</Properties>
6969

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

173-
## Usage with JavaScript
173+
<If sdk="javascript-frontend">
174+
## Usage with JavaScript
174175

175-
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:
176+
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:
176177

177-
- [`mountOrganizationList()`](#mount-organization-list)
178-
- [`unmountOrganizationList()`](#unmount-organization-list)
178+
- [`mountOrganizationList()`](#mount-organization-list)
179+
- [`unmountOrganizationList()`](#unmount-organization-list)
179180

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

182-
## `mountOrganizationList()`
183+
## `mountOrganizationList()`
183184

184-
Render the `<OrganizationList />` component to an HTML `<div>` element.
185+
Render the `<OrganizationList />` component to an HTML `<div>` element.
185186

186-
```typescript
187-
function mountOrganizationList(node: HTMLDivElement, props?: OrganizationListProps): void
188-
```
187+
```typescript
188+
function mountOrganizationList(node: HTMLDivElement, props?: OrganizationListProps): void
189+
```
189190

190-
### `mountOrganizationList()` params
191+
### `mountOrganizationList()` params
191192

192-
<Properties>
193-
- `node`
194-
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
193+
<Properties>
194+
- `node`
195+
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
195196

196-
The `<div>` element used to render in the `<OrganizationList />` component
197+
The `<div>` element used to render in the `<OrganizationList />` component
197198

198-
---
199+
---
199200

200-
- `props?`
201-
- [`OrganizationListProps`](#properties)
201+
- `props?`
202+
- [`OrganizationListProps`](#properties)
202203

203-
The properties to pass to the `<OrganizationList />` component
204-
</Properties>
204+
The properties to pass to the `<OrganizationList />` component
205+
</Properties>
205206

206-
### `mountOrganizationList()` usage
207+
### `mountOrganizationList()` usage
207208

208-
```js {{ filename: 'main.js', mark: [15] }}
209-
import { Clerk } from '@clerk/clerk-js'
209+
```js {{ filename: 'main.js', mark: [15] }}
210+
import { Clerk } from '@clerk/clerk-js'
210211
211-
// Initialize Clerk with your Clerk Publishable Key
212-
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
212+
// Initialize Clerk with your Clerk Publishable Key
213+
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
213214
214-
const clerk = new Clerk(clerkPubKey)
215-
await clerk.load()
215+
const clerk = new Clerk(clerkPubKey)
216+
await clerk.load()
216217
217-
document.getElementById('app').innerHTML = `
218-
<div id="organization-list"></div>
219-
`
218+
document.getElementById('app').innerHTML = `
219+
<div id="organization-list"></div>
220+
`
220221
221-
const orgListDiv = document.getElementById('organization-list')
222+
const orgListDiv = document.getElementById('organization-list')
222223
223-
clerk.mountOrganizationList(orgListDiv)
224-
```
224+
clerk.mountOrganizationList(orgListDiv)
225+
```
225226

226-
## `unmountOrganizationList()`
227+
## `unmountOrganizationList()`
227228

228-
Unmount and run cleanup on an existing `<OrganizationList />` component instance.
229+
Unmount and run cleanup on an existing `<OrganizationList />` component instance.
229230

230-
```typescript
231-
function unmountOrganizationList(node: HTMLDivElement): void
232-
```
231+
```typescript
232+
function unmountOrganizationList(node: HTMLDivElement): void
233+
```
233234

234-
### `unmountOrganizationList()` params
235+
### `unmountOrganizationList()` params
235236

236-
<Properties>
237-
- `node`
238-
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
237+
<Properties>
238+
- `node`
239+
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
239240

240-
The container `<div>` element with a rendered `<OrganizationList />` component instance
241-
</Properties>
241+
The container `<div>` element with a rendered `<OrganizationList />` component instance
242+
</Properties>
242243

243-
### `unmountOrganizationList()` usage
244+
### `unmountOrganizationList()` usage
244245

245-
```js {{ filename: 'main.js', mark: [19] }}
246-
import { Clerk } from '@clerk/clerk-js'
246+
```js {{ filename: 'main.js', mark: [19] }}
247+
import { Clerk } from '@clerk/clerk-js'
247248
248-
// Initialize Clerk with your Clerk Publishable Key
249-
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
249+
// Initialize Clerk with your Clerk Publishable Key
250+
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
250251
251-
const clerk = new Clerk(clerkPubKey)
252-
await clerk.load()
252+
const clerk = new Clerk(clerkPubKey)
253+
await clerk.load()
253254
254-
document.getElementById('app').innerHTML = `
255-
<div id="organization-list"></div>
256-
`
255+
document.getElementById('app').innerHTML = `
256+
<div id="organization-list"></div>
257+
`
257258
258-
const orgListDiv = document.getElementById('organization-list')
259+
const orgListDiv = document.getElementById('organization-list')
259260
260-
clerk.mountOrganizationList(orgListDiv)
261+
clerk.mountOrganizationList(orgListDiv)
261262
262-
// ...
263+
// ...
263264
264-
clerk.unmountOrganizationList(orgListDiv)
265-
```
265+
clerk.unmountOrganizationList(orgListDiv)
266+
```
267+
</If>
266268

267269
## Force organizations
268270

269-
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).
271+
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).
270272

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

0 commit comments

Comments
 (0)