Build a custom flow for updating an organization
Organization members with appropriate permissions can update an organization.
This guide will demonstrate how to use Clerk's API to build a custom flow for updating an organization.
The following example:
- Uses the
useOrganization()
hook to fetch the activeorganization
. - Uses
organization
to call theupdate()
method with the desired name to update the organization. To see what other attributes can be updated, see the .
This example is written for Next.js App Router but can be adapted for any React-based framework.
'use client'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useOrganization } from '@clerk/nextjs'
export default function UpdateOrganization() {
const [name, setName] = useState('')
const router = useRouter()
const { organization } = useOrganization()
useEffect(() => {
if (!organization) {
return
}
setName(organization.name)
}, [organization])
if (!organization) {
return null
}
async function submit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
try {
await organization?.update({ name })
router.push(`/organizations/${organization?.id}`)
} catch (err) {
console.error(err)
}
}
return (
<div>
<h1>Update the current organization</h1>
<form onSubmit={submit}>
<div>
<label htmlFor="name">Name</label>
<input id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} />
</div>
<button>Update</button>
</form>
</div>
)
}
The following example uses the organization.update()
method to update the active organization's name. To see what other attributes can be updated, see the .
Use the tabs to view the code necessary for the index.html
and main.js
files.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clerk + JavaScript App</title>
</head>
<body>
<div id="app"></div>
<h1>Update the current organization</h1>
<form id="update-organization">
<label for="name">Name</label>
<input id="name" name="name" />
<button>Update</button>
</form>
<script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
</body>
</html>
import { Clerk } from '@clerk/clerk-js'
const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!pubKey) {
throw new Error('Add your VITE_CLERK_PUBLISHABLE_KEY to .env file')
}
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()
if (clerk.user) {
// Check for an active organization
if (clerk.organization) {
const form = document.getElementById('update-organization')
form.addEventListener('submit', function (e) {
e.preventDefault()
const inputEl = document.getElementById('name')
if (!inputEl) {
// ... handle empty input
return
}
clerk.organization
.update({ name: inputEl.value })
.then((res) => console.log(`Updated org:`, res))
.catch((error) => console.log('An error occurred:', error))
})
} else {
// If there is no active organization,
// mount Clerk's <OrganizationSwitcher />
// to allow the user to set an organization as active
document.getElementById('app').innerHTML = `
<h2>Select an organization to set it as active</h2>
<div id="org-switcher"></div>
`
const orgSwitcherDiv = document.getElementById('org-switcher')
clerk.mountOrganizationSwitcher(orgSwitcherDiv)
}
} else {
// If there is no active user, mount Clerk's <SignIn />
document.getElementById('app').innerHTML = `
<div id="sign-in"></div>
`
const signInDiv = document.getElementById('sign-in')
clerk.mountSignIn(signInDiv)
}
Feedback
Last updated on