Oops! There seems to be an error in my code - it's expecting a semicolon. I'm currently working on developing an authentication system using credentials with next auth

#pages/api/auth I'm currently in the process of developing an authentication system using Nextauth in Next Js. I encountered an issue with authenticating using credentials while following a tutorial on YouTube.I've double-checked the syntax multiple times, but I can't seem to pinpoint the problem. Here's the link to the video I was watching: https://www.youtube.com/watch?v=EFucgPdjeNg&t=436s Unfortunately, I'm stuck with this error. Any assistance would be greatly appreciated!

import NextAuth,{ NextAuthOptions }  from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import GithubProvider from 'next-auth/providers/github'
import CredentialsProvider from "next-auth/providers/credentials";
// import Providers from 'next-auth/providers'
// import sessionProvider from 'next-auth'
// const client_Id="207449855842-gv24ltosjj4ahf1r7lelc4jiii5qsqe8.apps.googleusercontent.com"
// const client_secret="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"
export default NextAuth({
  
  providers: [
    GoogleProvider({
      client_Id:process.env.GOOGLE_ID,
      clientSecret:process.env.GOOGLE_SECRET,
    
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    CredentialsProvider({
      type: "Credentials",
      credentials: {
        // email: { label: "Email address", type: "text" },
        // password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        
          const { email, password } = credentials as {
          email: string;
          password: string;
        };
        if (email !== "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d2d7d0d6f8dfd5d9d1d496dbd7d5">[email protected]</a>" || password !== "1234") {
          throw new Error("invalid credentials");
        }
        return {
          id: "1234",
          name: "John Doe",
          email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2989d9a9cb2959f939b9edc919d9f">[email protected]</a>",
          role: "admin",
        };
  
       
      }
    }),
    callbacks: {
      jwt(params) {
        // update token
        if (params.user?.role) {
          params.token.role = params.user.role;
        }
        // return final_token
        return params.token;
      },
    },
    session: {
      strategy: "jwt",
    },
    pages: {
      signIn: "/login",
      
    },
    
  ],
  secret:"[6j2Ld_PiUl3etQENg0swsJnuMaAJ]",
  debug:true
  
   
})

ERROR

Error:
  x Expected a semicolon
    ,-[C:\Users\acer\Desktop\next\fundraiser\pages\api\auth\[...nextauth].js:26:1]
 26 |       },
 27 |       async authorize(credentials, req) {
 28 |
 29 |           const { email, password } = credentials as {
    :                                                   ^^
 30 |           email: string;
 31 |           password: string;
 31 |         };
    `----

  x Expected ',', got ';'
    ,-[C:\Users\acer\Desktop\next\fundraiser\pages\api\auth\[...nextauth].js:29:1]
 29 |           const { email, password } = credentials as {
 30 |           email: string;
 31 |           password: string;
 32 |         };
    :          ^
 33 |         if (email !== "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3898c8b8da3848e828a8fcd808c8e">[email protected]</a>" || password !== "1234") {
 34 |           throw new Error("invalid credentials");
 34 |         }
    `----

Caused by:
    Syntax Error

Answer №1

The problem lies in the fact that the variable providers is supposed to be an array, but you are treating it as an object by inserting those key:{value} pairs directly into it:

callbacks: {
    jwt(params) {
      // update token
      if (params.user?.role) {
        params.token.role = params.user.role;
      }
      // return final_token
      return params.token;
    },
  },
  session: {
    strategy: "jwt",
  },
  pages: {
    signIn: "/login",
  },

To resolve this issue, you should enclose the key:{value} pairs within { } so they can form a single element of the array. Like this:

export default NextAuth({
    
    providers: [
        GoogleProvider({

        }),
        GithubProvider({

        }),
        CredentialsProvider({

        }),
        {
            callbacks: {

            },
            session: {

            },
            pages: {

            },
        }
    ],
    secret: "",
    debug: true
})

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

Continuously encountering the modulerr error while working with AngularJS injections

In order to create an angular app with routes and controllers, I used the code below: (function() { angular.module('eCommerceApp', ['ngRoute']) .config('$routeProvider', function($routeProvider) { $rou ...

What could be causing the unusual alignment of the 'pixels' on my resized HTML5 canvas?

Currently, I am in the process of creating a simple HTML5 canvas/JavaScript snake game inspired by the classic Nokia Snake. This is my first attempt at developing a game using HTML5 canvas and JavaScript, and I must admit, I am still a novice programmer! ...

Creating a Cordova application from the ground up, evaluating the options of using ngCordova, Ionic framework, and

With the goal of creating a multiplatform Cordova app for Android, iOS, and Windows, I have been exploring different approaches. My plan is to build an application with 4 or 5 features focused on service consumption (listing, adding, and editing items) wh ...

transferring information between different views in express.js

I am completely new to the world of express and node, so please be patient with me :D In my index.ejs file, I have a string that I need to pass to my viewActivity.ejs file. This string will be utilized in the JavaScript section of my viewActivity.ejs file ...

JavaScript has been used to modify a cell's URL in jqGrid

Currently, I am utilizing struts2-jqgrid along with JavaScript. After the jqgrid has finished loading, it retrieves <s:url var="updateurl" action="pagosActualizar"/>. Subsequently, in the HTML view source, jqgrid generates options_gridtable.cellurl = ...

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

Could there be an issue with my function parameters, or is there another underlying problem?

Hey there! I've been working on this function, but it doesn't seem to be running quite right. Here's the code: function chooseCols(colTag, tagName) { // Set column name var column = $('.tagChooser:eq(&apo ...

Troubleshooting Error: Heroku, mLab, and Node.js - Application Issue with Mongoose

As a beginner in the world of Node.js and Heroku, I am attempting to host my first application on Heroku but encountering deployment issues. To guide me through this process, I have been following a tutorial which can be found here: https://scotch.io/tutor ...

Exploring the search functionality within Meteor JS

As a newcomer to databases and search functionality, I am exploring how to implement a search feature in my Meteor app. After browsing through atmosphere, I found these 4 options: Mattodem easy search Search Source Elastic search package on Atmosphere (h ...

Chrome and Firefox provide excellent compatibility for running JavaScript, whereas Safari may encounter some issues. Opera's performance with JavaScript can be quirky

Disclaimer: I'm new to web design and development. I have encountered an issue with posting information from a form built on CodeIgniter using jQuery. The form posts successfully in Chrome and Firefox, with the current page automatically reloading. H ...

What is the best way to trigger a jQuery function when an option is selected from a Select2 dropdown menu?

I have implemented Select2 for custom dropdown styling. The options are structured like this: <option value="001,100">Option 001</option> <option value="002,200">Option 002</option> <option value="003,300">Option 003</opti ...

Troubleshooting Email Communication Errors: A Persistent Challenge

I am new to nodemailer and trying to work on a simple application. However, I keep encountering errors within the nodemailer module when running my app. Here is my app.js code: const nodemailer = require('nodemailer'); const transporter = node ...

Difficulty encountered while creating a new page in Next.js using the application router

In the process of setting up my new Next.js 13 project, I have organized the folder structure as follows: - app - blog - page.jsx Within the blog directory, I have another page named test.jsx. However, my attempts to access it through "localhost:300 ...

Update image attributes (such as src, alt, etc.) after a successful AJAX request (and also help me troubleshoot my AJAX

The image link I am currently using is: echo "<br/><div class='right' id='post" . $id . "'> <img id='thumb' src='/images/like.png' title='Like it?' alt='Like button' onC ...

Strategies for Mitigating Duplicate Requests in AngularJs with just one click

I am facing an issue with my AngularJS application where clicking on a link triggers the API call twice. I'm not sure why this happens and how to fix it. My service: SomethingService function getData() { return apiSettings.getApiInformation().t ...

Non-IIFE Modules

Check out this discussion on Data dependency in module I have several modules in my application that rely on data retrieved from the server. Instead of implementing them as Immediately Invoked Function Expressions (IIFEs) like traditional module patterns ...

Steps to update the first set of x documents in MongoDB using Mongoose

Is there an efficient way to update the first five documents in mongoose? While I am familiar with updating multiple documents based on a condition, I specifically want to target the first five documents for updating in mongoose. I understand that I can a ...

Validate a JSON object key

There are two ways in which we receive JSON strings: "{"phoneNumber":[{"remove":["0099887769"]},{"add":["0099887765"]}]}" Or "{"phoneNumber":["0099887765"]}" We need to convert the JSON string from the first format to the second format. Is there a way ...