CODEWITHSUNDEEP
vuejs2auth0
Boris K
Boris K

Reputation: 3580

Auth0 and Vue: Error in render function: "InvalidTokenError: Invalid token specified: Cannot read property 'replace' of undefined"

guys, I'm going through the VueJS tutorial for Auth0, and am getting this error: 

InvalidTokenError {message: "Invalid token specified: Cannot read property 'replace' of undefined"}
message:"Invalid token specified: Cannot read property 'replace' of undefined"

The tutorial is here:

https://auth0.com/blog/vuejs2-authentication-tutorial/

The error is happening right when the app is supposed to bring up the Auth0 Lock widget.

Thoughts?

Upvotes: 2

Views: 16430

Answers (5)

user14930563
user14930563

Reputation: 1

if you have token in another place, you can copy token in cookies.

  1. you can find your token in Insomia software.
  2. you can copy it
  3. come back to browser and open inspect with F12
  4. open cockies and paste token there

Upvotes: 0

achin mandotia
achin mandotia

Reputation: 71

This fixed it for me. It is in typescript. You can remove (token: string) to (token) if not using TS

function parseJwt (token: string) {
    var base64Url = token.split('.')[0];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
};

Upvotes: 1

Tom Franssen
Tom Franssen

Reputation: 456

I also was running into this issue. I had one rule called 'auth0-authorization-extension' activated that triggered this error.

Upvotes: 1

Shwe
Shwe

Reputation: 469

Clear your browser's local storage cache. e.g for Chrome, press F12 to go to developer window, Storage\Local Storage, right click and clear. For IE, F12 to developer window. On 'Console' tab, run the command 

localStorage.clear()

Upvotes: 25

ShEsKo
ShEsKo

Reputation: 157

Sorry I cannot comment on your question because my rank is too low. I had the same error coming up when I followed the react version of you tutorial.

The issue in my case was due to the fact that in the auth.js file, there is a function called getTokenExpirationDate(encodedToken). Inside that function the line const token = decode(encodedToken); was the cause of the bug.

By investigating the value of encodedToken I found out that it's value was a string with the characters 'none', (not the value none itself!). This makes the encode function very unhappy.

If you go in the chrome developer tools, click on the Application tab, open the Local Storage option on the left hand side and select you site. You will be able to see all the key-value pairs stored in your local storage for your app. In my case the key id_token had the value none. If it's the case for you too, just delete that key/value pair from the local storage and the page should be able to load again.

Hope this helped and good luck!

Edit By playing with local storage with chrome developer tools I realised the local storage can be a bit buggy. Sometimes I try to view the local storage but it doesn't appear. When that happens just try closing and reopening the tool.

Upvotes: 5

Related Questions