"use server" is only for server actions

and are you using app or pages dir? as getServerSideProps is pages...

pages dir

you don't need use server then (its a app dir thing)

Alright.

This is my page:

import { getSession } from "@auth0/nextjs-auth0";

export async function getServerSideProps(context: any) {
  const session = await getSession(context);
}

export default async function Home() {

  return (
    <div className='h-screen flex items-center justify-center'>
      <div className="font-bold text-4xl">Midlands</div>
    </div>
  )
}

When this page loads, the following error occurs:

Server Error
Error: Invariant: cookies() expects to have requestAsyncStorage, none available.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
src\pages\midlands\index.tsx (4:18) @ async getServerSideProps

  2 | 
  3 | export async function getServerSideProps(context: any) {
> 4 | const session = await getSession(context);
    |                ^
  5 | }
  6 | 
  7 | export default async function Home() {

I'm assuming I've just done everything wrong; but when I researched that error, the suggested solution in a number of threads was to use "use server".

.
To clarify what I am trying to achieve:
I'm using auth0, and currently am storing the users "roles" in their idToken, which I can access through:

user["http://localhost:3000/roles"]

I want to create a system that will only allow access to a page if the user has the required role in order to access it, and I am honestly stumped with what to do; my research has just led me around in circles so far.

does this work to get cookies: https://stackoverflow.com/a/63875689

as that cookies method you are currently using iirc is for app dir

It's throwing this error:

Server Error
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

so i think this is how you do getSession for pages dir: https://github.com/auth0/nextjs-auth0/blob/main/src/session/get-session.ts#L91-L94

Thanks for finding that for me.

I've just tried it now, and I no longer have any render errors, but neither of my console.log statements seem to be getting ran:

import { getSession } from '@auth0/nextjs-auth0';

export async function getServerSideProps(ctx) {
    const { user } = await getSession(ctx.req, ctx.res);
     console.log("Debug 1");
     console.log((user["http://localhost:3000/roles"] as string[]).join(", ").trimEnd());
    return { props: { foo: 'bar' } };
}

export default function Home() {

  return (
    <div className='h-screen flex items-center justify-center'>
      <div className="font-bold text-4xl">Midlands</div>
    </div>
  )
}

wait no I dont think that's how server side props works is it...

AHA

import { getSession } from '@auth0/nextjs-auth0';

export async function getServerSideProps(ctx) {
    const requiredRole = "midlands";

    const { user } = await getSession(ctx.req, ctx.res);
    if (!(user["http://localhost:3000/roles"] as string[]).includes(requiredRole)) {
      return {
        redirect: {
          destination: '/no-access',
          permanent: false,
        }
      }
    }
    return { props: { foo: 'bar' } };
}

export default function Home() {

  return (
    <div className='h-screen flex items-center justify-center'>
      <div className="font-bold text-4xl">Midlands</div>
    </div>
  )
}

got it. Cheers.

How would I move that logic into a seperate file so that I can easily use it across multiple pages?

do you have any utils folder or something

as you just need to create a file outside pages folder and you can import it

yeah right, and I'm assuming I'd have to modify the authorisation a bit & then call it differently on the class I want to limit access to?

how much of the code is reusable?

like the whole getServerSideProps, or which section

whole getServerSideProps, the only thing that would ever change is the requiredRole, that would be different for each page using it

yeah do you can make a function with the input param to be ctx and role required and just return that in server side props

yep makes sense, & that wouldn't allow a user to modify the requiredRole through inspect element or anything would it?

no, everything is still on your server

effectivly copying the code but cleaner

you can show me to check tho

👍 will do man, thanks for all of your help

import Navbar from '@/components/Navbar';
import { getSession } from '@auth0/nextjs-auth0';

import { authorise } from '../../utils/PageAuth'

export async function getServerSideProps(ctx: any) {
  return authorise(ctx, "midlands");
}

export default function Home() {

  return (
    <div>
      <Navbar load={true}/>
      <div className='h-screen flex items-center justify-center'>
        <div className="font-bold text-4xl">Midlands</div>
      </div>
    </div>
  )
}

import { getSession } from "@auth0/nextjs-auth0";

export async function authorise(ctx: any, requiredRole: string) {
    const { user } = (await getSession(ctx.req, ctx.res)) as { user: any };
    if (!(user["http://localhost:3000/roles"] as string[]).includes(requiredRole)) {
      return {
        redirect: {
          destination: '/no-access',
          permanent: false,
        }
      }
    }
    return { props: { foo: 'bar' } };
}

That's what I ended up with, everything's working. tysm man, really appreciate it.