TypeError: Cannot use 'in' operator to search for 'token'

[joaohenriqueabreu]

Version

v4.9.1

Reproduction link

https://codepen.io/joao-henrique-abreu/pen/xxwBrGZ

Steps to reproduce

[UPDATE]: I was able to "fix" this by disabling token (not sure this is ideal)

Prod (QA) setup: heroku app.

nuxt.config.js

Works on dev / doesn't work on prod:

auth: {
    scopeKey: 'type',
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'token'},
          logout: { url: 'login', method: 'delete' },
          user: { url: 'validate', method: 'post', propertyName: 'user'}
        }
      },
    }
  },

Works on prod:

auth: {
    scopeKey: 'type',
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: false },
          logout: { url: 'login', method: 'delete' },
          user: { url: 'validate', method: 'post', propertyName: false }
        }
      },
      tokenRequired: false,
      tokenType: false
    }
  },

The server gives the correct response on both cases (as i am able to login in dev).

Thanks to https://dev.to/mandeepm91/how-to-add-authentication-to-your-universal-nuxt-app-using-nuxt-auth-module-3ffm
I was able to make this work, but I suppose token should be supported.

What is expected ?

I would expect enabling token to work on prod. Works perfectly on dev environment.

What is actually happening?

At login page when $auth.loginWith('local') is called we get this error:

TypeError: Cannot use 'in' operator to search for 'token'

I briefly traced it and seems that it's trying to use in against a string (minified):

...
if (t in e)
...

where t is 'token' and e is the string of the whole html of the page.

_{This bug report is available on Nuxt community (#c582)}

[CraftingGamerTom]

I ran into the same issue. I began investigating. Here is what I found along the way:

My findings (debugging my issues)

Debugging the error I found that the caller previous to where the issue shows up was getting a bad response from my server for the user information.
Bad Server Response Pastebin
For reference: line 278 here

I received this response as an error because my user url I defined in my nuxt.config.js was not correct.

I reproduced this in postman - received the same strange body from Nuxt. Perhaps there is another plugin / nuxt update needed to make the error more clear because it is not a 404 like it should be. I digress ...

The issue shows up for multiple reasons:

Here are my settings:

axios: {
    baseURL: '/api'
  }

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/user/me', method: 'get', propertyName: 'user' }
        }
        tokenRequired: true,
        tokenType: 'bearer'
      }
    }
  }

1. Issues begin when the headers contain Authorization: Bearer undefined
   MY FAULT: I was not using the correct propertyName for my login route. My api returns a accessToken but there needs to be better error handling if this is related.
   Possible work around: Make sure your propertyName is set correctly for your login route.

2. My user route has a propertyName of user but should be set to false because my user route returns a single user object. Here is an example:

{
    email: 'example@domain.io',
    username: 'example',
    role: 'user'
  }

Possible work around: Make sure your propertyName is set correctly for your user route.

3. My user route itself was set wrong. It should have been /users/me NOT /user/me

This is what was causing the very strange response from the server I included in the pastebin above. Im not sure why the server is responding with that though because it should be a 404 error. Different issue...

Possible work around: Make sure your url is set correctly for your user route.

I also observed that this error occurs when the password is wrong because when it is checking loggedIn there is no accessToken - my server responds with a string - something like "Incorrect Password".

The Real Issue

So the real issue here is that in utilities.js if holder is a string instead of an object to look for the propName in then an exception is thrown. I'm not sure that is what we want for this because of the repercussions it can have (as we are seeing in this thread).

Run this code to see what I am talking about. A possible solution is also provided:
https://codepen.io/craftinggamertom/pen/zYrZLvN

  if (!propName || (!holder || typeof holder === 'string' || holder instanceof String)) {
    return holder
  }

There is a double check for this because a string can be defined as an object or a
See StackOverflow for more information

Another Issue Found

If there is an error getting the user information (say because the route is wrong) then a user object is never set and stored but not errors or warnings are returned or logged. I tested this by setting my route back to /user/me which would return a string. The new code I put in made sure the Cannot use in operator to search for .. didnt occur but the user is undefined still. I will find and relate a ticket or create a new one. Possibly related to #337

[CraftingGamerTom]

What do I need to do to get this approved and merged?? Been over a month of no action

@pi0 ? Just randomly tagging you because I know you do stuff here. Whats the review / contributing process?

[T-Zahil]

Thank you for your work @CraftingGamerTom, it helped me :)

[CraftingGamerTom]

COPIED FROM GITHUB TO PUT ON CMTY (ISSUE TRACKER)

I ran into the same issue. I began investigating. Here is what I found along the way:

My findings (debugging my issues)

Debugging the error I found that the caller previous to where the issue shows up was getting a bad response from my server for the user information.
Bad Server Response Pastebin
For reference: line 278 here

I received this response as an error because my user url I defined in my nuxt.config.js was not correct.

I reproduced this in postman - received the same strange body from Nuxt. Perhaps there is another plugin / nuxt update needed to make the error more clear because it is not a 404 like it should be. I digress ...

The issue shows up for multiple reasons:

Here are my settings:

axios: {
    baseURL: '/api'
  }

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/user/me', method: 'get', propertyName: 'user' }
        }
        tokenRequired: true,
        tokenType: 'bearer'
      }
    }
  }

1. Issues begin when the headers contain Authorization: Bearer undefined
   MY FAULT: I was not using the correct propertyName for my login route. My api returns a accessToken but there needs to be better error handling if this is related.
   Possible work around: Make sure your propertyName is set correctly for your login route.

2. My user route has a propertyName of user but should be set to false because my user route returns a single user object. Here is an example:

{
    email: 'example@domain.io',
    username: 'example',
    role: 'user'
  }

Possible work around: Make sure your propertyName is set correctly for your user route.

3. My user route itself was set wrong. It should have been /users/me NOT /user/me

This is what was causing the very strange response from the server I included in the pastebin above. Im not sure why the server is responding with that though because it should be a 404 error. Different issue...

Possible work around: Make sure your url is set correctly for your user route.

I also observed that this error occurs when the password is wrong because when it is checking loggedIn there is no accessToken - my server responds with a string - something like "Incorrect Password".

The Real Issue

So the real issue here is that in utilities.js if holder is a string instead of an object to look for the propName in then an exception is thrown. I'm not sure that is what we want for this because of the repercussions it can have (as we are seeing in this thread).

Run this code to see what I am talking about. A possible solution is also provided:
https://codepen.io/craftinggamertom/pen/zYrZLvN

  if (!propName || (!holder || typeof holder === 'string' || holder instanceof String)) {
    return holder
  }

There is a double check for this because a string can be defined as an object or a
See StackOverflow for more information

Another Issue Found

If there is an error getting the user information (say because the route is wrong) then a user object is never set and stored but not errors or warnings are returned or logged. I tested this by setting my route back to /user/me which would return a string. The new code I put in made sure the Cannot use in operator to search for .. didnt occur but the user is undefined still. I will find and relate a ticket or create a new one. Possibly related to #337

[CraftingGamerTom]

Pull Request

#738

[timothymarois]

I also seem to be getting the same issue here.

[kissu]

This one will be available in the next release, right ? ^^

[tad0xe]

hello i'm having the same issue but cant seem to find my way around it