Configuring Next-auth CredentialProvider and setting up redirection

I'm feeling a bit lost when it comes to understanding how the credentials provider and redirects work. The documentation mentions that the credentials provider doesn't support a callback and is specifically for OAuth providers, which I understand. However, instead of handling errors on the same page or logging in like demonstrated in this video, it redirects to

https://localhost/api/auth/callback/[credentials-provider-name]
. This doesn't even include the port I'm currently working with. If I manually set an ID, it gets appended at the end of the URL.

This is my setup for the provider:

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
      credentials: {
        username: { label: "Username", type: "text", placeholder: "someuser69" },
        password: { label: "Password", type: "password" },
      },
      name: "User Pass",
      type: "credentials",
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        return {
          id: 2,
          name: "user",
          email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7401071106341319151d185a171b19">[email protected]</a>",
        }
        return null;
      }
    })
    // ...add more providers here
  ],
  callbacks: {
    async jwt({ token, account }) {
      // Persist the OAuth access_token to the token right after signin
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      session.accessToken = token.accessToken
      return session
    },
    async redirect({ url, baseUrl, }) {
      console.log("");
      return baseUrl;
    },
    async signIn({ user, account, profile, email, credentials }) {
      return '/home';
    }
  },
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,

  },
  secret: "CHANGE!!!",
  jwt: {
    maxAge: 60 * 60 * 24 * 30,
    secret: "afdsfi",

  },

})

I've gone through the documentation, but I can't seem to figure out if I'm missing something important here. Some key points of confusion for me are:

  • Where exactly is this callback defined, and is there a way to disable it in the default provider?

  • I suspect that the authorize function isn't functioning as expected. Even when I place a console log within it, nothing gets printed to the terminal. So, I can't confirm whether it's actually being called.

Answer №1

The problem I encountered was due to my incorrect configuration of the NEXTAUTH_URL variable. It seems that the module automatically adds https if the protocol is not defined in the provided URL. This behavior occurs whether you are using 127.0.0.1 or localhost. To resolve any callback issues, it is recommended to specify the unsecured http protocol when working with a local address for testing or development purposes, like this:

NEXTAUTH_URL='http://127.0.0.1:3001'

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

Addressing the issue with this.setState and this.state on the Registration page

I am facing an issue with my Registration Page code. I am trying to send data to a database using this.setState and this.state, but every time I run the code, it shows an error in the onSubmit function related to this.state. Can someone please help me unde ...

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

Simple yet perplexing JavaScript within an Angular directive

In the tutorial, the author explains that each element in the stars array contains an object with a 'filled' value, which is determined as true or false based on the scope.ratingValue received from the DOM. directive('fundooRating', fu ...

Filter an array of objects to only include the unique values and remove any duplicates

var Error-dictionary = [ { code:599, MSG:'unknown' }, { code:404, MSG:'not found' }, { code:599, MSG:'unknown' } ] I would like to transform the data structure into som ...

Issues with styling classes using global SCSS in React are causing unexpected behavior

Currently, I am working on a React project that includes the use of SASS for styling purposes. While implementing modular CSS in my components, I have encountered an issue with applying styles from a main.scss file in my Layout.js component. The unique a ...

There is a random section that keeps crashing on the website

I have encountered a bug on my one-page Bootstrap template website. One of the sections is causing issues after multiple page refreshes. Despite checking the console for errors, I am unable to identify the source of the problem. Here is the HTML code for ...

The onKeyUp event in Material-UI components does not seem to be functioning as

I am experiencing an issue with a material-ui component Grid where the onKeyUp event does not seem to be triggering as expected. Here is the code snippet: <Grid item xs={12} onKeyUp={handleClickOnKeyUp} sx={{cursor: "pointer"}} onClick= {ha ...

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

An element failing to submit using AJAX requests

I have a login form with an <a> element that I want to use for making a post request. However, when I'm examining the backend Django code during debugging, it seems to interpret the request method as GET instead of POST. HTML <form id= ...

I am unable to pass the req.params.id value as an input to a function located in a separate file

In my project, I've developed a REST API for user and coupon management. The main file driving this API is called coupon-api.js. This file contains the route definitions, while the functions to handle these routes are separated into two distinct files ...

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 ...

Exploring the use of @HostListener in Angular for handling drop events

I am currently working on developing a directive for drag and drop functionality with files. I have successfully implemented the dragenter and dragleave events, but for some reason, the drop event is not being recognized. @HostListener('drop', [ ...

"Safari (iOS) is experiencing a functionality issue where Alert() is working, but console.log() is

Just a heads up before you dive in: I've encountered an issue with Safari related to Chrome, but it seems to work fine on other browsers. So, it could be more OS-specific rather than a general problem. I recently ran into a frustrating situation whil ...

Resolving DataTables Error

Here is my JavaScript code snippet. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/but ...

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...

Unable to locate the 'worker_threads' module using Node version 16.14.2

I'm facing an issue with my monorepo project which contains multiple next.js apps managed by NX. Whenever I attempt to run the command sudo npx nx serve appname on Ubuntu WSL, I encounter the error message Cannot find module 'worker_threads' ...

React and Express failing to display content

After relocating my React frontend folder to my collaborator's Express backend folder, here is our updated file structure. https://i.stack.imgur.com/i77XJ.png This code snippet represents app.js which is responsible for rendering the website. const ...

Tips for transferring information from one php page to another php page via ajax

I am attempting to retrieve data from one PHP page and transfer it to another page through the use of Ajax. JavaScript : $.ajax({ url: "action.php", success: function(data){ $.ajax({ url: "data.php?id=data" ...

What could be causing the code to malfunction and prevent window.ethereum from working properly?

While attempting to develop a dApp, I have encountered an issue with the browser in Visual Studio Code not recognizing the Ethereum connection, despite having installed MetaMask on the active browser session. Here is a snippet of my code used to test the c ...

Show information from an array

On the index.php page, there is a script that retrieves data from demo.php and presents the outcome in a div. <div class="leftbox"> <?php echo "<div id='proddisplay'>"; echo "</div>"; ?> </div&g ...