auth0 / nextjs-auth0

Next.js SDK for signing in with Auth0

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

unable to access Session after login to perform user setup (call database etc.), add stuff to session or cookies, etc.

Jared-Dahlke opened this issue · comments

Checklist

Description

after the user logs in, i'd like to get the accessToken off of their session, which i will use to get some more user info from our database. i want to then add that extra user info to the session. I am trying to use afterCallback but Session is null there.

I do not see any examples of how to do this. This is a very common thing, would be very helpful to have an example for this for latest Nextjs.

Here is my setup. I'm using middleware to protect all of the pages/api routes:

// middleware.ts

import { getSession } from "@auth0/nextjs-auth0/edge";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req: NextRequest) {
  const { nextUrl } = req;
  const session = await getSession();

  const isProtectedRoute =
    nextUrl.pathname.startsWith("/app") || nextUrl.pathname.startsWith("/api");

  const isNotProtectedRoute = nextUrl.pathname.startsWith("/api/auth");
  if (!session && isProtectedRoute && !isNotProtectedRoute) {
    const loginUrl = new URL("/api/auth/login", req.url);
    loginUrl.searchParams.set("returnTo", req.nextUrl.pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

Here is my auth route:

// /app/api/[auth0]/route.ts

import { queryGenius } from "@/app/actions/queryGenius";
import {
  Session,
  handleAuth,
  handleCallback,
  handleLogin,
} from "@auth0/nextjs-auth0";
import { NextApiRequest } from "next";
import { redirect } from "next/navigation";
import { NextRequest } from "next/server";

const afterCallback = (req, res, session, state) => {
  
  const dataFromDB = await getDataFromDb(accessToken)
  return {
    ...session,
    ...dataFromDB
  };
};

export const GET = handleAuth({
  async callback(req, res) {
    try {
      await handleCallback(req, res, { afterCallback });
    } catch (error) {
      res.status(error.status || 500).end(error.message);
    }
  }
});

Can you please provide an example or tell me what I am doing wrong?

Thank you!

Reproduction

  • run create-next-app@latest , install your library
  • set up according to your instructions
  • try to access accessToken and make an external call after user logs in, save extra data to session

expected: can do this
actual: can't do this

Additional context

No response

nextjs-auth0 version

"@auth0/nextjs-auth0": "^3.2.0",

Next.js version

"next": "14.0.1",

Node.js version

20

Hi @Jared-Dahlke

The signature for api route handlers is different between the page router and app router. Essentially, you don't get a res argument in handleCallback and you should return a res from your handler, so

import { handleAuth, handleCallback } from '@auth0/nextjs-auth0';

const afterCallback = (req, session) => {
  const dataFromDB = await getDataFromDb(session.accessToken)
  return {
    ...session,
    ...dataFromDB
  };
};

export const GET = handleAuth({
  async callback(req, ctx) {
    try {
      return await handleCallback(req, ctx, { afterCallback });
    } catch (error) {
      return new NextResponse(error.message, { status: error.status || 500 });
    }
  }
});

More info on afterCallback for the app router: https://auth0.github.io/nextjs-auth0/types/handlers_callback.AfterCallbackAppRoute.html

Also, FYI you can add the callback handler more simply using the shorthand:

export const GET = handleAuth({
  callback: handleCallback({ afterCallback })
})

More info on custom handlers: https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#customize-handlers-behavior

this worked perfectly, thank you!