Guide to logging in using REST/API with a Next.js application

Question

Guide to logging in using REST/API with a Next.js application

Issue: I am facing a challenge integrating with an existing repository that was created using Next.js. The task at hand is to enable users to sign in to the application through a specific endpoint or URL. To achieve this, I have been attempting to utilize the signIn function within NextAuth.js, but it consistently generates an error stating

ReferenceError: window is not defined

.

Testing Strategy

Include a CredentialsProvider in the [...nextauth].tsx file:

const providers: Provider[] = [
  
..., //exisiting providers

  CredentialsProvider({
    id: "jwt_auth",
    name: "JWT-Auth",
    credentials: {
      email: { label: "Username", type: "text"},
      password: { label: "Password", type: "password" },
    },
    async authorize(credentials, req) {
      return {
        id: "usr123",
        username: "testUser",
      };
    },
  }),
];

In the /web/pages/api/auth/jwt.js file

import { NextApiRequest, NextApiResponse } from "next";
import { signIn } from "next-auth/react";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await signIn<"credentials">("jwt_auth", {
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3f2e383f0b2e332a263b272e65282426">[email protected]</a>",
    password: "myPassWord",
    redirect: false,
  });

  res.status(201).json({ message: "Logged in user" });
}

The current setup involves creating mock endpoints/functions that simulate a successful scenario to observe how the process unfolds. Despite these efforts, when sending GET/POST requests to /api/auth/jwt, an error is triggered indicating

ReferenceError: window is not defined

. This suggests that the functionality of the signIn method may rely on having a user interface.

Inquiry(s): What would be the best approach for implementing API-based sign-in functionality? Is it necessary to develop a workaround by crafting an endpoint that returns HTML content in order to facilitate the sign-in process?

javascript authentication next.js server-side-rendering

Answer 1

Answer №1

Within our jsx code, we utilize the signIn function to kick off the signIn process. This functionality operates similarly to the redux-saga library, initiating the process on the client side while the next-auth library handles the backend operations.

import { signIn } from "next-auth/react";

// Execute this code inside your submitHandler or onClick handler
await signIn("credentials", {
      // To prevent automatic redirection upon signin failure, set redirect to false
      email,
      password,
    });

This action triggers the execution of the authorize function defined in your codebase. The role of this function is to access the database and validate user credentials. Upon successful verification, the function should return the corresponding user object. Following this operation, next-auth employs two callback functions.

CredentialsProvider({
  // Creates input fields accessible at http://localhost:3000/api/auth/signin
  credentials: {
    username: {
      label: "Email",
      type: "email",
      placeholder: "placeholder",
    },
    password: { label: "Password", type: "password" },
  },
  async authorize(credentials) {
       // Perform database queries and validation here
 }}),
],
callbacks: {
  jwt: async ({ token, user }) => {
    user && (token.user = user);
    return Promise.resolve(token);
  },
  session: async ({ session, token }) => {
    // Modify session properties as needed
    session.user = token.user;
    return Promise.resolve(session);
  },
},

To enter your credentials and authenticate yourself, navigate to the api route "http://localhost:3000/api/auth/signin"

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

Comprehensive guide for setting up next-auth4

Answer 2

Within our jsx code, we utilize the signIn function to kick off the signIn process. This functionality operates similarly to the redux-saga library, initiating the process on the client side while the next-auth library handles the backend operations.

import { signIn } from "next-auth/react";

// Execute this code inside your submitHandler or onClick handler
await signIn("credentials", {
      // To prevent automatic redirection upon signin failure, set redirect to false
      email,
      password,
    });

This action triggers the execution of the authorize function defined in your codebase. The role of this function is to access the database and validate user credentials. Upon successful verification, the function should return the corresponding user object. Following this operation, next-auth employs two callback functions.

CredentialsProvider({
  // Creates input fields accessible at http://localhost:3000/api/auth/signin
  credentials: {
    username: {
      label: "Email",
      type: "email",
      placeholder: "placeholder",
    },
    password: { label: "Password", type: "password" },
  },
  async authorize(credentials) {
       // Perform database queries and validation here
 }}),
],
callbacks: {
  jwt: async ({ token, user }) => {
    user && (token.user = user);
    return Promise.resolve(token);
  },
  session: async ({ session, token }) => {
    // Modify session properties as needed
    session.user = token.user;
    return Promise.resolve(session);
  },
},

To enter your credentials and authenticate yourself, navigate to the api route "http://localhost:3000/api/auth/signin"

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

Comprehensive guide for setting up next-auth4

Guide to logging in using REST/API with a Next.js application

Answer №1

Similar questions

This jQuery ajax request is returning a readyState of 1 or an incorrect data type

Issue: Module 'xml2json' not found

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

The submit function in Jquery is not functioning properly within the success callback of an Ajax request

What is the best way to eliminate the [lang tag] from a URL in Next.js?

What is the proper way to utilize the router next function for optimal performance

performing functions concurrently within angularjs

Showing the values of selected checkboxes in a select dropdown - here's how!

Code not functioning properly in Internet Explorer

I'm encountering an issue where the database table in Postgres is not updating correctly while working with Node

Change the class of multiple elements using jQuery with a set time interval

What is the best way to manage Page Refresh using Angular.js?

Discovering the destination link of a website while utilizing GM_xmlhttpRequest

Guide on positioning components to the right side of the NavigationDrawer in Vuetify with VueRouter

Execute JavaScript code via URL injection

Tips on incorporating personalized javascript functions into Durandal

The uploading of a file in NodeJS is not possible as the connection was closed prematurely

What are the steps for installing the latest version of popper, v2?

Issue with StyleX defineVars not being applied in Next.js project (turboRepo)

Managing MUI form fields using React