Next.js Discord

Discord Forum

Session required error loop

Answered
Hoopoe posted this in #help-forum
Open in Discord
HoopoeOP
I use useSession({ required: true })
I sign out. I go to the page with the useSession. I am redirected to the signin page. I sign in and I go back to the protected page. I am again redirected to the signin page.
One more weird thing about this is, signIn works fine, and after this, when i went to another (client-side component put inside layout, session not required) page that simply displayed my session username, it showed my username without any issues
Answered by Ray
middleware is not support when using prisma adapter
View full answer

69 Replies

HoopoeOP
anyone
cougarb8
its not very clear what the issue is
can you provide a code sample or error message
HoopoeOP
there is no error
i just keep getting redirected to the sign in page even when i am signed in
cougarb8
can you provide your layout page and middleware and auth file
HoopoeOP
import { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID as string,
      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
    }),
  ],
  adapter: PrismaAdapter(prisma) as Adapter,
  callbacks: {
    async session({ session, user }) {
      if (session && session.user) session.user.id = user.id;
      session.user.roles = await getUserRoles(session.user.id);
      if (user.image) session.user.image = user.image;
      if (user.name) session.user.name = user.name;
      return session;
    },
  },
};
no middleware
and wdym auth file
cougarb8
ur /api/[...nextauth]/route.ts file
yup thats the one
HoopoeOP
import "@/app/globals.css";
import { Inter as FontSans } from "next/font/google";

import { cn } from "@/lib/utils";
import { Metadata } from "next";
import { ReactNode } from "react";
import { ThemeProvider } from "@/components/theme-provider";
import Navbar from "@/components/Navbar";

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata: Metadata = { ... };

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      </head>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased m-6 p-0",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <Navbar />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
this is layout
import NextAuth from "next-auth";
import { authOptions } from "@/conf/authOptions";

const auth = NextAuth(authOptions);
export { auth as GET, auth as POST };
route
cougarb8
you need to add jwt strategy
HoopoeOP
huh, why?
cougarb8
import { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: AuthOptions = {

    session: {
        strategy: 'jwt', // <=====
    },

  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID as string,
      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
    }),
  ],
  adapter: PrismaAdapter(prisma) as Adapter,
  callbacks: {
    async session({ session, user }) {
      if (session && session.user) session.user.id = user.id;
      session.user.roles = await getUserRoles(session.user.id);
      if (user.image) session.user.image = user.image;
      if (user.name) session.user.name = user.name;
      return session;
    },
    jwt({ token, user }) {
            return { ...token, ...user } // <======
    },
  },
};
and the jwt callback
HoopoeOP
what's the difference between jwt and database strategy?
cougarb8
nvm nvm
HoopoeOP
what
cougarb8
https://next-auth.js.org/getting-started/client

it says here you should be able to useSession in client api
whats the expected behavior you want
HoopoeOP
it shouldn't need jwt
cougarb8
yeah u should nt need jwt
@cougarb8 whats the expected behavior you want
HoopoeOP
it lets me use the /gen endpoint without being redirected to /api/auth/signin, when im already signed in
cougarb8
and you dont have a middleware.ts file anywhere?
HoopoeOP
i do but its just this:
export { default } from "next-auth/middleware";

export const config = { matcher: [] };
empty matcher because i was having the same issue with the middleware
cougarb8
hmmm
you might need the authorized callback
        authorized({ request, auth }) {
            const { pathname } = request.nextUrl

            return !!auth
        },


try adding this in the callback sections
import { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID as string,
      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
    }),
  ],
  adapter: PrismaAdapter(prisma) as Adapter,
  callbacks: {
    async session({ session, user }) {
      if (session && session.user) session.user.id = user.id;
      session.user.roles = await getUserRoles(session.user.id);
      if (user.image) session.user.image = user.image;
      if (user.name) session.user.name = user.name;
      return session;
    },
  },
};


in this file
HoopoeOP
where exactly
theres no authorized in callbacks, atleast ts says so
cougarb8
oh shi
thats a nextauth5 concept
HoopoeOP
anyone can help with this?
@Hoopoe anyone can help with this?
Ray
import { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID as string,
      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
    }),
  ],
  // adapter: PrismaAdapter(prisma) as Adapter,
  callbacks: {
    async session({ session, user }) {
      if (session && session.user) session.user.id = user.id;
      session.user.roles = await getUserRoles(session.user.id);
      if (user.image) session.user.image = user.image;
      if (user.name) session.user.name = user.name;
      return session;
    },
  },
};

try comment out adapter here
HoopoeOP
https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'id') { message: "Cannot read properties of undefined (reading 'id')", stack: "TypeError: Cannot read properties of undefined (reading 'id')\n" +
@Hoopoe `https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'id') { message: "Cannot read properties of undefined (reading 'id')", stack: "TypeError: Cannot read properties of undefined (reading 'id')\n" +`
Ray
import { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID as string,
      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
    }),
  ],
  // adapter: PrismaAdapter(prisma) as Adapter,
  callbacks: {
    async session({ session, user }) {
       console.log({session,user})
      //if (session && session.user) session.user.id = user.id;
      //session.user.roles = await getUserRoles(session.user.id);
      //if (user.image) session.user.image = user.image;
      //if (user.name) session.user.name = user.name;
      return session;
    },
  },
};
HoopoeOP
yeah that works
though my db calls are failing
what can i do
Ray
middleware is not support when using prisma adapter
Answer
Ray
or use next-auth@beta
HoopoeOP
i've deleted middleware.ts
@Ray or use `next-auth@beta`
HoopoeOP
is there any migration guide for this?
@Hoopoe though my db calls are failing
Ray
what do you mean db call are failing?
HoopoeOP
or do i just have to see the example
@Ray what do you mean db call are failing?
HoopoeOP
it uses the ones in callbacks.session
Ray
oh ok
HoopoeOP
the id
Ray
I thought you said database session
if you don't need database session, you could use v4
HoopoeOP
i would be fine if i just use jwt as session strategy, right?
Ray
yes
HoopoeOP
but im not sure how the database calls would work
since the users are not being saved to the database
Ray
do you mean this getUserRoles?
HoopoeOP
nope, i have a lot more stuff
Ray
you can store the role to the token
HoopoeOP
welp imma use the beta version i guess
also can u tell me if there are any documentation for the beta version
or any migration guide
HoopoeOP
alright thanks