Why do I get a 401 unauthorized error when logging in on a custom page using the credentials provider?

[JWebGit]

Question 💬

I am using the NextAuth.js credentials provider for the log in procedure. When logging in on my custom page I am catching the errors in a try-catch block and set the error state accordingly, but I do not display the error state anywhere yet. Even though I am catching the errors, a 401 unauthorized gets thrown when trying to log in. I am using wrong credentials, thus expecting an error called CredentialsSignin which I am getting, but additionally I am getting the 401 every time.

Here the code of my custom log in page:

import { InferGetServerSidePropsType } from "next"
import { CtxOrReq } from "next-auth/client/_utils";
import { getCsrfToken, getSession, signIn } from "next-auth/react"
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import { useFormik } from "formik"
import * as Yup from "yup"

export default function Login() {

    const [loading, setLoading] = useState(false)
    const [error, setError] = useState('')
    const router = useRouter()

    type Credentials = {
        email: string
        password: string
    }

    let credentials: Credentials;

    const handleLogin = useCallback(async (credentials) => {

        if (!credentials.email) {
            return setError('email is missing')
        }
        if (!credentials.password) {
            return setError('password is missing')
        }
        try {
            setLoading(true)
            const response: any = await signIn('credentials', { ...credentials, redirect: false }) // find right type
            if (response.error && response.error === 'CredentialsSignin') {
                setError('email or password are wrong')
                console.log(error)
            } else {
                setError('')
                router.push('/')
            }
        } catch {
            setError('login failed')
        } finally {
            setLoading(false)
        }
    }, [router])

    const formik = useFormik({
        initialValues: {
            email: "",
            password: ""
        },
        validationSchema: Yup.object({
            email: Yup.string()
                .required("email address is required"),
            password: Yup.string()
                .required("password is required")
        }),
        onSubmit: values => {
            credentials = {
                email: values.email,
                password: values.password
            }
            handleLogin(credentials)
        }
    })

    return (
        <form onSubmit={formik.handleSubmit} noValidate>
            <label>
                Email
                <input
                    name="email"
                    type="email"
                    value={formik.values.email}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur} />
            </label>
            {formik.touched.email && formik.errors.email && <p>{formik.errors.email}</p>}
            <label>
                Password
                <input
                    name="password"
                    type="password"
                    value={formik.values.password}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur} />
            </label>
            {formik.touched.password && formik.errors.password && <p>{formik.errors.password}</p>}
            <button type="submit">Login</button>
        </form>
    )
}

export async function getServerSideProps(context: CtxOrReq | undefined) {

    const session = await getSession(context)

    if (session) {
        return {
            redirect: { destination: '/' }
        }
    }

    return {
        props: {}
    }
}

Here the code of my [...nextauth].ts API page:

import NextAuth from 'next-auth'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '../../../prisma/prisma_client'
import CredentialsProvider from "next-auth/providers/credentials"
import { compare } from 'bcryptjs'

export default NextAuth({

  adapter: PrismaAdapter(prisma),

  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: {},
        password: {}
      },
      async authorize(credentials) {
        if (!credentials) {
          return null
        }

        const { email } = credentials
        const { password } = credentials

        const storedUser = await prisma.user.findUnique({
          where: {
            email
          }, select: {
            id: true,
            email: true,
            hashedPassword: true,
            company: {
              select: {
                id: true,
                name: true
              }
            }
          }
        })

        if (!storedUser) {
          return null
        }

        const user = {
          id: storedUser?.id,
          email,
          comanyId: storedUser?.company?.id,
          companyName: storedUser?.company?.name,
        }

        const validatePassword = await compare(password, storedUser.hashedPassword)
        return validatePassword ? user : null
      }
    })
  ],

  pages: {
    signIn: '/login'
  },

  callbacks: {
    async jwt({ token, user }) {
      user && (token.user = user)
      return token
    },
    async session({ session, token }) {
      session.user = token.user
      return session
    }
  },

  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60 // 30 days
  }
})

How to reproduce ☕️

Try to login using await signIn() within a try catch block
Open the console in the browser
Notice a 401 error that was not catched

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[JWebGit]

Is the 401 the normal response when wrong credentials are used and if so, why can I not catch it in my try-catch block as I do not want it to be displayed in the client's console?

[ChinonsoIg]

@ElisPerez.

Can you send a snapshot of your code? Especially the sign-in page and the [...nextauth] page.

[codewithleader]

@ChinonsoIg

// LOGIN
const login = useCallback(async (email: string, password: string) => {
try {
const signInResponse = await signIn('credentials', { redirect: false, email, password });
if (!signInResponse?.ok) {
console.log('NextAuthContext.tsx login():', signInResponse?.error);
return {
hasError: true,
message: 'Error en las credenciales',
};
}

  return { hasError: false, message: 'Logueado!' };
} catch (error) {
  return {
    hasError: true,
    message: 'Error en las credenciales',
  };
}

}, []);

[ChinonsoIg]

Hi @ElisPerez .
Sorry I was unavailable lately. Are you still having the issue?

[codewithleader]

Hello! @ChinonsoIg

I think it should be normal behavior but I wanted to make sure I was catching all the errors in the trycatch.

[ChinonsoIg]

Okay.

[JWebGit]

I really need your help. I cannot go on like this. :(

[jmusial]

Hey @JWebGit did you manage to find a solution to your problem ?

I'm facing a similar issue when running credentials provider with a custom login page in a docker container

[Programming-School-Pro-Coding]

I really need your help. I cannot go on like this. :(

I'm having the similar issue, please help if you solve it.

[rhunor]

hello did any of you manage to find a solution to the problem i'm having the same issue

[kevinveiga]

Hi @JWebGit
I had the same problem and I solved it by changing one thing in [...nextauth].ts

I changed this:

async authorize(credentials): Promise<any> {
    const { email, password } = credentials as { email: string; password: string };

    await postFetchNoInterceptor({ fetchData: { email, password }, url: apiAuth }).then((response) => {
        const { data: { body: { message = '', token = '', user = {} } = {}, statusCode = 0 } = {} } = response;

        if (statusCode === 200) {
            return user;
        }

        throw new Error(message);
    });
}

For that:

async authorize(credentials): Promise<any> {
    try {
        const { email, password } = credentials as { email: string; password: string };
    
        const response = await postFetchNoInterceptor({ fetchData: { email, password }, url: apiAuth });
    
        const { data: { body: { message = '', token = '', user = {} } = {}, statusCode = 0 } = {} } = response;
    
        if (statusCode === 200) {
            return user;
        }
    
        throw new Error(message);
    } catch (err) {
        throw new Error('Next Auth - Authorize: Authentication error');
    }
}

[ChinonsoIg]

Another scenario where this can happen is bad configuration. Your NEXTAUTH_URL in your Vercel environment should point correctly to the link of your web app. If it doesn't, you'll get this error as well.

Just leaving this here. It might help someone some day.

[jackmannn1]

I still get this. I tried hardcoding the NEXTAUTH_URL, still same error. Any other pointers?

[ssatriya]

@kevinveiga solution above does work on me so far. Thanks

[batmanSix]

I've also met 401 so far

[Linuhusainnk]

Same here too, any solution

[saidaliramos]

I have same... Is there a solution? :C

[Linuhusainnk]

downgrade nextjs version to 13.4.12 it works for me

[AndreaBellomia]

I encountered the same problem when dockerizing. I'm using next js as the frontend and django as the backend api, when I started the provider call locally the authentication was successful when I started it in the docherized context I got the 401.

Libs

"next": "14.1.3"
"next-auth": "^4.24.7"

The problem in my case was the url, using docker I was putting to the domain address https://<my_domaine>.com/api-server, this works perfectly in the client side part of next, but on the server side I received the famous 401 fetch error, this is because docker uses an internal network to communicate between containers. I already knew this thanks to nginx but I hadn't thought about it. I was trying to exit the docker infrastructure and join via revers proxy, but not work.

The solution for me was to separate the 2 addresses using the domain on the client side, on the server side I use the docker container pointer

Part of the docker compose

  frontend:
    image: frontend-server
    build:
      context: ../../
      dockerfile: ./docker/docker/frontend.Dockerfile
    env_file:
      - ".env"
    restart: always
    networks:
      - app-network
    ports:
      - "3000:3000"
  
api:
    image: api-server
    build:
      context: ../../
      dockerfile: ./docker/docker/api.Dockerfile
      args:
        COLLECTSTATIC: "true"
    env_file:
      - ".env"
    restart: always
    command: poetry run gunicorn myapp.wsgi:application -b 0.0.0.0:8000 --workers 4 --timeout 120 --log-level info
    depends_on:
      db:
        condition: service_healthy
      migrations:
        condition: service_completed_successfully
    networks:
      - app-network
    ports:
      - "8000:8000"
    volumes:
      - static:/app/static

Env file included

# API Server
API_DEBUG_MODE=False
API_SECRET_KEY="qwerty"
API_CORS_ALLOWED_ORIGINS="http://localhost,http://frontend:3000"
API_ALLOWED_HOSTS="*"

# Frontend Server
FRONTEND_API_URL="http://localhost/api_server"
FRONTEND_BACK_API_URL="http://api:8000/api_server"
NEXTAUTH_SECRET="qwerty"
NEXTAUTH_URL=http://localhost/api/auth

Conclusions

In my case this problem cost me several hours of development and all due to the lack of a detailed log.
To find the problem I switched to NextAuth 5 which gave me the same problem but with the log and allowed me to find a solution. So it would be useful to have a working log that returns the error.

I hope the solution or debugging process can be useful to someone