fix(auth): ✨ Permission based access

src/components/Page.tsx

@@ -1,14 +1,18 @@
 import { Center, Container, Paper, Text, useMantineColorScheme, useMantineTheme } from '@mantine/core';
 import Header, { LogoHeader } from './Header';
 import { NextSeo, NextSeoProps } from 'next-seo';
+import React, { useEffect } from 'react';
 import { motion, useScroll, useTransform } from 'framer-motion';
 
+import Error from 'next/error';
+import ErrorPage from '../pages/_error';
 import Footer from './Footer';
-import React from 'react';
+import { NextResponse } from 'next/server';
 import classes from '../styles/components/Page.module.css';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
+import { useUser } from '../hooks/useUser';
 
 interface PageProps {
 	children: React.ReactNode;
@@ -29,17 +33,21 @@ interface PageProps {
 	seo?: NextSeoProps;
 	hideHeaderOnInitialScroll?: boolean;
 	style?: React.CSSProperties;
+	requiredPermissions?: string[];
 }
 
 const Page = (props: PageProps) => {
 	const matches = useMediaQuery('(min-width: 900px)');
 	const router = useRouter();
-	const { data: session } = useSession();
+	const user = useUser();
 	const theme = useMantineTheme();
 	const scheme = useMantineColorScheme();
 	const { scrollY, scrollYProgress } = useScroll();
 	const bgPosY = useTransform(scrollYProgress, (latest) => `${latest * 5 + 50}%`);
-	return (
+
+	return props.requiredPermissions && !user.hasPermissions(props.requiredPermissions) ? (
+		<ErrorPage code={403} />
+	) : (
 		<>
 			<NextSeo title={props.title || props.head?.title} canonical={'https://beta.buildtheearth.net' + router.pathname} description={props.description} {...props.seo} />
 			{!props.disabled?.header && (
@@ -57,6 +65,7 @@ const Page = (props: PageProps) => {
 					}}
 				/>
 			)}
+
 			<Paper className={classes.root} style={props.fullWidth ? props.style : undefined}>
 				{props.head && (
 					<motion.div

src/pages/_error.tsx

@@ -42,10 +42,10 @@ function ErrorPage(props: any) {
 							{code}
 						</Title>
 						<Title style={{ color: '#ffffff' }} ta="center" order={1}>
-							{t([`${code}.title`, 'fallback.title'], { error: code })}
+							{errors[code].title}
 						</Title>
 						<Title style={{ color: theme.colors.gray[4] }} ta="center" order={3}>
-							{t([`${code}.message`, 'fallback.message'], { error: code })}
+							{errors[code].message}
 							<br />
 							<Button
 								variant="outline"
@@ -76,3 +76,67 @@ export async function getStaticProps({ locale }: any) {
 	};
 }
 export default ErrorPage;
+
+const errors: any = {
+	fallback: {
+		title: 'Something went wrong',
+		message: 'Please try again later.',
+	},
+	'301': {
+		title: 'Moved Permanently',
+		message: 'The page you requested has been permanently moved to a different URL. Please try again with the new URL.',
+	},
+	'400': {
+		title: 'Bad Request',
+		message: 'Please reload the page and check for a working internet connection.',
+	},
+	'401': {
+		title: 'Unauthorized',
+		message: 'You are not allowed to access this page.',
+	},
+	'403': {
+		title: 'Forbidden',
+		message: 'You are not allowed to access this page.',
+	},
+	'404': {
+		title: 'While we are busy building the earth, we have not yet built this page.',
+		message: "We can't find the page you're looking for. Please check the URL and try again.",
+	},
+	'405': {
+		title: 'Method Not Allowed',
+		message: 'The method used to access this page is not allowed. Please try again with a GET method.',
+	},
+	'408': {
+		title: 'Request Timeout',
+		message: 'The page you are looking for is taking too long to load. Please try again later.',
+	},
+	'418': {
+		title: '🫖',
+		message: 'Please get comfortable with the tea and try again.',
+	},
+	'429': {
+		title: 'Too Many Requests',
+		message: 'You are trying to access this page too often. Please try again later.',
+	},
+	'500': {
+		code: '500',
+		title: 'Internal Server Error',
+		message: "We're having some issues with our server, please try again later.",
+	},
+	'501': {
+		title: 'Not Implemented',
+		message: 'Your browser does not support features our website requires. Please update your browser.',
+	},
+	'502': {
+		title: 'Bad Gateway',
+		message: 'Our servers are overloaded at the given time, please try again later.',
+	},
+	'503': {
+		title: 'Service Unavailable',
+		message: 'Our servers are overloaded at the given time, please try again later.',
+	},
+	'508': {
+		title: 'Loop Detected',
+		message: 'We detected a loop. Please try again later.',
+	},
+};

src/pages/faq/manage.tsx

@@ -148,6 +148,7 @@ const Faq: NextPage = () => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/faq.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['faq.edit', 'faq.remove', 'faq.add']}
 		>
 			{!data ? (
 				<></>

src/pages/me/claims/[id].tsx

@@ -79,6 +79,7 @@ const ClaimPage: NextPage = ({ claimId, data }: any) => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/me.png',
 			}}
 			smallPadding
+			requiredPermissions={['account.edit', 'account.info']}
 		>
 			{!data ? (
 				<></>

src/pages/me/index.tsx

@@ -26,6 +26,7 @@ const MePage: NextPage = () => {
 				title: t('head.title'),
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/me.png',
 			}}
+			requiredPermissions={['account.info']}
 		>
 			{data ? (
 				<>

src/pages/me/settings/[type].tsx

@@ -64,6 +64,7 @@ const Settings: NextPage = ({ type }: any) => {
 				title: 'Account Settings',
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/me.png',
 			}}
+			requiredPermissions={['account.edit', 'account.info']}
 		>
 			<Tabs value={type} onChange={(v) => router.push({ query: { type: v } })}>
 				<Tabs.List>

src/pages/teams/[team]/manage/apply.tsx

@@ -146,6 +146,7 @@ const Apply: NextPage = ({ data: tempData, team }: any) => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/teams.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				<Modal zIndex={9999} opened={editingQuestion != null} onClose={() => setEditingQuestion(null)} title="Edit Question" centered size="lg">

src/pages/teams/[team]/manage/images.tsx

@@ -138,6 +138,7 @@ const Settings = () => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/teams.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
 		>
 			<SettingsTabs team={router.query.team?.toString() || ''} loading={!data || loading}>
 				<Table.ScrollContainer minWidth={800}>

src/pages/teams/[team]/manage/members.tsx

@@ -202,6 +202,7 @@ const Settings = () => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/teams.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
 		>
 			<SettingsTabs team={router.query.team?.toString() || ''} loading={!(builders && managers)}>
 				<SearchInput onSearch={setFilter} inputProps={{ placeholder: 'Filter...' }} />

src/pages/teams/[team]/manage/review/[id].tsx

@@ -76,6 +76,7 @@ const Apply: NextPage = ({ team, id }: any) => {
 				title: 'Review Application',
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/apply.png',
 			}}
+			requiredPermissions={['team.application.review']}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				{data && (

src/pages/teams/[team]/manage/review/index.tsx

@@ -19,6 +19,7 @@ const Review = ({ team }: any) => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/teams.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				<Table.ScrollContainer minWidth={800}>

src/pages/teams/[team]/manage/settings.tsx

@@ -86,6 +86,7 @@ const Settings = ({ data: tempData }: any) => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/teams.png',
 			}}
 			seo={{ nofollow: true, noindex: true }}
+			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
 		>
 			<SettingsTabs team={data?.id} loading={!data}>
 				{data && (