Build a custom flow for updating an organization
Organization members with appropriate permissions can update an organization. Currently, only the organization name and slug can be updated.
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.
This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix or Gatsby.
'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.
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);
}