mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
import { useParams } from 'common'
|
|
import { FormHeader } from 'components/ui/Forms/FormHeader'
|
|
import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers/Shimmers'
|
|
import { useAuthConfigQuery } from 'data/auth/auth-config-query'
|
|
import {
|
|
AlertDescription_Shadcn_,
|
|
AlertTitle_Shadcn_,
|
|
Alert_Shadcn_,
|
|
Button,
|
|
WarningIcon,
|
|
} from 'ui'
|
|
import { getPhoneProviderValidationSchema, PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation'
|
|
import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
|
|
import ProviderForm from './ProviderForm'
|
|
|
|
const AuthProvidersForm = () => {
|
|
const { ref: projectRef } = useParams()
|
|
const {
|
|
isLoading,
|
|
error: authConfigError,
|
|
isError,
|
|
data: authConfig,
|
|
isSuccess,
|
|
} = useAuthConfigQuery({ projectRef })
|
|
|
|
return (
|
|
<div>
|
|
<FormHeader
|
|
title="Auth Providers"
|
|
description="Authenticate your users through a suite of providers and login methods"
|
|
/>
|
|
|
|
<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_>
|
|
)}
|
|
{isLoading &&
|
|
PROVIDERS_SCHEMAS.map((provider) => {
|
|
return (
|
|
<div
|
|
key={`provider_${provider.title}`}
|
|
className={[...ProviderCollapsibleClasses, 'px-6 py-3'].join(' ')}
|
|
>
|
|
<HorizontalShimmerWithIcon />
|
|
</div>
|
|
)
|
|
})}
|
|
{isError && (
|
|
<Alert_Shadcn_ variant="destructive">
|
|
<WarningIcon />
|
|
<AlertTitle_Shadcn_>Failed to retrieve auth configuration</AlertTitle_Shadcn_>
|
|
<AlertDescription_Shadcn_>{authConfigError.message}</AlertDescription_Shadcn_>
|
|
</Alert_Shadcn_>
|
|
)}
|
|
{isSuccess &&
|
|
PROVIDERS_SCHEMAS.map((provider) => {
|
|
const providerSchema =
|
|
provider.title === 'Phone'
|
|
? { ...provider, validationSchema: getPhoneProviderValidationSchema(authConfig) }
|
|
: provider
|
|
return (
|
|
<ProviderForm
|
|
key={`provider_${providerSchema.title}`}
|
|
config={authConfig}
|
|
provider={providerSchema as any}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AuthProvidersForm
|