ProviderForm() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx lines 36–307

export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps) => {
  const { resolvedTheme } = useTheme()
  const { ref: projectRef } = useParams()
  const { data: organization } = useSelectedOrganizationQuery()
  const [urlProvider, setUrlProvider] = useQueryState('provider', { defaultValue: '' })

  const [open, setOpen] = useState(false)
  const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()

  const { can: canUpdateConfig } = useAsyncCheckPermissions(
    PermissionAction.UPDATE,
    'custom_config_gotrue'
  )

  const shouldDisableField = (field: string): boolean => {
    const shouldDisableSmsFields =
      config.HOOK_SEND_SMS_ENABLED &&
      field.startsWith('SMS_') &&
      ![
        'SMS_AUTOCONFIRM',
        'SMS_OTP_EXP',
        'SMS_OTP_LENGTH',
        'SMS_OTP_LENGTH',
        'SMS_TEMPLATE',
        'SMS_TEST_OTP',
        'SMS_TEST_OTP_VALID_UNTIL',
      ].includes(field)
    return (
      ['EXTERNAL_SLACK_CLIENT_ID', 'EXTERNAL_SLACK_SECRET'].includes(field) ||
      shouldDisableSmsFields
    )
  }

  const isFreePlan = organization?.plan.id === 'free'
  const { data: settings } = useProjectSettingsV2Query({ projectRef })
  const protocol = settings?.app_config?.protocol ?? 'https'
  const endpoint = settings?.app_config?.endpoint
  const apiUrl = `${protocol}://${endpoint}`

  const { data: customDomainData } = useCustomDomainsQuery({ projectRef })

  const INITIAL_VALUES = (() => {
    const initialValues: { [x: string]: string | boolean } = {}
    Object.keys(provider.properties).forEach((key) => {
      const isDoubleNegative = doubleNegativeKeys.includes(key)
      if (provider.title === 'SAML 2.0') {
        const configValue = (config as any)[key]
        initialValues[key] =
          configValue || (provider.properties[key].type === 'boolean' ? false : '')
      } else {
        if (isDoubleNegative) {
          initialValues[key] = !(config as any)[key]
        } else {
          const configValue = (config as any)[key]
          initialValues[key] = configValue
            ? configValue
            : provider.properties[key].type === 'boolean'
              ? false
              : ''
        }
      }
    })
    return initialValues
  })()

  const onSubmit = (values: any, { resetForm }: any) => {
    const payload = { ...values }
    Object.keys(values).map((x: string) => {
      if (doubleNegativeKeys.includes(x)) payload[x] = !values[x]
      if (payload[x] === '') payload[x] = null
    })

    // The backend uses empty string to represent no required characters in the password
    if (payload.PASSWORD_REQUIRED_CHARACTERS === NO_REQUIRED_CHARACTERS) {
      payload.PASSWORD_REQUIRED_CHARACTERS = ''
    }

    updateAuthConfig(
      { projectRef: projectRef!, config: payload },
      {
        onSuccess: () => {
          resetForm({ values: { ...values }, initialValues: { ...values } })
          setOpen(false)
          setUrlProvider(null)
          toast.success('Successfully updated settings')
        },
      }
    )
  }

  // Handle clicking on a provider in the list
  const handleProviderClick = () => setUrlProvider(provider.title)

  const handleOpenChange = (isOpen: boolean) => {
    // Remove provider query param from URL when closed
    if (!isOpen) setUrlProvider(null)
  }

  // Open or close the form based on the query parameter
  useEffect(() => {
    const isProviderInQuery = urlProvider.toLowerCase() === provider.title.toLowerCase()
    setOpen(isProviderInQuery)
  }, [urlProvider, provider.title])

  return (
    <>
      <ResourceItem
        onClick={handleProviderClick}
        media={
          <img
            src={`${BASE_PATH}/img/icons/${provider.misc.iconKey}${provider.misc.hasLightIcon && !resolvedTheme?.includes('dark') ? '-light' : ''}.svg`}
            width={18}
            height={18}
            alt={`${provider.title} auth icon`}
          />
        }
        meta={
          isActive ? (
            <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
              <span className="rounded-full bg-brand p-0.5 text-xs text-brand-200">
                <Check strokeWidth={2} size={12} />
              </span>
              <span className="px-1">Enabled</span>
            </div>
          ) : (
            <div className="rounded-md border border-strong bg-surface-100 py-1 px-3 text-xs text-foreground-lighter">
              Disabled
            </div>
          )
        }
      >
        {provider.title}
      </ResourceItem>

      <Sheet open={open} onOpenChange={handleOpenChange}>
        <SheetContent className="flex flex-col gap-0">
          <SheetHeader className="shrink-0 flex items-center gap-4">
            <img
              src={`${BASE_PATH}/img/icons/${provider.misc.iconKey}${provider.misc.hasLightIcon && !resolvedTheme?.includes('dark') ? '-light' : ''}.svg`}
              width={18}
              height={18}
              alt={`${provider.title} auth icon`}
            />
            <SheetTitle>{provider.title}</SheetTitle>
          </SheetHeader>
          <Form
            id={`provider-${provider.title}-form`}
            name={`provider-${provider.title}-form`}
            initialValues={INITIAL_VALUES}
            validationSchema={provider.validationSchema}
            onSubmit={onSubmit}
            className="flex-1 overflow-hidden flex flex-col"
          >
            {({ handleReset, initialValues, values, setFieldValue }: any) => {
              const noChanges = JSON.stringify(initialValues) === JSON.stringify(values)
              return (
                <>
                  <div className="flex-1 overflow-y-auto group py-6 px-4 md:px-6 text-foreground">
                    <div className="mx-auto max-w-lg space-y-6">
                      <AuthAlert
                        title={provider.title}
                        isHookSendSMSEnabled={config.HOOK_SEND_SMS_ENABLED}
                      />

                      {Object.keys(provider.properties).map((x: string) => {
                        let description = provider.properties[x].description
                        if (description && projectRef) {
                          description = description.replace(
                            /\(\.\.\/auth\/(.*?)\)/g,
                            `(/project/${projectRef}/auth/$1)`
                          )
                        }

                        const properties = {
                          ...provider.properties[x],
                          description:
                            provider.properties[x].isPaid && isFreePlan
                              ? `${description} Only available on [Pro plan](/org/${organization.slug}/billing?panel=subscriptionPlan) and above.`
                              : description,
                        }
                        const isDisabledDueToPlan = properties.isPaid && isFreePlan
                        const shouldDisable =
                          properties.type === 'boolean'
                            ? isDisabledDueToPlan && !values[x]
                            : isDisabledDueToPlan

                        return (
                          <FormField
                            key={x}
                            name={x}
                            setFieldValue={setFieldValue}
                            properties={properties}
                            formValues={values}
                            disabled={shouldDisableField(x) || !canUpdateConfig || shouldDisable}
                          />
                        )
                      })}

                      {provider?.misc?.alert && (
                        <Admonition
                          type="warning"
                          title={provider.misc.alert.title}
                          description={
                            <ReactMarkdown>{provider.misc.alert.description}</ReactMarkdown>
                          }
                        />
                      )}

                      {provider.misc.requiresRedirect && (
                        <Input
                          copy
                          readOnly
                          disabled
                          label="Callback URL (for OAuth)"
                          value={
                            customDomainData?.customDomain?.status === 'active'
                              ? `https://${customDomainData.customDomain?.hostname}/auth/v1/callback`
                              : `${apiUrl}/auth/v1/callback`
                          }
                          descriptionText={
                            <Markdown
                              content={provider.misc.helper}
                              className="text-foreground-lighter"
                            />
                          }
                        />
                      )}
                    </div>
                  </div>
                  <SheetFooter className="shrink-0">
                    <div className="flex items-center justify-between w-full">
                      <DocsButton href={provider.link} />
                      <div className="flex items-center gap-x-3">
                        <Button
                          type="default"
                          htmlType="reset"
                          onClick={() => {
                            handleReset()
                            setOpen(false)
                            setUrlProvider(null)
                          }}
                          disabled={isUpdatingConfig}
                        >
                          Cancel
                        </Button>
                        <ButtonTooltip
                          htmlType="submit"
                          loading={isUpdatingConfig}
                          disabled={isUpdatingConfig || !canUpdateConfig || noChanges}
                          tooltip={{
                            content: {
                              side: 'bottom',
                              text: !canUpdateConfig
                                ? 'You need additional permissions to update provider settings'
                                : undefined,
                            },
                          }}
                        >
                          Save
                        </ButtonTooltip>
                      </div>
                    </div>
                  </SheetFooter>
                </>
              )
            }}
          </Form>
        </SheetContent>
      </Sheet>
    </>
  )
}