AuthProvidersForm() — supabase Function Reference

Architecture documentation for the AuthProvidersForm() function in index.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ AuthProvidersForm() — supabase Function Reference

Dependency Diagram

graph TD
  683c3026_918c_b840_cac9_92aa5efe44ea["AuthProvidersForm()"]
  cea6c08c_3446_b168_effe_644c8d16d4af["getPhoneProviderValidationSchema()"]
  683c3026_918c_b840_cac9_92aa5efe44ea -->|calls| cea6c08c_3446_b168_effe_644c8d16d4af
  style 683c3026_918c_b840_cac9_92aa5efe44ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx lines 28–132

export const AuthProvidersForm = () => {
  const { ref: projectRef } = useParams()
  const {
    data: authConfig,
    error: authConfigError,
    isPending: isLoading,
    isError,
    isSuccess,
  } = useAuthConfigQuery({ projectRef })

  return (
    <PageSection>
      <PageSectionMeta>
        <PageSectionSummary>
          <PageSectionTitle>Auth Providers</PageSectionTitle>
          <PageSectionDescription>
            Authenticate your users through a suite of providers and login methods
          </PageSectionDescription>
        </PageSectionSummary>
      </PageSectionMeta>
      <PageSectionContent>
        {isError ? (
          <AlertError
            error={authConfigError}
            subject="Failed to retrieve auth configuration for hooks"
          />
        ) : (
          <div className="-space-y-px">
            {authConfig?.EXTERNAL_EMAIL_ENABLED && authConfig?.MAILER_OTP_EXP > 3600 && (
              <Alert_Shadcn_
                className="flex w-full items-center justify-between my-3"
                variant="warning"
              >
                <WarningIcon />
                <div>
                  <AlertTitle_Shadcn_>OTP expiry exceeds recommended threshold</AlertTitle_Shadcn_>
                  <AlertDescription_Shadcn_ className="flex flex-col gap-y-3">
                    <p>
                      We have detected that you have enabled the email provider with the OTP expiry
                      set to more than an hour. It is recommended to set this value to less than an
                      hour.
                    </p>
                    <Button asChild type="default" className="w-min" icon={<ExternalLink />}>
                      <Link href="https://supabase.com/docs/guides/platform/going-into-prod#security">
                        View security recommendations
                      </Link>
                    </Button>
                  </AlertDescription_Shadcn_>
                </div>
              </Alert_Shadcn_>
            )}

            <ResourceList>
              {isLoading &&
                PROVIDERS_SCHEMAS.map((provider) => (
                  <div
                    key={`provider_${provider.title}`}
                    className="py-4 px-6 border-b last:border-b-none"
                  >
                    <HorizontalShimmerWithIcon />
                  </div>
                ))}
              {isSuccess &&
                PROVIDERS_SCHEMAS.map((provider) => {
                  const providerSchema =
                    provider.title === 'Phone'
                      ? {
                          ...provider,
                          validationSchema: getPhoneProviderValidationSchema(authConfig),
                        }
                      : provider
                  let isActive = false
                  if (providerSchema.title === 'SAML 2.0') {
                    isActive = authConfig && (authConfig as any)['SAML_ENABLED']
                  } else if (providerSchema.title === 'LinkedIn (OIDC)') {
                    isActive = authConfig && (authConfig as any)['EXTERNAL_LINKEDIN_OIDC_ENABLED']
                  } else if (providerSchema.title === 'Slack (OIDC)') {
                    isActive = authConfig && (authConfig as any)['EXTERNAL_SLACK_OIDC_ENABLED']
                  } else if (providerSchema.title.includes('Web3')) {
                    isActive = authConfig && (authConfig as any)['EXTERNAL_WEB3_SOLANA_ENABLED']
                  } else if (providerSchema.title.includes('X / Twitter (OAuth 2.0)')) {
                    isActive = authConfig && (authConfig as any)['EXTERNAL_X_ENABLED']
                  } else if (providerSchema.title === 'Twitter (Deprecated)') {
                    isActive = authConfig && (authConfig as any)['EXTERNAL_TWITTER_ENABLED']
                  } else {
                    isActive =
                      authConfig &&
                      (authConfig as any)[`EXTERNAL_${providerSchema.title.toUpperCase()}_ENABLED`]
                  }
                  return (
                    <ProviderForm
                      key={`provider_${providerSchema.title}`}
                      config={authConfig!}
                      provider={providerSchema as unknown as Provider}
                      isActive={isActive}
                    />
                  )
                })}
            </ResourceList>
          </div>
        )}
      </PageSectionContent>
    </PageSection>
  )
}