AuthProvidersLayout.tsx46 lines · main

1	import { useParams } from 'common'
2	import { PropsWithChildren } from 'react'
3
4	import AuthLayout from './AuthLayout'
5	import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
6	import { UnknownInterface } from '@/components/ui/UnknownInterface'
7	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
8
9	export const AuthProvidersLayout = ({ children }: PropsWithChildren<{}>) => {
10	const { ref } = useParams()
11	const { authenticationSignInProviders, authenticationThirdPartyAuth } = useIsFeatureEnabled([
12	'authentication:sign_in_providers',
13	'authentication:third_party_auth',
14	])
15
16	const navItems = [
17	{
18	label: 'Briven Auth',
19	href: `/project/${ref}/auth/providers`,
20	},
21	...(authenticationThirdPartyAuth
22	? [
23	{
24	label: 'Third-Party Auth',
25	href: `/project/${ref}/auth/third-party`,
26	},
27	]
28	: []),
29	]
30
31	return (
32	<AuthLayout title="Sign In / Providers">
33	{authenticationSignInProviders ? (
34	<PageLayout
35	title="Sign In / Providers"
36	subtitle="Configure authentication providers and login methods for your users"
37	navigationItems={navItems}
38	>
39	{children}
40	</PageLayout>
41	) : (
42	<UnknownInterface urlBack={`/project/${ref}/auth/users`} />
43	)}
44	</AuthLayout>
45	)
46	}