Error when using getServerSideProps
HI guys, i got this project where im gonna protect using getServerSideprops and next auth, so users cant access admin page, i made the function that can be called inside gssp, this happen when i refersh the page
1 Reply
The function
the page
any ideas guys?
import type { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "../server/auth";
import type { Session } from "next-auth";
import type { Role } from "@prisma/client";
type Callback = (data: { session: Session }) => void;
type RoleRedirects = {
[key: string]: {
[key: string]: string;
};
};
const roleRedirects: RoleRedirects = {
user: {
// Only allow users to access their own page
USER: "/dashboard/user/home",
},
admin: {
// Allow admins to access both the admin and user pages
USER: "/dashboard/user",
ADMIN: "/dashboard/accounts-management",
},
};
export async function roleGuard(
ctx: GetServerSidePropsContext,
cb: Callback,
role: Role
) {
try {
const session = await getServerAuthSession(ctx);
if (!session) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
// Check if the user has the required role or is an admin
const userRole = session.user?.role as Role;
if (userRole !== role && userRole !== "admin") {
// Redirect to the home page if the user doesn't have the required role
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
// Determine the redirection destination based on the user's role
const redirectDestination = roleRedirects[role]?.[userRole];
if (redirectDestination) {
// Redirect to the appropriate page if needed
return {
redirect: {
destination: redirectDestination,
permanent: false,
},
};
}
// Call the callback function with the session object
return cb({ session });
} catch (error) {
// Redirect to the home page in case of errors
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
}
import type { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "../server/auth";
import type { Session } from "next-auth";
import type { Role } from "@prisma/client";
type Callback = (data: { session: Session }) => void;
type RoleRedirects = {
[key: string]: {
[key: string]: string;
};
};
const roleRedirects: RoleRedirects = {
user: {
// Only allow users to access their own page
USER: "/dashboard/user/home",
},
admin: {
// Allow admins to access both the admin and user pages
USER: "/dashboard/user",
ADMIN: "/dashboard/accounts-management",
},
};
export async function roleGuard(
ctx: GetServerSidePropsContext,
cb: Callback,
role: Role
) {
try {
const session = await getServerAuthSession(ctx);
if (!session) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
// Check if the user has the required role or is an admin
const userRole = session.user?.role as Role;
if (userRole !== role && userRole !== "admin") {
// Redirect to the home page if the user doesn't have the required role
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
// Determine the redirection destination based on the user's role
const redirectDestination = roleRedirects[role]?.[userRole];
if (redirectDestination) {
// Redirect to the appropriate page if needed
return {
redirect: {
destination: redirectDestination,
permanent: false,
},
};
}
// Call the callback function with the session object
return cb({ session });
} catch (error) {
// Redirect to the home page in case of errors
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
}
/* eslint-disable @typescript-eslint/consistent-type-imports */
import { LineCharts } from "@/components/home/charts/charts";
import PatientList from "@/components/home/lists/patient";
import { type ReactElement } from "react";
import Layout from "@/components/dashboard/Layout";
import { type PasienPlusPage } from "@/pages/_app";
import { RevenueStats } from "@/components/home/stats/revenue";
import { PatientStats } from "@/components/home/stats/patient";
import Head from "next/head";
import { GetServerSidePropsContext } from "next/types";
import { roleGuard } from "@/utils/roleGuard";
const Home: PasienPlusPage = () => {
return (
<>
<Head>
<title>Pasien Plus | Dashboard</title>
</Head>
<div className="">
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-3">
<LineCharts />
<div className="col-span-2 grid grid-rows-1 gap-4 md:col-span-1 md:grid-rows-2">
<RevenueStats />
<PatientStats />
</div>
</div>
</div>
<PatientList pageSize={10} isPaginated={false} isDetailed={false} />
</>
);
};
Home.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>;
};
Home.authRequired = true;
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return roleGuard(ctx, (session) => ({
props: {
session,
},
}), "user")
}
export default Home;
/* eslint-disable @typescript-eslint/consistent-type-imports */
import { LineCharts } from "@/components/home/charts/charts";
import PatientList from "@/components/home/lists/patient";
import { type ReactElement } from "react";
import Layout from "@/components/dashboard/Layout";
import { type PasienPlusPage } from "@/pages/_app";
import { RevenueStats } from "@/components/home/stats/revenue";
import { PatientStats } from "@/components/home/stats/patient";
import Head from "next/head";
import { GetServerSidePropsContext } from "next/types";
import { roleGuard } from "@/utils/roleGuard";
const Home: PasienPlusPage = () => {
return (
<>
<Head>
<title>Pasien Plus | Dashboard</title>
</Head>
<div className="">
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-3">
<LineCharts />
<div className="col-span-2 grid grid-rows-1 gap-4 md:col-span-1 md:grid-rows-2">
<RevenueStats />
<PatientStats />
</div>
</div>
</div>
<PatientList pageSize={10} isPaginated={false} isDetailed={false} />
</>
);
};
Home.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>;
};
Home.authRequired = true;
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return roleGuard(ctx, (session) => ({
props: {
session,
},
}), "user")
}
export default Home;