NextJS example infinite redirecting + TS errors

[pippinmole]

Environment

System: OS: Windows 10 10.0.22621 CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor Memory: 19.41 GB / 31.93 GB Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (118.0.2088.69) Internet Explorer: 11.0.22621.1

Reproduction URL

https://github.com/nextauthjs/next-auth-example

Describe the issue

When I set up the project, accessing localhost:3000 just infinitely redirects me.

How to reproduce

1. git clone https://github.com/nextauthjs/next-auth-example.git
2. cd next-auth-example
3. npm install
4. cp .env.local.example .env.local (windows equivalent)
5. Enter values for AUTH_GITHUB_ID, AUTH_GITHUB_SECRET and AUTH_SECRET (I have already set up github app registration)
6. npm run dev
7. Go to http://localhost:3000/

The URL gets set to http://localhost:3000/%7D/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F%257D%2Fsignin%3FcallbackUrl%3Dhttp%253A%252F%252Flocalhost%253A3000%252F%25257D%252Fsignin%253FcallbackUrl%253Dhttp%25253A%25252F%25252Flocalhost%25253A3000%25252F%2525257D%25252Fsignin%25253FcallbackUrl%25253Dhttp%2525253A%2525252F%2525252Flocalhost%2525253A3000%2525252F%252525257D%2525252Fsignin%2525253FcallbackUrl%2525253Dhttp%252525253A%252525252F%252525252Flocalhost%252525253A3000%252525252F%25252525257D%252525252Fsignin%252525253FcallbackUrl%252525253Dhttp%25252525253A%25252525252F%25252525252Flocalhost%25252525253A3000%25252525252F%2525252525257D%25252525252Fsignin%25252525253FcallbackUrl%25252525253Dhttp%2525252525253A%2525252525252F%2525252525252Flocalhost%2525252525253A3000%2525252525252F%252525252525257D%2525252525252Fsignin%2525252525253FcallbackUrl%2525252525253Dhttp%252525252525253A%252525252525252F%252525252525252Flocalhost%252525252525253A3000%252525252525252F%25252525252525257D%252525252525252Fsignin%252525252525253FcallbackUrl%252525252525253Dhttp%25252525252525253A%25252525252525252F%25252525252525252Flocalhost%25252525252525253A3000%25252525252525252F%2525252525252525257D%25252525252525252Fsignin%25252525252525253FcallbackUrl%25252525252525253Dhttp%2525252525252525253A%2525252525252525252F%2525252525252525252Flocalhost%2525252525252525253A3000%2525252525252525252F%252525252525252525257D%2525252525252525252Fsignin%2525252525252525253FcallbackUrl%2525252525252525253Dhttp%252525252525252525253A%252525252525252525252F%252525252525252525252Flocalhost%252525252525252525253A3000%252525252525252525252F%25252525252525252525257D%252525252525252525252Fsignin%252525252525252525253FcallbackUrl%252525252525252525253Dhttp%25252525252525252525253A%25252525252525252525252F%25252525252525252525252Flocalhost%25252525252525252525253A3000%25252525252525252525252F%2525252525252525252525257D%25252525252525252525252Fsignin%25252525252525252525253FcallbackUrl%25252525252525252525253Dhttp%2525252525252525252525253A%2525252525252525252525252F%2525252525252525252525252Flocalhost%2525252525252525252525253A3000%2525252525252525252525252F%252525252525252525252525257D%2525252525252525252525252Fsignin%2525252525252525252525253FcallbackUrl%2525252525252525252525253Dhttp%252525252525252525252525253A%252525252525252525252525252F%252525252525252525252525252Flocalhost%252525252525252525252525253A3000%252525252525252525252525252F%25252525252525252525252525257D%252525252525252525252525252Fsignin%252525252525252525252525253FcallbackUrl%252525252525252525252525253Dhttp%25252525252525252525252525253A%25252525252525252525252525252F%25252525252525252525252525252Flocalhost%25252525252525252525252525253A3000%25252525252525252525252525252F%2525252525252525252525252525257D%25252525252525252525252525252Fsignin%25252525252525252525252525253FcallbackUrl%25252525252525252525252525253Dhttp%2525252525252525252525252525253A%2525252525252525252525252525252F%2525252525252525252525252525252Flocalhost%2525252525252525252525252525253A3000%2525252525252525252525252525252F%252525252525252525252525252525257D%2525252525252525252525252525252Fsignin%2525252525252525252525252525253FcallbackUrl%2525252525252525252525252525253Dhttp%252525252525252525252525252525253A%252525252525252525252525252525252F%252525252525252525252525252525252Flocalhost%252525252525252525252525252525253A3000%252525252525252525252525252525252F%25252525252525252525252525252525257D%252525252525252525252525252525252Fsignin%252525252525252525252525252525253FcallbackUrl%252525252525252525252525252525253Dhttp%25252525252525252525252525252525253A%25252525252525252525252525252525252F%25252525252525252525252525252525252Flocalhost%25252525252525252525252525252525253A3000%25252525252525252525252525252525252F%2525252525252525252525252525252525257D%25252525252525252525252525252525252Fsignin%25252525252525252525252525252525253FcallbackUrl%25252525252525252525252525252525253Dhttp%2525252525252525252525252525252525253A%2525252525252525252525252525252525252F%2525252525252525252525252525252525252Flocalhost%2525252525252525252525252525252525253A3000%2525252525252525252525252525252525252F%252525252525252525252525252525252525257D%2525252525252525252525252525252525252Fsignin%2525252525252525252525252525252525253FcallbackUrl%2525252525252525252525252525252525253Dhttp%252525252525252525252525252525252525253A%252525252525252525252525252525252525252F%252525252525252525252525252525252525252Flocalhost%252525252525252525252525252525252525253A3000%252525252525252525252525252525252525252F%25252525252525252525252525252525252525257D%252525252525252525252525252525252525252Fsignin

additionally, it looks like the code is simply wrong, as I'm getting intellisense errors about the buttons here:

Expected behavior

It should show some sort of page, and the code shouldn't have typescript errors.

If you need any more info please let me know.

PS: Running npx envinfo --system --binaries --browsers --npmPackages "next,react,next-auth,@auth/*" says my OS is Windows 10 when it is Windows 11.

[edizyurdakul]

I was able to solve this issue by giving it a page

import NextAuth from "next-auth";

import GitHub from "next-auth/providers/github";

import type { NextAuthConfig } from "next-auth";

export const config = {
  debug: true,
  providers: [GitHub],
  pages: {
    signIn: "/signin",
  },
  callbacks: {
    authorized({ request, auth }) {
      const { pathname } = request.nextUrl;
      return pathname === "/middleware-example" && !!auth;
    },
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

not sure if it is ideal as it should have worked without the pages, as well as removing the callback makes the redirects disappear, not sure about the TS errors

[nhminhduc]

I came across the same problem. After struggling I see that newest Authjs call authorized infinitely times because it cannot get the auth from there. Changing to use Callback (https://authjs.dev/guides/basics/callbacks) works fine for me.

[adnjoo]

as @nhminhduc said, change auth.ts to something like this:

import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

import type { NextAuthConfig } from "next-auth";

export const config = {
  theme: {
    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
  },
  providers: [Google],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      return true
    },
    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    async session({ session, user, token }) {
      return session
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token
    }
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

[kjetilge]

I'm fiddling with this same sample app. I've removed the "pages" folder in order to avoid conflicts. When I click login the url changes to /localhost:3000/[object%20Promise] This also happens if I give it a "page" as suggested above. Any way around this ? I'm also using Github only. I've also tried it with the latest beta.

[adnjoo]

@kjetilge try changing this in auth-components.tsx

export function SignIn({
  provider,
  ...props
}: { provider?: string } & React.ComponentPropsWithRef<typeof Button>) {
  return <a href="/api/auth/signin">Sign in</a>;
}

export function SignOut(props: React.ComponentPropsWithRef<typeof Button>) {
  return (
    <form action={async () => {
      "use server"
      await signOut()
    }}>
     <button>Sign out</button>
    </form>
  );
}

and this in next.config.js

/** @type {import("next").NextConfig} */
module.exports = {
 experimental: {
    serverActions: true
 }   
}

docs