Build a custom flow for updating an organization

Warning

This guide is for users who want to build a custom user interface using the Clerk API. To use a prebuilt UI, use the Account Portal pages or prebuilt components.

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.

Next.js

JavaScript

The following example:

Uses the useOrganization() hook to fetch the active organization.
Uses organization to call the update() method with the desired name to update the organization. To see what other attributes can be updated, see the update() reference doc.

This example is written for Next.js App Router but can be adapted for any React-based framework.

app/components/UpdateOrganization.tsx

'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>
  )
}

Edit this page on GitHub

Last updated on Mar 8, 2025

Build a custom flow for updating an organization

Feedback