Encountering a sign-in issue with credentials in next-auth. The credential authorization process is resulting in a

I am currently facing an issue with deploying my Next.js project on Vercel. While the login functionality works perfectly in a development environment, I encounter difficulties when trying to sign in with credentials in Production, receiving a 401 error status.

My suspicion is that the authorize function is returning null, leading to the 401 status code. I am not using an adapter for the MongoDB database - could this be the root cause of the problem?

Below is the snippet of authorize code:

      async authorize(credentials): Promise<UserAuthentication | null> {
      await connectToDatabase()
      // Additional logic here to authenticate the user using provided credentials
      console.log('authorize function is running')
      // Verify if the user exists in the database
      const user = await UserModel.findOne({
        username: credentials?.username,
        // password: credentials?.password,
      })
      if (user && credentials?.password) {
        console.log(credentials?.password)

        const checkPassword = await compare(
          credentials?.password,
          user.password
        )
        // Incorrect password - return null
        if (!checkPassword) {
          console.log('Password doesnt match')
          return null
        }
        console.log('checkPassword:', checkPassword)
      }
      // Success response
      console.log('user', user)

      if (!user) {
        console.log('NO USER')
        return null
      }
      // Return authenticated user object if all checks pass
      return user
    },
  }),
  GoogleProvider({
    clientId: googleClientId,
    clientSecret: googleClientSecret,
  }),
  
],
  })
}`

Answer №1

Don't forget to include the Vercel deployment URL in the list of approved URLs for your Google project settings.

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

Is it possible to retrieve all mandatory attributes of a TypeScript object?

Is there a method or approach available that can retrieve all necessary properties from a TypeScript interface or an object? For instance, something along the lines of Object.getOwnPropertyDescriptors(myObject) or keyof T, but with the specific details o ...

Switch up row values in an array and transform them into an object using SheetJS

I am struggling to format an array where each "Working Day" is represented as an object with specific details like index and start/end date. I need help manipulating the JSON data to achieve the desired structure. The package I'm currently using is: ...

Error encountered when implementing ApolloProvider in the root layout of the application while using NextJS with AppRouter

I am integrating Apollo into my layout to enable the use of graphQL across all pages. However, I encounter an error whenever I attempt to wrap the ApolloProvider outside the children component. ⨯ node_modules\rehackt\rsc.js (36:12) @ throwNoC ...

Direction of the grid in Tailwind CSS

Here is the grid, displayed like this: 1,2,3 4,5,6 7,8,9 I am looking to adjust the grid within the parent Div to display like this: 1,4,7 2,5,8 3,6,9 (please note that there could be more elements than just 9) <div className="grid h-full grid-co ...

Is it better to set Angular2 @Inputs as public, or should we opt for a stricter API by keeping them private?

I am currently utilizing Angular2 with Typescript Imagine having the following code in the template of my app component: ... <coffee-cup [coffee]="" ... Here is my coffee-cup component: @Component({ selector: 'coffee-cup', ... }) ex ...

Hmm, encountering an issue with Next.JS where it's unable to locate the module '@emotion/react'

After experimenting with Next.JS for a test project to better understand the framework, everything was going smoothly until I decided to incorporate MUI for creating a table. I used npm to install @mui/material, @emotion/react, and @emotion/styled but enco ...

Issue with updating component

Currently facing an issue with a component that utilizes the changeDetection: ChangeDetectionStrategy.OnPush The component's logic is as follows: ngOnInit(){ this.serivce.something .subscribe( evt => { // Logic to update values of the ar ...

Encountering issues with MyModel.findOne not being recognized as a function while utilizing Mongoose within Next.js 14 Middleware

Within my Next.js middleware, I am encountering the following code: let user: UserType[] | null = null; try { user = await findUser({id}); console.log("user", user); } catch (error: any) { throw new Error(error) ...

What is the best way to render components with unique keys?

I am currently working on a dashboard and would like to incorporate the functionalities of React-Grid-Layout from this link. However, I am facing an issue where the components are only rendered if they have been favorited. In order to utilize the grid layo ...

Finding the solution to the perplexing issue with Generic in TypeScript

I recently encountered a TypeScript function that utilizes Generics. function task<T>(builder: (props: { propsA: number }, option: T) => void) { return { run: (option: T) => {}, } } However, when I actually use this function, the Gener ...

Merge two arrays by matching their corresponding identifiers

I have 2 separate arrays that I need to merge. The first array looks like this: const Dogs[] = [ { id: '1', name: 'Buddy' }, { id: '2', name: 'Max' }, ] The second one: const dogAges[] = [ { id: '4&ap ...

Bring in a function by its name from the ts-nameof package that is not declared in the d.ts export

Recently, I came across a captivating package that caught my interest and I would love to incorporate it into my TypeScript application: https://github.com/dsherret/ts-nameof However, upon attempting to import the nameof function, I realized it was not be ...

What is the most effective approach to scan Angular 2, 4, 5 template html files before AOT compilation for optimal code quality assessment?

Recently, I stumbled upon an interesting GitHub repository called "gulp html angular validate". If you're not familiar with it, you can check it out here. However, I have doubts about whether this tool is suitable for Angular 2+ projects. Additionall ...

Hiding Clear button in Autocomplete to display only text

Exploring react-virtualization and Autocomplete features here. I currently have a list set up to display multiple texts when a checkbox is selected. Here's the code snippet: https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx The goal ...

Leveraging Angular Observables for seamless data sharing across components

As I embark on developing my very first Angular app, I have encountered a challenge with filtering a list of book objects based on their gender attribute. The issue lies in sharing data between components – specifically the filteredData variable and the ...

Is there a way to prevent a form from automatically submitting once all inputs have been completed? (Using react-hook-form)

After creating a multi-step-form using shadcn, next, zod, and react-hook-form, I encountered an issue where the form is being submitted on step 3 instead of when clicking the submit button. form.tsx const form = useForm<Inputs>({ resolve ...

Tips for effectively handling the auth middleware in react.js by utilizing LocalStorage

After making a call to the authentication API, the plan is to save the authentication token in LocalStorage and then redirect to a dashboard that requires token validation for entry. However, an issue arises where the authentication token isn't immedi ...

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Is there a more efficient way to structure the className attribute when utilizing tailwind css? Which of the examples provided would have the least impact on performance? If I were to use an array for the classes and then join them together as shown in e ...

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

Getting started with TypeScript in combination with Node.js, Express, and MongoDB

I'm a beginner in working with TypeScript, Node.js, Express, and MongoDB. I need guidance on the end-to-end flow for these technologies. Can someone please suggest steps or provide links for a step-by-step process? What is the procedure to compile/r ...