update

apps/nextjs-app/src/app/app/users/_components/admin-guard.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { Spinner } from '@/components/ui/spinner';
+import { useUser } from '@/lib/auth';
+import { canViewUsers } from '@/lib/authorization';
+
+export const AdminGuard = ({ children }: { children: React.ReactNode }) => {
+  const user = useUser();
+
+  if (!user?.data) {
+    return <Spinner className="m-4" />;
+  }
+
+  if (!canViewUsers(user?.data)) {
+    return <div>Only admin can view this.</div>;
+  }
+
+  return children;
+};

apps/nextjs-app/src/app/app/users/_components/users.tsx

@@ -6,16 +6,8 @@ import {
 
 import { getUsersQueryOptions } from '@/features/users/api/get-users';
 import { UsersList } from '@/features/users/components/users-list';
-import { getUser } from '@/lib/auth';
-import { canViewUsers } from '@/lib/authorization';
 
 export const Users = async () => {
-  const user = await getUser();
-
-  if (!canViewUsers(user)) {
-    return <div>Only admin can view this.</div>;
-  }
-
   const queryClient = new QueryClient();
 
   await queryClient.prefetchQuery(getUsersQueryOptions());

apps/nextjs-app/src/app/app/users/page.tsx

@@ -1,5 +1,6 @@
 import { ContentLayout } from '@/components/layouts/content-layout';
 
+import { AdminGuard } from './_components/admin-guard';
 import { Users } from './_components/users';
 
 export const metadata = {
@@ -10,7 +11,9 @@ export const metadata = {
 const UsersPage = () => {
   return (
     <ContentLayout title="Users">
-      <Users />
+      <AdminGuard>
+        <Users />
+      </AdminGuard>
     </ContentLayout>
   );
 };

apps/nextjs-app/src/app/layout.tsx

@@ -37,4 +37,6 @@ const RootLayout = async ({ children }: { children: ReactNode }) => {
 
 export default RootLayout;
 
+// We are not prerendering anything because the app is highly dynamic
+// and the data depends on the user so we need to send cookies with each request
 export const dynamic = 'force-dynamic';