Oauth and Email Authentication works locally but not in docker container :(

[Guo-KeCheng]

Summary

Hi folks,

Techstack used: NextJS, PSQL, MongoDB, Prisma

This is my first time posting in such an extensive discussion, if there are any misconceptions that I have or any ways to improve my processes, feel free to point them out.
For context, I am working on a web app project with a frontend, with user and question backend microservices . The frontend uses Google Oauth and Email/Password as authentication. The authentication works in local development mode, even when dockerizing all backend microservices only. Up till this step, the frontend can communicate to the backend.

The issue arises when I dockerize everything (frontend included). The following error keeps showing up whenever I try to do a POST or GET request to the user microservice.

AxiosError: connect ECONNREFUSED 127.0.0.1:8001
    at AxiosError.from (file:///app/node_modules/axios/lib/core/AxiosError.js:89:14)
    at RedirectableRequest.handleRequestError (file:///app/node_modules/axios/lib/adapters/http.js:593:25)
    at RedirectableRequest.emit (node:events:517:28)
    at eventHandlers.<computed> (/app/node_modules/follow-redirects/index.js:14:24)
    at ClientRequest.emit (node:events:517:28)
    at Socket.socketErrorListener (node:_http_client:501:9)
    at Socket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  port: 8001,
  address: '127.0.0.1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -111,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http' ],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: [class Blob] },
    validateStatus: [Function: validateStatus],
    headers: Object [AxiosHeaders] {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      'User-Agent': 'axios/1.5.1',
      'Content-Length': '61',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    withCredentials: true,
    method: 'post',
    url: 'http://localhost:8001/api/users/login',
    data: '{"data":{"email":"tester@gmail.com","oauth":"google"}}'
  },
  request: <ref *1> Writable {
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: false,
      needDrain: false,
      ending: false,
      ended: false,
      finished: false,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,
      corked: 0,
      sync: true,
      bufferProcessing: false,
      onwrite: [Function: bound onwrite],
      writecb: null,
      writelen: 0,
      afterWriteTickInfo: null,
      buffered: [],
      bufferedIndex: 0,
      allBuffers: true,
      allNoop: true,
      pendingcb: 0,
      constructed: true,
      prefinished: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      errored: null,
      closed: false,
      closeEmitted: false,
      [Symbol(kOnFinished)]: []
    },
    _events: [Object: null prototype] {
      response: [Function: handleResponse],
      error: [Function: handleRequestError],
      socket: [Function: handleRequestSocket]
    },
    _eventsCount: 3,
    _maxListeners: undefined,
    _options: {
      maxRedirects: 21,
      maxBodyLength: Infinity,
      protocol: 'http:',
      path: '/api/users/login',
      method: 'POST',
      headers: [Object: null prototype],
      agents: [Object],
      auth: undefined,
      family: undefined,
      beforeRedirect: [Function: dispatchBeforeRedirect],
      beforeRedirects: [Object],
      hostname: 'localhost',
      port: '8001',
      agent: undefined,
      nativeProtocols: [Object],
      pathname: '/api/users/login'
    },
    _ended: false,
    _ending: true,
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 61,
    _requestBodyBuffers: [ [Object] ],
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: true,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      strictContentLength: false,
      _contentLength: '61',
      _hasBody: true,
      _trailer: '',
      finished: false,
      _headerSent: true,
      _closed: false,
      socket: [Socket],
      _header: 'POST /api/users/login HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'Content-Type: application/json\r\n' +
        'User-Agent: axios/1.5.1\r\n' +
        'Content-Length: 61\r\n' +
        'Accept-Encoding: gzip, compress, deflate, br\r\n' +
        'Host: localhost:8001\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'POST',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      joinDuplicateHeaders: undefined,
      path: '/api/users/login',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'localhost',
      protocol: 'http:',
      _redirectable: [Circular *1],
      [Symbol(kCapture)]: false,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype],
      [Symbol(errored)]: null,
      [Symbol(kHighWaterMark)]: 16384,
      [Symbol(kRejectNonStandardBodyWrites)]: false,
      [Symbol(kUniqueHeaders)]: null
    },
    _currentUrl: 'http://localhost:8001/api/users/login',
    [Symbol(kCapture)]: false
  },
  cause: Error: connect ECONNREFUSED 127.0.0.1:8001
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 8001
  }
}

A lot of the online search results suggested that this was a CORS issue but I have set the user app to use cors with the following settings

const allowedOrigins = [
    'http://localhost:3000',
    'http://localhost:8000',
    'http://localhost:8001',
    'http://user:8001',
    'http://question:8000',
    'http://frontend:3000',
];

app.use(
    cors({
        origin: function (origin, callback) {
            if (!origin || allowedOrigins.indexOf(origin) !== -1) {
                callback(null, true)
            } else {
                callback(new Error('Not allowed by CORS'))
            }
        },
        credentials: true,
        exposedHeaders: ['set-cookie'],
    })
)

I have also tried to use withCredientials set to true when doing an axios POST call.

await axios
      .post(
        BASE_URL + "/login",
        {
          data: { email: email, password: password, oauth: oauth },
        },
        {
          withCredentials: true,
        }
      )

This is the docker-compose file I'm using

version: '3'

services:
  postgres:
    image: postgres
    container_name: postgres
    env_file:
      - ./apps/backend/user/.env
    ports:
      - "5432:5432"               
           
  frontend:
    container_name: frontend    
    build:
      context: ./apps/frontend          
      dockerfile: Dockerfile.frontend     
    ports:
      - "3000:3000"                      
    env_file:
      - ./apps/frontend/.env.local

  question:
    container_name: question  
    build:
      context: ./apps/backend/question   
      dockerfile: Dockerfile.question     
    ports:
      - "8000:8000"                       
    environment:
      - ./apps/backend/question/.env

  user:
    container_name: user        
    build:
      context: ./apps/backend/user       
      dockerfile: Dockerfile.user         
    ports:
      - "8001:8001"                      
    environment:
      - ./apps/backend/user/.env.prod
    depends_on:
      postgres:                         
        condition: service_started

This is the env.local file that I am using in my frontend

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://frontend:3000
NEXTAUTH_SECRET=...
NEXT_PUBLIC_QUESTION_SERVICE=http://localhost:8000
NEXT_PUBLIC_USER_SERVICE=http://localhost:8001

I have been stuck on this for a week with input from quite a bunch of people but still no progress so any help here is really appreciated. Arigatou!

Additional information

No response

Example

No response

[SamanthaJeanneb]

Did you every figure this out? having the same issues with my react springboot application