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

What is the best way to invoke a function that is saved in an array of options while using setTimeout() within an AJAX callback?

Can someone explain what logForm.$invalid.$setValidity is all about?

Interactive input field designed for modifying, adding, and removing data in MySQL

Obtain GPS coordinates (latitude/longitude) from a Google map by dropping a marker on the

Unable to display text overlay on image in AngularJS

Looking for a solution to the problem: Module 'import-local' not found

Provide details on the final parameters

Steps to displaying a genuine Docx file within a Material CardMedia

Deployment is triggered by Contentful and Azure Static Web Apps working together

Discover the best way to reference a JavaScript variable within an HTML form textfield

unable to log out firebase user

JavaScript and HTML - specify the location in the html document where the JavaScript script will be displayed

Ways to display or conceal dual views within a single Marionette js region

Stop the occurrence of OpenCPU javascript error pop-up notifications

Retrieving the user's Windows username with JavaScript

Update information with a fresh GET call - React Dropdown

Next.js: How to retrieve route parameter within getServerSideProps

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

When utilizing Vue components, the issue of "setattr" arises when trying to assign

How can you trigger a link click event when clicking anywhere on the page using Jquery?