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

Question

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?

Answer 1

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()

Answer 2

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.

Answer 3

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

Answer 4

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);
};

Answer 5

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