okta callback not working when using nginx-CodePudding

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?

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'
        })
      }

CodePudding user response：

Your nginx.config file needs to be made SPA-aware. That is, it needs to redirect all requests to index.html.

server {
    listen   80;
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

From https://developer.okta.com/blog/2020/06/17/angular-docker-spring-boot#create-a-docker-container-for-your-angular-app

CodePudding user response：

Not sure what the exact issue was, but changing the login flow, resolved the issue.

Instead of using the get I called my login flow to this:

From:

this.$auth.token.getWithRedirect({
          sessionToken: transaction.sessionToken,
          responseType: 'access_token'
        })

To:

if (transaction.status === 'SUCCESS') {
        const originalUri = this.$auth.getOriginalUri()
        if (!originalUri) {
          this.$auth.setOriginalUri('/app/next')
        }

        const { tokens } = await this.$auth.token.getWithoutPrompt({
          responseType: 'id_token',
          sessionToken: transaction.sessionToken
        })

        await this.$auth.tokenManager.setTokens(tokens)
        await this.$auth.handleLoginRedirect(tokens)
      }