AttributeMapping() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx lines 90–157

export const AttributeMapping = ({
  form,
  emailField,
  userNameField,
  firstNameField,
  lastNameField,
}: {
  form: UseFormReturn<SSOConfigFormSchema>
  emailField: ProviderAttribute
  userNameField: ProviderAttribute
  firstNameField: ProviderAttribute
  lastNameField: ProviderAttribute
}) => {
  // Helper to apply a preset
  function applyPreset(preset: ProviderPreset) {
    const keys = preset.attributeMapping.keys
    // Set each field if present in the preset, otherwise clear
    form.setValue(emailField, [{ value: keys.email?.name ?? '' }])
    form.setValue(userNameField, [{ value: keys.user_name?.name ?? '' }])
    form.setValue(firstNameField, [{ value: keys.first_name?.name ?? '' }])
    form.setValue(lastNameField, [{ value: keys.last_name?.name ?? '' }])
  }

  return (
    <FormItemLayout
      label="Attribute mapping"
      layout="flex-row-reverse"
      description={
        <div>
          <p>Map SSO attributes to user fields</p>
          <div className="flex flex-col gap-y-2 my-2 mt-4">
            <p>Presets for supported identity providers:</p>
            <div className="flex items-center gap-x-2">
              {PROVIDER_PRESETS.map((preset) => (
                <Button key={preset.name} type="outline" onClick={() => applyPreset(preset)}>
                  {preset.name}
                </Button>
              ))}
            </div>
          </div>
        </div>
      }
      className="gap-1"
    >
      <div className="grid gap-2 justify-start">
        <MappingFieldArray form={form} fieldName={emailField} label="email" required />
        <MappingFieldArray
          form={form}
          fieldName={userNameField}
          label="user_name"
          required={false}
        />
        <MappingFieldArray
          form={form}
          fieldName={firstNameField}
          label="first_name"
          required={false}
        />
        <MappingFieldArray
          form={form}
          fieldName={lastNameField}
          label="last_name"
          required={false}
        />
      </div>
    </FormItemLayout>
  )
}