Files
supabase/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
32b5d8c244 feat: enable Self-Service Single Sign-On (SSO) for orgs (#36732)
* Start

* Add join org logic

* Regenerate the API types and add RQ hooks.

* Various fixes to the UI for SSO config.

* Refactor the components to use RHF.

* Fix the loading/error states in the main file.

* fix: minor changes to SSO UI

* Expanded default attribute mapping preset for `Okta` to include `user_name`, `first_name`, and `last_name` to match our docs.
* Normalized role casing in the "Join Organization on Signup" dropdown to match the roles expected by the backend (`Owner`, `Administrator`, `Developer`).
* Added the role (`Read-only`) to the selectable roles for auto-join.
* Call update mutation when an `ssoConfig` has been retrieved.
* Treats `404` as a valid "create" flow state rather than an error.
* Conditionally renders the SSO config form when config is successfully loaded *or* when the provider is not found, allowing users to onboard from scratch and disable the provider.

* chore: prettier

* feat: add a button linking to SSO setup docs

* Revert "feat: add a button linking to SSO setup docs"

This will be included in a separate docs pr.

This reverts commit 0b616fdd2e.

* General clean up

* Nit copy

* Add empty state for SSO

* Smol change

* One last tweak

---------

Co-authored-by: Chris Stockton <180184+cstockton@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Chris Stockton <chris.stockton@supabase.io>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-05 17:03:30 -07:00

74 lines
2.5 KiB
TypeScript

import { useForm } from 'react-hook-form'
import {
FormControl_Shadcn_,
FormField_Shadcn_,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectGroup_Shadcn_,
SelectItem_Shadcn_,
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
Switch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { SSOConfigFormSchema } from './SSOConfig'
export const JoinOrganizationOnSignup = ({
form,
}: {
form: ReturnType<typeof useForm<SSOConfigFormSchema>>
}) => {
const joinOrgOnSignup = form.watch('joinOrgOnSignup')
return (
<div className="space-y-4">
<FormField_Shadcn_
control={form.control}
name="joinOrgOnSignup"
render={({ field }) => (
<FormItemLayout
layout="flex-row-reverse"
label="Automatically add users to organization on sign up"
description="If disabled, users will need to be invited to the organization after signing up"
>
<FormControl_Shadcn_ className="flex items-center gap-2">
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
{joinOrgOnSignup && (
<FormField_Shadcn_
control={form.control}
name="roleOnJoin"
render={({ field }) => (
<FormItemLayout
label="Default role on join"
description="Select a role for the user when they join the organization"
layout="flex-row-reverse"
className="justify-between"
>
<FormControl_Shadcn_>
<Select_Shadcn_ value={field.value} onValueChange={(val) => field.onChange(val)}>
<SelectTrigger_Shadcn_ className="w-52">
<SelectValue_Shadcn_ placeholder="Select a role" />
</SelectTrigger_Shadcn_>
<SelectContent_Shadcn_>
<SelectGroup_Shadcn_>
<SelectItem_Shadcn_ value="Owner">Owner</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="Administrator">Administrator</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="Developer">Developer</SelectItem_Shadcn_>
<SelectItem_Shadcn_ value="Read-only">Read-only</SelectItem_Shadcn_>
</SelectGroup_Shadcn_>
</SelectContent_Shadcn_>
</Select_Shadcn_>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
)}
</div>
)
}