third-party.tsx47 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { useParams } from 'common'
3	import { PageContainer } from 'ui-patterns/PageContainer'
4
5	import { ThirdPartyAuthForm } from '@/components/interfaces/Auth/ThirdPartyAuthForm'
6	import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
7	import { AuthProvidersLayout } from '@/components/layouts/AuthLayout/AuthProvidersLayout'
8	import DefaultLayout from '@/components/layouts/DefaultLayout'
9	import NoPermission from '@/components/ui/NoPermission'
10	import { UnknownInterface } from '@/components/ui/UnknownInterface'
11	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
12	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
13	import type { NextPageWithLayout } from '@/types'
14
15	const ThirdPartyPage: NextPageWithLayout = () => {
16	const { ref } = useParams()
17	const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions(
18	PermissionAction.READ,
19	'custom_config_gotrue'
20	)
21
22	const showThirdPartyAuth = useIsFeatureEnabled('authentication:third_party_auth')
23
24	if (!showThirdPartyAuth) {
25	return (
26	<AuthLayout title="Sign In / Providers">
27	<UnknownInterface urlBack={`/project/${ref}/auth/providers`} />
28	</AuthLayout>
29	)
30	}
31
32	return (
33	<AuthProvidersLayout>
34	{isPermissionsLoaded && !canReadAuthSettings ? (
35	<NoPermission isFullPage resourceText="access your project's auth provider settings" />
36	) : (
37	<PageContainer size="default" className="pb-16">
38	<ThirdPartyAuthForm />
39	</PageContainer>
40	)}
41	</AuthProvidersLayout>
42	)
43	}
44
45	ThirdPartyPage.getLayout = (page) => <DefaultLayout>{page}</DefaultLayout>
46
47	export default ThirdPartyPage