NuxtJS Auth error with property doesn't exist

Question

I've just installed @nuxtjs/auth on my project.

I get Property '$auth' does not exist on type 'AuthLoginPage' class.

Method login on login class page

this.$auth.loginWith('local', {
        data: {
          username: 'your_username',
          password: 'your_password'
        }
      });

My nuxt.config.ts

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/pwa',
  ],
...
auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'http://127.0.0.1:3001/users/login',
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: 'http://127.0.0.1:3001/users/logout',
            method: 'post'
          },
          user: {
            url: 'http://127.0.0.1:3001/users/me',
            method: 'get',
            propertyName: 'user'
          }
        },
        // tokenRequired: true,
        // tokenType: 'bearer'
      }
    }

It's impossible for me to use NuxtJS Auth.

Have you got an idea please?

Answer 1

Edwin Rendoon Cadivid's answer works, but it's not the right way to do it.

I wrote the original typings and I just submitted another PR to bundle the typings with nuxt auth directly: https://github.com/nuxt-community/auth-module/pull/486

After that PR is merged as of @nuxtjs/auth v5 (which re-writes the module in typescript) all you will have to do is add @nuxtjs/auth to the types array in your tsconfig.json

    "types": [
      "@nuxt/types", 
      "@nuxtjs/auth" // Add this line
    ]

---

For now, until the PR is merged run npm install --save-dev @types/nuxtjs__auth

Then add @types/nuxtjs__auth to you're types array in your tsconfig.json

    "types": [
      "@nuxt/types", 
      "@types/nuxtjs__auth" // Add this line
    ]