ECONNREFUSED 127.0.0.1:80 when trying to sign in using next-auth

Question

I use next-auth.js library to create authentication system for Next.js my application. Everything works fine on my local computer, but after deploying website to Vercel, my sign in function doesn't work.

The sign in page (/pages/signin) loads fine, i submit credentials and i get an error like this: https://projectname-git-branch.username.now.sh/api/auth/error?error=Error%3A%20connect%20ECONNREFUSED%20127.0.0.1%3A80.

I found many articles that error is about to wrong baseURL configured for axios, but i have many axios requests everywhere in code (for example i get data from firebase after app loads) and it works without any problem.

I console logged environment variable where i set baseURL property for axios and it's fine.

// _app.js
import axios from 'axios';
axios.defaults.baseURL = process.env.FIREBASE_APIURL;
console.log('axios-baseurl', axios.defaults.baseURL) // it prints right url

More informations about this problem i wrote there: #846

I really don't know what to do. I don't get any information about where this error happens, which file and line number, what request in my code.

Below i put my whole [...nextauth.js] file and sign in form. Maybe there is something what i should to configure better there.

// [...nextauth.js]
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

import axios from 'axios';
axios.defaults.baseURL = process.env.FIREBASE_APIURL;
console.log('axios-baseurl', axios.defaults.baseURL)

const sha1 = require('crypto-js/sha1');
const md5 = require('crypto-js/md5');

export default (req, res) => 
    NextAuth(req, res, {
        providers: [
            Providers.Credentials({
                name: 'Credentials',
                credentials: {
                    phone: { label: "Numer telefonu", type: "text" },
                    password: { label: "Haslo", type: "password" }
                },
                authorize: async (loginData) => {
                    const { csrfToken, phone, password } = loginData;
                    
                    //  checking if there is account with these credentials
                    let res = await login({
                        phone, 
                        password: sha1(md5(password)).toString()
                    })

                    //  200 = OK
                    if(res.status == 200){
                        //  check if account was activated
                        if(res.data.info.activated == "true"){
                            //  collect account data
                            const user = {
                                phone,
                                ...res.data.info
                            }
                            return Promise.resolve(user);
                        }
                        else{
                            //  account is not activated by sms code
                            return Promise.reject(new Error("AccountNotActivated"));
                        }
                    }
                    else {
                        //  wrong credentials
                        return Promise.reject(new Error("WrongCredentials"));
                    }
                }
            })
        ],
        callbacks: {
            jwt: async (token, user, account, profile, isNewUser) => {
                user && (token.user = user);
                return Promise.resolve(token)
            },
            session: async (session, user, sessionToken) => {
                session.user = user.user;
                return Promise.resolve(session)
            }
        },
        
        pages: {
            signIn: '/signin'
        },
        
        site: process.env.NEXTAUTH_URL || "localhost:3000",
        debug: true
    })


//  function which sends login request to rest api and returns result
//  https://stackoverflow.com/q/64244115
const login = async data => await axios.post('/checkCredentials', data);

<!-- /pages/signin.js -->
<form action="/api/auth/callback/credentials" method="post">
    <input name='csrfToken' type='hidden' defaultValue={csrfToken} />
    <label>
        Numer telefonu: <br />
        <input name='phone' type='text' required autoComplete='off' />
    </label>
    <br />
    <label>
        Hasło: <br />
        <input name='password' type='password' required autoComplete='off' />
    </label>
    <br />
    <br />
    <input type="submit" value="Zaloguj" />
</form>

Answer 1

You'll need to set environment variables for production use:

NEXTAUTH_URL (e.g. NEXTAUTH_URL='https://example.com'

https://next-auth.js.org/configuration/options#nextauth_url

and

NEXTAUTH_SECRET (e.g. NEXTAUTH_SECRET='MYGENERATEDOPENSSLSECRET')

documentation @ https://next-auth.js.org/configuration/options#nextauth_secret

You can generate a secret on the command line (only one possible way)

openssl rand -base64 32

Add both variables to your vercel deployment: https://vercel.com/docs/concepts/projects/environment-variables