Async error while not using any

Question

Hey i was trying to get an isAdmin from a user's session in order for the user to access the admin page if given clearance, the code seems fine but it returns an error saying

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components.

Here is my page.js code

'use client'

import AdminNav from "@/components/admincomponents/adminnavbar";
import Dashboard from "@/components/admincomponents/dashboard";
import LoadingPage from "@/components/loading";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function Admin() {
    const router = useRouter()
    const {data: session, status} = useSession()

    const adminRole = session?.user.isadmin

    useEffect(() => {
        if (status === 'loading') return
        if (!adminRole) {
            router.push('/')
        }
    }, [adminRole, status])

    if (status === 'loading') {
        return (
            <LoadingPage />
        )
    }
    return (
        <>
        
        <AdminNav/>

        </>
    )

}

my layout.js code

import '../globals.css'
import Favicon from '../../public/favicon.ico'
import localFont from 'next/font/local'
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
import NextAuthSessionProvider from '@/components/SessionProvider'

require('dotenv').config()
config.autoAddCss = false
 
const myFont = localFont({ src: 'font.ttf' })

export const metadata = {
  // 
}

export default async function AdminLayout({ children }) {
  return (
    <html lang="en">
      <body className={myFont.className}>
        <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
      </body>
    </html>
  )
}

note : I also have an another client component who is just as similar but have no issues with it

Async error while not using any

0 Replies