okta callback not working when using nginx – Docker

I have a VueJS 3 application running in a docker container using nginx as the web server.

I integrated okta for authentication. The okta integration works fine on localhost:3000 without ngnix. However, when deployed in production, after a successful authentication, the redirect get stuck on the callback page:

Callback router definition:

import { LoginCallback } from '@okta/okta-vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes =[{
    path: '/iam/callback',
    component: () => LoginCallback
}]
  
const router = createRouter({
    history: createWebHistory('/'),
    routes
})

My Docker file looks like this:

FROM node:17.5-alpine3.14 as package

# set working directory
WORKDIR /usr/src/webapp

# install and cache app dependencies
COPY package*.json ./
COPY nginx.conf ./

#RUN npm install
RUN npm ci

COPY . .

RUN npm run build

# production environment
FROM nginx:1.21.6-alpine as production
COPY --from=package /usr/src/webapp/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

EXPOSE 80

COPY entrypoint.sh /

# Make the file executable
RUN chmod +x /entrypoint.sh

CMD ["./entrypoint.sh"]

and the nginx config looks like this:

server {
    listen       80;

   location / {
     root /usr/share/nginx/html;
     try_files $uri $uri/ /index.html;
   }
}

Is there something wrong with the nginx config?

Sign in process code:

const transaction = await this.$auth
        .signInWithCredentials({
          username: this.username,
          password: this.password
        })
        .catch((error) => console.log(error))
      if (transaction.status === 'SUCCESS') {
        const originalUri = this.$auth.getOriginalUri()
        if (!originalUri) {
          this.$auth.setOriginalUri('/app/next')
        }
        this.$auth.token.getWithRedirect({
          sessionToken: transaction.sessionToken,
          responseType: 'access_token'
        })
      }