Home > Net >  Keycloak LDAP authentication from a dockerized NuxtJS app
Keycloak LDAP authentication from a dockerized NuxtJS app

Time:02-15

I am facing a problem with my authentication with Keycloak. Everything works fine when my Nuxt app is running locally (npm run dev), but when it is inside a Docker container, something goes wrong.

  • Windows 10
  • Docker 20.10.11
  • Docker-compose 1.29.2
  • nuxt: ^2.15.7
  • @nuxtjs/auth-next: ^5.0.0-1637745161.ea53f98
  • @nuxtjs/axios: ^5.13.6

I have a docker service containing Keycloak and Ldap : keycloak:8180 and myad:10389. My Nuxt app is running on port 3000.

On front side, here is my configuration, which is working great when I launch my app locally with "npm run dev" :

server: {
    port: 3000,
    host: '0.0.0.0'
},

...

auth: {
    strategies: {
      local: false,
      keycloak: {
        scheme: 'oauth2',
        endpoints: {
          authorization: 'http://localhost:8180/auth/realms/<realm>/protocol/openid-connect/auth',
          token: 'http://localhost:8180/auth/realms/<realm>/protocol/openid-connect/token',
          userInfo: 'http://localhost:8180/auth/realms/<realm>/protocol/openid-connect/userinfo',
          logout: 'http://localhost:8180/auth/realms/<realm>/protocol/openid-connect/logout?redirect_uri='   encodeURIComponent('http://localhost:3000')
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          name: 'Authorization',
          maxAge: 300
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: '<client_id>',
        scope: ['openid'],
        codeChallengeMethod: 'S256'
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: '/home'
    }
  },

  router: {
    middleware: ['auth']
  }
}

And here are my Keycloak and Nuxt docker-compose configurations :

  keycloak:
    image: quay.io/keycloak/keycloak:latest
    container_name: keycloak
    hostname: keycloak
    environment:
      - DB_VENDOR=***
      - DB_ADDR=***
      - DB_DATABASE=***
      - DB_USER=***
      - DB_SCHEMA=***
      - DB_PASSWORD=***
      - KEYCLOAK_USER=***
      - KEYCLOAK_PASSWORD=***
      - PROXY_ADDRESS_FORWARDING=true
    ports:
      - "8180:8080"
    networks:
      - ext_sd_bridge

    networks: 
        ext_sd_bridge:
            external:
                name: sd_bridge
    client_ui:
        image: ***
        container_name: client_ui
        hostname: client_ui
        ports:
            - "3000:3000"
        networks:
            - sd_bridge
    networks: 
        sd_bridge:
            name: sd_bridge

When my Nuxt app is inside its container, the authentication seems to work, but redirections are acting strange. As you can see I am always redirected to my login page ("/") after my redirection to "/home" :

Browser network

Am I missing something or is there something I am doing wrong ? Thanks a lot for your help.

Matt

CodePudding user response:

I figured out what my problem was.

So basically, my nuxt.config.js was wrong for a use inside a Docker container. I had to change the auth endpoints to :

endpoints: {
  authorization: '/auth/realms/MEDDATABOX/protocol/openid-connect/auth',
  token: '/auth/realms/MEDDATABOX/protocol/openid-connect/token',
  userInfo: '/auth/realms/MEDDATABOX/protocol/openid-connect/userinfo',
  logout: '/auth/realms/MEDDATABOX/protocol/openid-connect/logout?redirect_uri='   encodeURIComponent('http://localhost:3000')
}

And proxy the "/auth" requests to the hostname of my Keycloak Docker container (note that my Keycloak and Nuxt containers are in the same network in my docker-compose files) :

proxy: {
  '/auth': 'http://keycloak:8180'
}

At this point, every request was working fine except the "/authenticate" one, because "keycloak:8180/authenticate" is put in the browser URL and of course, it doesn't know "keycloak". For this to work, I added this environment variable to my Keycloak docker-compose :

KEYCLOAK_FRONTEND_URL=http://localhost:8180/auth

With this variable, the full process of authentication/redirection is working like a charm, with Keycloak and Nuxt in their containers :)

  • Related