0

I'm using Next13 with AuthJS, I've used Next with AuthJS for a long time but now I get unexpected behaviours.

I'm using the middleware.ts in the /src directory like this:

export { default } from "next-auth/middleware";
export const config = { matcher: ["/todo"] };

And it works fine I guess, if I'm not logged in and go to the /todo page, it asks me to login. And this is my src/api/auth/[...nextauth]/route.ts:

const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  adapter: PrismaAdapter(prisma) as Adapter,
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
  pages: {
    signIn: "/signin",
  },
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

So, when I get prompted to login, the url is http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Ftodo. Then, I click the login button, I login, it doesn't redirect me to the /todo page but I'm stuck to the same login page with the same url. But the login worked because if I go back to the home page, I can see that I'm logged in. So, I try to go to /todo again and it asks me to login again. Why?

When I login, it logs to the console this:

    -  ┌ GET /api/auth/callback/github?code=0918a4e11c92dcc0bb57&state=Ji-0XmyAvuFNOi_3g_CxezP4Y_JC1p17UXWoUbCaSO0 302 in 3642ms
      │
      └──── GET https://api.github.com/user/emails 200 in 226ms (cache: MISS)

I don't know what else to explain so here's some code that could be useful:

    // layout.tsx
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.className}`}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <AuthProvider>
            <GlobalContextProvider>
              <PomodoroContextProvider>{children}</PomodoroContextProvider>
            </GlobalContextProvider>
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>

AuthProvider is this:

    "use client";
    import { SessionProvider } from "next-auth/react";
    
    export default function AuthProvider({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return <SessionProvider>{children}</SessionProvider>;
    }

Also I tried to add this in the authOptions but it "solved" only the redirect problem because I got redirected but always to the homepage, which I dont want to, I want to get redirected to the page I'm going to. Anyways, I still got the problem of getting asked to login when i'm already logged in:

    session: {
      jwt: true,
      maxAge: 24 * 60 * 60,
      updateAge: 24 * 60 * 60,
    },
    callbacks: {
      async signIn() {
        return true;
      },
      async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
        return baseUrl;
      },
    },

I've also noticed that when I'm logged in and I try to log out, I get redirected to http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Ftodo but it doesn't make any sense, The logout button has nothing to do with /todo

Thank you. If you want me to post my repo I can do that.

If I'm not logged in and I try to access a protected page it should ask me to login and then redirect me to that page if the login in is successful. If I'm logged in it shouldn't ask me to login when I try to access a redirected page

Mushroom Terrible
  • 1
  • SessionProvider takes a session property which comes from pageProps of in the _app file. This will keep your session persistant through next app. {children} And this allows useSession hook also so you can do your logic in the app by session/authenticated check. https://next-auth.js.org/getting-started/example#configure-shared-session-state – dogukyilmaz Aug 25 '23 at 14:02
  • @dogukyilmaz I finally understood where's the problem, I just had to modify the code to this:https://codeshare.io/EBzML8. I still have the redirect problem tho that I'm not able to fix, which only happens if I use a custom signin page, and I have that problem even if I add `export default withAuth({ pages: { signIn: "/signin", }, });` to the middleware.ts – Mushroom Terrible Aug 26 '23 at 07:33

0 Answers0