Skip to content

Commit 9307abf

Browse files
author
tu
committed
lint files so it passes checks
1 parent 3e70777 commit 9307abf

File tree

1 file changed

+36
-17
lines changed

1 file changed

+36
-17
lines changed

docs/guides/organizations/quickstart.mdx

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ Organizations let you group users with roles and permissions, enabling you to bu
4040
```
4141

4242
The `<OrganizationSwitcher />` component handles all organization flows including:
43+
4344
- Creating new organizations
4445
- Switching between organizations
4546
- Managing the active organization's profile
@@ -49,24 +50,31 @@ Organizations let you group users with roles and permissions, enabling you to bu
4950

5051
Use Clerk's hooks to access the current organization and role in your components:
5152

52-
```tsx {{ filename: 'app/page.tsx', mark: [3, [6, 9], 14, 17]}}
53+
```tsx {{ filename: 'app/page.tsx', mark: [3, [6, 9], 14, 17] }}
5354
'use client'
54-
55+
5556
import { useOrganization, useOrganizationList } from '@clerk/nextjs'
5657

5758
export default function Home() {
5859
const { organization } = useOrganization()
5960
const { userMemberships } = useOrganizationList({
6061
userMemberships: true,
6162
})
62-
63+
6364
return (
6465
<div className="p-8">
6566
<h1 className="text-2xl font-bold mb-4">
6667
Welcome to the <strong>{organization?.name}</strong> organization
6768
</h1>
6869
<p className="mb-6">
69-
Your role in this organization: <strong>{userMemberships?.data?.find((membership) => membership.organization.id === organization?.id)?.role}</strong>
70+
Your role in this organization:{' '}
71+
<strong>
72+
{
73+
userMemberships?.data?.find(
74+
(membership) => membership.organization.id === organization?.id,
75+
)?.role
76+
}
77+
</strong>
7078
</p>
7179
</div>
7280
)
@@ -90,14 +98,14 @@ Organizations let you group users with roles and permissions, enabling you to bu
9098
1. Click on the `<OrganizationSwitcher />` component, then **Create an organization**.
9199

92100
1. Enter `Acme Org` as the organization name.
93-
101+
94102
1. Invite users to your organization and select their role.
95103

96104
## Protect routes by organization and roles
97105

98106
You can protect routes based on organization membership, roles, and permissions. The `/protected` page checks if you are an admin in the `Acme Corp` organization:
99107

100-
```tsx {{ filename: 'app/protected/page.tsx', mark: [1, 6, 13, 14, 17, 18]}}
108+
```tsx {{ filename: 'app/protected/page.tsx', mark: [1, 6, 13, 14, 17, 18] }}
101109
import { auth, clerkClient } from '@clerk/nextjs/server'
102110

103111
export default async function Page() {
@@ -106,7 +114,11 @@ Organizations let you group users with roles and permissions, enabling you to bu
106114
const { orgId } = await auth.protect({ role: 'org:admin' })
107115

108116
if (!orgId) {
109-
return <p className="text-red-600">You must be signed in as an <strong>admin</strong> to access this page.</p>
117+
return (
118+
<p className="text-red-600">
119+
You must be signed in as an <strong>admin</strong> to access this page.
120+
</p>
121+
)
110122
}
111123

112124
// Fetch the organization to check its name
@@ -116,26 +128,34 @@ Organizations let you group users with roles and permissions, enabling you to bu
116128
// Check if organization name matches (e.g., "Acme Corp")
117129
const requiredOrgName = 'Acme Corp'
118130
if (organization.name !== requiredOrgName) {
119-
return <p className="text-red-600">You are currently not signed in as an <strong>admin</strong> in the <strong>{requiredOrgName}</strong> organization.</p>
131+
return (
132+
<p className="text-red-600">
133+
You are currently not signed in as an <strong>admin</strong> in the{' '}
134+
<strong>{requiredOrgName}</strong> organization.
135+
</p>
136+
)
120137
}
121-
122-
return <p className="text-green-600">You are currently signed in as an <strong>admin</strong> in the <strong>{requiredOrgName}</strong> organization.</p>
138+
139+
return (
140+
<p className="text-green-600">
141+
You are currently signed in as an <strong>admin</strong> in the{' '}
142+
<strong>{requiredOrgName}</strong> organization.
143+
</p>
144+
)
123145
}
124146
```
125147

126148
Learn more about protecting routes and checking organization roles in the [authorization guide](/docs/guides/organizations/roles-and-permissions).
127149

128150
## It's time to build your B2B SaaS!
129151

130-
You've added Clerk organizations to your Next.js app 🎉. Ready to scale to enterprise customers?
131-
152+
You've added Clerk organizations to your Next.js app 🎉. Ready to scale to enterprise customers?
153+
132154
- **Control access** with [custom roles and permissions](/docs/guides/organizations/roles-and-permissions) define granular permissions for different user types within organizations.
133-
155+
134156
- **Onboard entire companies** with [verified domains](/docs/guides/organizations/verified-domains) automatically invite users with approved email domains (e.g., `@company.com`) to join organizations without manual invitations.
135-
136-
- **Enable enterprise SSO** with [SAML and OIDC](/docs/guides/organizations/sso) let customers authenticate through their identity provider (Okta, Entra ID, Google Workspace) with unlimited connections, no per-connection fees.
137157

138-
158+
- **Enable enterprise SSO** with [SAML and OIDC](/docs/guides/organizations/sso) let customers authenticate through their identity provider (Okta, Entra ID, Google Workspace) with unlimited connections, no per-connection fees.
139159
</Steps>
140160

141161
## Next steps
@@ -159,4 +179,3 @@ Organizations let you group users with roles and permissions, enabling you to bu
159179
- [Organization components](/nextjs/reference/components/organization/organization-switcher)
160180
- Learn more about Clerk's prebuilt organization components.
161181
</Cards>
162-

0 commit comments

Comments
 (0)