getAccessToken from nextjs-auth0 is returning an empty token inside app router api and withApiAuthRequired

Help
,
1

Hey everyone,

I’m currently working on a nextJS project and have to access the user.sub inside the api. I was thinking of getting the access token inside of the api and decodiding it to access the user.sub, but when I call getAccessToken with req and res I get a token that looks like this:

eySomeInfoHere..someencodeHere

With the content between the dots being empty. See the shortened version below (I removed a couple chars)

eyJhbGciOiJkIn0..I0WiieOi0yubQJth.5pMGqaX4npcIkoAYHTxfoi7_niLo-RhxR5rHE0vJmjR7ZxRrSYWoBn3yKId1wFsf4LxdDXC9NuUz8xxBAYRSLoKgq2BZSv_xNRZ8LbWVRvcUl9EBj8BsrjbO5far9WEkgfBARbWdIOKMltrC2WDZVZ4peTWg


My nextjs Frontend only sends a session Cookie with each request, I haven’t changed much from the standart server side configuration here, where you don’t really ever get access to the auth token client side.

Other than that here is the structure of my code:
Frontend:

const SomeComponent = withPageAuthRequired(() => {
  callEndpoint()
  return <div></div>
});

async function callEndpoint() => {
  const response = await fetch("/route", {
    method: "POST",
    body: JSON.stringify({}),
  }
  ...
  return await response.json()
}

This hits the backend function (This one has all the logic in it, database calls are omitted on purpose):

import { Subscription } from "@/src/types/configurationTypes";
import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
import { PrismaClient } from "@prisma/client";
import { NextRequest, NextResponse } from "next/server";
import { isValidURLwithHTTPS } from "../../utils/validation";

const prisma = new PrismaClient();

const POST = withApiAuthRequired(async (req: NextRequest) => {
  const res = new NextResponse();
  try {
    const body: {
      name: string;
      cleartextName: string;
      socialUrls: string[];
      subscription: Subscription;
    } = await req.json();
    let isAllSocialUrlsValid = true;
    if (Array.isArray(body?.socialUrls)) {
      body?.socialUrls.forEach((link: string) => {
        try {
          if (!isValidURLwithHTTPS(link)) {
            isAllSocialUrlsValid = false;
          }
        } catch (err: any) {
          isAllSocialUrlsValid = false;
        }
      });
    } else {
      isAllSocialUrlsValid = false;
    }

    if (
      typeof body?.name === "string" &&
      isAllSocialUrlsValid &&
      body.socialUrls.length !== 0 &&
      typeof body?.cleartextName === "string" &&
      typeof body?.subscription === "string"
    ) {
      const createLabel = prisma.label.create({
        data: {
          name: body.name,
          cleartextName: body.cleartextName,
          subscription: body.subscription,
          socialUrls: body.socialUrls,
        },
      });

      // SEE HERE
      const { accessToken } = await getAccessToken(req, res, {
        authorizationParams: {
          audience: "myaudiencenameishere.eu.auth0.com",
          scope: "openid profile email",
        },
      });
      console.log(accessToken);


      /*const createLabelXUser = prisma.labelXUser.create({
        data: {
          labelName: body.name,
          userId: ,
          role: "ADMIN",
        }
      })*/
      return NextResponse.json("dbLabel", { status: 200 });
    }
    return NextResponse.json(
      { error: "Bad Request, your input failed to validate" },
      { status: 400 }
    );
  } catch (e: any) {
    return NextResponse.json(
      { error: "There hast been an Error!", message: e.message },
      { status: 500 }
    );
  }
});

export { POST };

Thanks in advance for any guidance on this, I might have missed some needed configuration but unfortunatly didn’t find any answers to what I’m doing wrong so far…