Nextjs adding next-auth-v5 github provider auth

I recently upgraded next-auth to next-auth-v5 using the migration guide. I'm having trouble getting github provider to work correctly.

I've conflated next-auth-v4 with v5.0.0.0-beta at some point, that coupled with ongoing documentation development has led to quite a mess.

When I go to http://localhost:3000/login and click the github login button it redirects to localhost.../api/auth/error without really any errors details.

I'm also getting a http://localhost:3000/api/auth/session 404 (Not Found) at /login page

auth.config.js

import type { NextAuthConfig } from "next-auth";import { auth } from "auth"import GithubProvider from "@auth/core/providers/github";export const authConfig = {  pages: {    signIn: "/login",  },  callbacks: {    authorized({ auth, request: { nextUrl } }) {      const isLoggedIn = !!auth?.user;      const isOnDashboard = nextUrl.pathname.startsWith("/dashboard");      if (isOnDashboard) {        if (isLoggedIn) return true;        // Redirect unauthenticated users to login page        return false;      } else if (isLoggedIn) {        return Response.redirect(new URL("/dashboard", nextUrl));      }      return true;    },  },  // Add whatever providers here  providers: [    GithubProvider({      clientId: process.env.GITHUB_ID,      clientSecret: process.env.GITHUB_SECRET,    })  ],  secret: process.env.SECRET} satisfies NextAuthConfig;

I have all the necessary .env variables set

NEXTAUTH_URL=http://localhost:3000/api/authNEXTAUTH_SECRET=...AUTH_URL=http://localhost:3000/api/authAUTH_SECRET=...GITHUB_ID=...GITHUB_SECRET=...SECRET=...

as well as callbackurl set in github settings http://localhost:3000/api/auth/callback/githubapp/api/auth/...nextauth/route.ts

import type { NextRequest } from "next/server";import { Auth } from "@auth/core";import NextAuth from "next-auth";import GithubProvider from "@auth/core/providers/github";import GoogleProvider from "@auth/core/providers/google";import CredentialsProvider from "@auth/core/providers/credentials";const handler = NextAuth({  providers: [    CredentialsProvider({ ... }),    GithubProvider({      clientId: process.env.GITHUB_ID,      clientSecret: process.env.GITHUB_SECRET,    }),  ],  secret: process.env.SECRET,  pages: {    signIn: "/login",    error: "/login",  },    callbacks: {    session: ({ session, user }) => ({      ...session,      user: {        ...session.user,        id: user.id,        // username: user.username      }    })  }});export { handler as GET, handler as POST };

This is the Github Login button I'm importing into my <LoginForm/> which is inside app/login/page.tsx

"use client";import { useSearchParams } from "next/navigation";import { signIn, signOut, auth } from "../auth"import { Button } from "./ui/button";import { Icons } from "./icons";export default function GithubSignInButton() {  const searchParams = useSearchParams();  const callbackUrl = searchParams.get("callbackUrl");  return (<Button      className="w-full"      variant="outline"      type="button"      onClick={() => {        //  signIn("github")        signIn("github", { callbackUrl: callbackUrl ?? "/dashboard" })        console.log("signin button to github clicked")      }}><Icons.gitHub className="mr-2 h-4 w-4" />      Continue with Github</Button>  );}

middleware.ts

import { authConfig } from "./auth.config";import NextAuth from "next-auth";export const { auth: middleware } = NextAuth(authConfig)// https://nextjs.org/docs/app/building-your-application/routing/middleware#matcherexport const config = { matcher: ["/dashboard"] };export { auth as default } from "auth"