AuthLayout.tsx49 lines · main

1	import { useParams } from 'common'
2	import { useRouter } from 'next/router'
3	import type { PropsWithChildren } from 'react'
4
5	import { ProjectLayout } from '../ProjectLayout'
6	import { useGenerateAuthMenu } from './AuthLayout.utils'
7	import { ProductMenu } from '@/components/ui/ProductMenu'
8	import { ProductMenuShortcuts } from '@/components/ui/ProductMenu/ProductMenuShortcuts'
9	import { useAuthConfigPrefetch } from '@/data/auth/auth-config-query'
10	import { withAuth } from '@/hooks/misc/withAuth'
11
12	export const AuthProductMenu = () => {
13	const router = useRouter()
14	const { ref: projectRef = 'default' } = useParams()
15
16	useAuthConfigPrefetch({ projectRef })
17	const page = router.pathname.split('/')[4]
18	const menu = useGenerateAuthMenu()
19
20	return <ProductMenu page={page} menu={menu} />
21	}
22
23	const AuthLayout = ({ title, children }: PropsWithChildren<{ title: string }>) => {
24	const router = useRouter()
25	const { ref: projectRef = 'default' } = useParams()
26
27	useAuthConfigPrefetch({ projectRef })
28	const page = router.pathname.split('/')[4]
29	const menu = useGenerateAuthMenu()
30
31	return (
32	<ProjectLayout
33	product="authentication"
34	browserTitle={{ section: title }}
35	productMenu={<ProductMenu page={page} menu={menu} />}
36	isBlocking={false}
37	>
38	<ProductMenuShortcuts menu={menu} />
39	{children}
40	</ProjectLayout>
41	)
42	}
43
44	/**
45	* Layout for all auth pages on the dashboard, wrapped with withAuth to verify logged in state
46	*
47	* Handles rendering the navigation for each section under the auth pages.
48	*/
49	export default withAuth(AuthLayout)