vue nuxt TypeError: Cannot read properties of undefined (reading 'mounted')

Question

I'm trying to make auth using keycloak + vue nuxt using this https://tliebrand.com/19-programming/26-how-to-authorize-nuxt-against-keycloak

When I try to login it fails with this error:

TypeError: Cannot read properties of undefined (reading 'mounted')
    at Auth.mounted (webpack-internal:///./.nuxt/auth/auth.js:221:26)
    at Auth.setStrategy (webpack-internal:///./.nuxt/auth/auth.js:213:19)
    at Auth.loginWith (webpack-internal:///./.nuxt/auth/auth.js:242:19)
    at _callee$ (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=js&:52:36)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.eval [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:119:21)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:5:24)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:9)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:34:7) {stack: 'TypeError: Cannot read properties of undefine…runtime/helpers/esm/asyncToGenerator.js:34:7)', message: 'Cannot read properties of undefined (reading 'mounted')'}

Here is the contents of the package.json:

{
  "name": "front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.2",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/pwa": "^3.3.5",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.3",
    "nuxt": "^2.13.3",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.12.3",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.4.4",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.4.4",
    "prettier": "^2.5.1",
    "ts-jest": "^27.1.1",
    "vue-jest": "^3.0.4",
    "webpack": "^4.46.0"
  }
}

Contents of the nuxt.config.js modules part:

// Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',    
    '@nuxtjs/auth',
    //'@nuxtjs/auth-next',
    '@nuxtjs/vuetify',
    '@nuxtjs/proxy',
  ],

Contents of the nuxt.config.js auth part:

auth: {
    strategies: {
      local: false,
      keycloak: {
        scheme: 'oauth2',
        endpoints: {
          configuration: 'https://keycloak.example.com/realms/master/.well-known/openid-configuration',
          authorization: 'https://keycloak.example.com/realms/master/protocol/openid-connect/auth',
          token: 'https://keycloak.example.com/realms/master/protocol/openid-connect/token',
          userInfo: 'https://keycloak.example.com/realms/master/protocol/openid-connect/userinfo',
          logout: 'https://keycloak.example.com/realms/master/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: 'nuxttest',
          scope: ['openid', 'profile', 'email'],
          codeChallengeMethod: 'S256'
        }
      },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/'
    }
  }

The question is how to fix it. Thank you.

Answer 1

Add a preceding underscore to scheme; to be _scheme

i.e

strategies: {
   keycloak: {
        _scheme: 'oauth2',
    }
}

Answer 2

Answering myself. It was just required to use auth-next instead of auth

'@nuxtjs/auth-next',