NextAuth redirection with t3 stack

Question

I'm using a fresh T3 app with the NextJs app router. I've configured NextAuth and added some providers. Everything seems good, but after logging in, I'm always redirected to this link: http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Flogin

That throws a 404 because this route doesn't seem to be defined anywhere. When I manually go back to http://localhost:3000, I'm connected as expected.

Am I supposed to create this login page myself? Or configure something to specify a different endpoint?

Thanks.

Answer 1

It is possible that your environment variable for NEXTAUTH_URL is defined without a string and the special characters in it are being misinterpreted after URL parsing.

To avoid this, you can use double quotes when defining environment variables, especially URLs where special characters may have different meanings based on context:

NEXTAUTH_URL="http://localhost:3000"
# NEXTAUTH_URL=http://localhost:3000 without quotes might be misinterpreted

After making this change, restart your Next.js development environment, and see if the redirection issue is resolved.