"Encountering a 500 Internal Server Error with NextJS next-auth while attempting to log in on Netlify platform

I am facing an issue when attempting to log in with next-auth. I receive a 500 error from /api/auth/providers and the message "Internal Server Error" is the only thing displayed on the screen. This process works perfectly fine locally, but not in the production environment where the project is hosted on Netlify.

How can I resolve these server problems?

Here are the packages being used:

  • "dotenv": "^16.0.1",
  • "next": "^13.2.4",
  • "next-auth": "^4.20.1",
  • "next-auth-sanity": "^1.4.8",
  • "next-connect": "^1.0.0",
  • "next-pwa": "^5.5.2",
  • "next-sanity": "^4.1.5",
  • "react": "^18.2.0",

Engine:

  • "node": "18.x"

https://i.stack.imgur.com/VRqwk.png

Prior to attempting to log in, next-auth already identifies an issue where it suggests that the NEXTAUTH_URL might be incorrect. In the local environment, this value is set as localhost:3000, whereas in Netlify it's set as . The same values for all scopes apply to the NEXTAUTH_SECRET as well.

https://i.stack.imgur.com/eZLb5.png

The login component appears like this and it fails within the try/catch block. The adapter being utilized is Sanity CMS. Once again, everything works seamlessly locally.

https://i.stack.imgur.com/ME58s.png

Finally, here is the '[...nextauth].js' file with the respective options specified.

https://i.stack.imgur.com/tYV3p.png

next.jsnetlifynext-authsanity

Answer №1

After realizing my mistake, I found that adding a "/" at the end of the NEXTAUTH_URL was causing the problem. Once removed, everything functioned correctly both in my local environment and in production.

In short: 

NEXTAUTH_URL="https://example.com/"
--> 
NEXTAUTH_URL="https://example.com"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on excluding node_modules from typescript in Next.js 13

I am constructing a website in the next 13 versions with TypeScript, using the src folder and app directory. When I execute `npm run dev`, everything functions correctly. However, upon building, I encounter this error... ./node_modules/next-auth/src/core/l ...

typescriptnext.js

The data type 'string | undefined' cannot be assigned to the data type 'string' when working with .env variables

Trying to integrate next-auth into my nextjs-13 application, I encountered an error when attempting to use .env variables in the [...nextauth]/route.ts: Type 'string | undefined' is not assignable to type 'string'. https://i.stack.im ...

typescriptnext.jsnext-authnext.js13

What is the best location for storing test utilities in Next.js applications?

My Next.js (12.x) React (18.x) project includes Jest (28.x) for testing. While my tests in files like __tests__/Product.test.tsx work smoothly, I encountered an issue when trying to reuse some utils across tests: __tests__/util/my-test-helper.ts export fu ...

typescriptnext.jsjestjs

What are some ways to create a dynamic child server component?

Take a look at the following code snippet // layout.tsx export default function Layout({children}: any) { return <div> {children} </div> } // page.tsx export const dynamic = "force-dynamic"; const DynamicChild = dynamic( ...

typescriptnext.js

Is there a way to end my session in nextAuth on NextJS 14?

Recently, I've started using Typscript with a NextJS14 project that utilizes NextAuth for authentication. While there weren't any errors in the JavaScript version of my code, I encountered an error when working with TypeScript. This is a snippet ...

typescriptnext.jsnext-auth

The API endpoint code functions perfectly in Express, but encounters an error when integrated into Next.js

Express Code: app.get('/', async (req, res) => { const devices = await gsmarena.catalog.getBrand("apple-phones-48"); const name = devices.map((device) => device.name); res.json(name); }) Nextjs Code: import {gsmarena} ...

typescriptexpressnext.js

Unspecified parameter for Next.js dynamic route

Currently, I am developing an e-commerce application using next.js with Typescript and MongoDB. To better understand my project, let's take a look at my existing file structure: https://i.stack.imgur.com/tZqVm.png The mainPage.tsx file is responsibl ...

typescriptmongodbnext.jsroutes

"Enhancing User Experience: Implementing Internationalization and Nested Layouts in Next.js 13.x

In the midst of working on a cutting-edge Next.js 13 project that utilizes the new /app folder routing, I am delving into the realm of setting up internationalization. Within my project's structure, it is organized as follows: https://i.stack.imgur.c ...

typescriptnext.jsinternationalizationnext.js13i18next

Experiencing compatibility issues with NextAuth and Prisma on Netlify when using NextJS 14

While the website is functioning correctly on development and production modes, I am encountering issues when testing it on my local machine. After deploying to Netlify, the website fails to work as expected. [There are errors being displayed in the conso ...

typescriptnext.jsprisma

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Upon reaching the checkout page, I encounter the message: Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string". This issue seems to be related to the redirectToCheckout function. Can someone assist me? The cart-s ...

javascripttypescriptnext.jsstripe-payments

Utilizing internationalization and next/image in next.config.js alongside TypeScript

Currently, I am in the process of developing a miniature application using TypeScript within NextJS now that support for TypeScript comes standard in Next.js. Additionally, my aim is to integrate two recently introduced features: Image Component and Image ...

typescriptnext.jsnextjs-image

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

javascripttypescriptnext.js

How can I provide type annotations for search parameters in Next.js 13?

Within my Next.js 13 project, I've implemented a login form structure as outlined below: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { signIn } from "n ...

typescriptnext.jsnext.js13react-typescript

I am experiencing an issue with the PUT method on my API as it is not correctly setting the req.body data

Below is the code snippet for implementing the PUT method: [/api/[id].ts] case "PUT": try { const user = await UserModel.findOneAndUpdate( { _id: id, }, { $set: req.body, ...

typescriptapirestnext.jsnext-auth

I'm encountering a ModuleNotFoundError that says: "Module not found: Error: Can't resolve". What could be causing this

I have encountered an issue while trying to create a blog post page on my NextJS website. The page displays correctly on my local machine, but when I deploy it to production, I am facing the following error and I am unsure of how to resolve it: Here is the ...

typescriptwebpacknext.jsvercel

OneGraph and Graphql Codegen produce enums with numerical representations

After migrating my project's codebase from using the direct Headless Wordpress GraphQL endpoint to OneGraph for Google+Facebook Business support, I encountered an error related to apollo referencing the output codegen. Here is the specific error messa ...

typescriptenumsgraphqlnext.jscode-generation

The 'required' validator in Mongoose seems to be malfunctioning

I've been attempting to validate the request body against a Mongoose model that has 'required' validators, but I haven't been successful in achieving the desired outcome so far. My setup involves using Next.js API routes connected to Mo ...

typescriptmongodbmongoosenext.js

Struggling with sluggish performance on a certain project within VS Code

My experience with VS code has been excellent over the years, but I recently encountered a problem in one of my projects that caused a significant slowdown in performance. Strangely, other projects are working fine without any issues on VS code. I suspect ...

typescriptvisual-studio-codenext.js

An error occurred while trying to load the configuration "next/core-web-vitals" for extension

If you're embarking on a new project using NextJs and TypeScript, chances are you may encounter the following error: Failed to load config "next/core-web-vitals" to extend from. Wondering how to resolve this issue? ...

typescriptnext.js

What is the process for redirecting an API response to Next.js 13?

Previously, I successfully piped the response of another API call to a Next.js API response like this: export default async function (req, res) { // prevent same site/ obfuscate original API // some logic here fetch(req.body.url).then(r => ...

javascripttypescriptnext.jsfetch-apinext.js13