The server configuration is experiencing issues. For additional details, refer to the server logs

After configuring Google as an authentication provider with Next Auth and setting all the necessary environment variables for both production and development modes, everything works perfectly in development. However, when trying to sign in on the production site, I keep getting this error.

I deployed the website to Vercel and properly set up the Google ID, secret, and NEXTAUTH_URL variables there.

Even after ensuring that the Google secret is set up correctly and adding it to the Vercel settings and Google credentials, the issue persists.

next.jsnext-auth

Answer №1

Ensure that the secret environmental variable is configured in your NextAuth setup, for example: secret: process.env.NEXTAUTH_SECRET

Answer №2

To incorporate Nextjs, include the following code snippet:

http://localhost:3000/api/auth/callback/google

within the Authorized Redirect URIs segment

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

Navigating to a dynamic route in Next.js and a static hosting platform such as Github Pages results in a 404 error page being displayed

In the process of developing my web app using Next.js, I have encountered an issue with hosting it on Github Pages (due to external constraints, as I would prefer to use Vercel or another platform). One particular challenge involves a dynamic route: webap ...

reactjsnext.jsgithub-pages

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Currently, I am in the process of working on a project utilizing Next.js 13 and API routes to communicate with a database. My goal is to securely store my database credentials in a .env file, but unfortunately, the variables are not loading as expected. I ...

javascriptreactjsnext.jsnext.js13

Learn the process of transmitting data from middleware to components and APIs in Next.js version 13

I've been experimenting with the Next Js 13 middleware feature and I'm a bit confused about how to pass data from the middleware to components/pages/api. For example, when trying to pass payload data or determine who the currently logged-in user ...

javascriptnext.jsmiddleware

Stylis-plugin-rtl for Material-UI V5 ensures that your application is fully compatible

I am using Material UI 5 with Next.js and have followed all the steps outlined in the documentation here, along with the Emotion and Stylis-plugin-rtl v2: However, after refreshing the page, my input label jumps to the left initially and then moves righ ...

material-uinext.js

How do I retrieve the music events for each user in Strapi 4?

I am currently working with strapi 4 and nextjs. Within the app, each user has their own music events stored in strapi that they should be able to add and retrieve. However, I am encountering difficulties when trying to retrieve each user's music ev ...

next.jsstrapi

Assign the Firebase token to the JavaScript cookie value

Can a cookie store a token value? In my setup with js-cookie, Firebase auth/firestore, and Next.js, I am setting my cookie within the handleUser function like this: const handleUser = async (rawUser) => { if (rawUser) { const user = await fo ...

javascriptfirebasenext.jsfirebase-authenticationjs-cookie

next.js not receiving the necessary environmental variables for injection

import dotenv from 'dotenv'; dotenv.config(); export const getGoogleUrl = (from: string) => { const clientId: string = process.env.GOOGLE_CLIENT_ID!; const callback: string = 'http://localhost:3000/api/auth/callback/google'; c ...

next.jsoauthenvironment-variablesgoogle-oauth

Is there a way to prevent NextJS auth middleware from being applied to server-side or pre-rendered requests?

Ensuring that users are logged in before accessing specific routes is my current challenge. Following the documentation, I integrated the suggested middleware but am facing issues with its implementation. Initially, I suspected that the problem lied in t ...

next.js

Cached images do not trigger the OnLoad event

Is there a way to monitor the load event of my images? Here's my current approach. export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => { const alt = useMemo(() => initial ...

javascriptreactjstypescripteventsnext.js

"The application is experiencing issues due to a malfunctioning JWT secret in NextAuth

[I am currently using Next.js (11.1.2) in combination with NextAuth (4.0.0-beta.7) to authenticate into a Strapi API, utilizing only the Credentials provider (JWT).] The entire authentication flow is "working" with this [...nextauth].js: import NextAuth f ...

jwtnext.jsstrapinext-auth

Mastering the utilization of license keys in react-froala within the Next.js framework

I am currently utilizing the "react-froala-wysiwyg": "^2.9.1-1" alongside version "next": "^7.0.2". Having obtained a license and generated a key specific to my domain, I find myself unsure of how to properly integrate it. Despite my attempts to implemen ...

reactjsnext.jsfroala

Is there a way to retrieve user information in Next.js using auth0 getSession() from a middleware function, or are there alternative methods to achieve this with middleware?

Here's the code snippet from my /pages/api/_middleware.js file: import { getSession } from '@auth0/nextjs-auth0' export default async function middleware(req, ev) { const session = await getSession(req) console.log(session) retu ...

next.jsmiddlewareauth0

The layout in Next.js production builds appears to be distinct from the layout in the

Currently, I am working on a website where I have implemented a dark theme by adding a class to the body element. Everything is functioning perfectly in the development environment, but I am encountering issues in the production build. Here is the root l ...

cssnext.jsdarkmode

Tips for creating a hover effect on an icon within a CSS grid

I've just started learning to code and wanted to create a component for previewing/displaying a project I'm working on. I've been attempting to add a hover effect to my links such as the GitHubIcon and LaunchIcon, but so far, it's not w ...

javascripthtmlcssreactjsnext.js

How can I import a server-side package into a file that includes both server-side and client-side features in Next.js?

Imagine having a file named utils.js with two functions, s and c. s is a server-side function called on an /api endpoint handler and utilizes the mongodb package. c is a client-side function that will be bundled and sent to the browser. When the applicati ...

next.js

Having trouble setting the state of an array using NextJS useState?

I'm facing an issue where the array saved to a useState state is not updating properly. Despite properly returning values for the variable first, the variable "data" remains an empty array. Interestingly, adding a console.log("restart") statement und ...

reactjsarraysnext.jsuse-state

Trouble with Next Js Image 'fill' property causing images to not show up on the page

Currently tackling a project involving a simple grid layout with images and text. I'm using Next 13.4.7 along with Tailwind CSS. However, I've encountered an issue when trying to import an image using the Next Image component with the fill prop - ...

reactjsnext.jstailwind-csscss-gridnextjs-image

Embed the getServerSideProps function within a helper method

I have multiple pages that require protection using firebase admin methods: const getServerSideProps = async (ctx: GetServerSidePropsContext) => { try { const cookies = nookies.get(ctx); const token = await firebaseAdmin.auth().verifyIdToken(c ...

reactjstypescriptnext.js

When implementing Next.js layouts, the content will be displayed below the sidebar

I'm currently working on implementing a sidebar component for my app using mantine.dev, along with next.js layouts to ensure it is displayed on every page. The links within the sidebar are functioning properly, however, I am facing an issue where the ...

next.jslayoutsidebarmantine

The Axios library in Next.js is automatically inserting a forward slash before query parameters in GET requests

I am working on a TypeScript Next.js application that contains the following code snippet: const ping = axios.get('http://127.0.0.1:5000/api/quote', { params: { id: query.quote_id, } }).then((response) => { console.log(resp ...

next.jsaxioscrud