Auth0 and Vue Error: Unauthorized

Help
, , , ,
1

I’m trying to set up Auth0 in a Vue app using auth0-vue and the samples contained in the repo, however I am getting 2 different errors in my console and I am not sure why. The first error I get is as soon as I load my vue app:

auth0-spa-js.production.esm.js?d777:15 Uncaught (in promise) Error: Invalid state
    at eval (auth0-spa-js.production.esm.js?d777:15:1)
    at eval (auth0-spa-js.production.esm.js?d777:15:1)
    at Object.eval [as next] (auth0-spa-js.production.esm.js?d777:15:1)
    at eval (auth0-spa-js.production.esm.js?d777:15:1)
    at new Promise (<anonymous>)
    at d (auth0-spa-js.production.esm.js?d777:15:1)
    at e.handleRedirectCallback (auth0-spa-js.production.esm.js?d777:15:1)
    at eval (client.proxy.ts?bd0e:110:1)
    at eval (client.proxy.ts?bd0e:43:1)
    at eval (tslib.es6.js?b1de:102:1)

When I click the login button, I am directed to the Auth0 login page. Upon filling in my details I am redirected back to my app with this error in the console:

auth0-spa-js.production.esm.js?d777:15 Uncaught (in promise) Error: Unauthorized
    at new t (auth0-spa-js.production.esm.js?d777:15:1)
    at eval (auth0-spa-js.production.esm.js?d777:15:1)
    at eval (auth0-spa-js.production.esm.js?d777:15:1)
    at Object.eval [as next] (auth0-spa-js.production.esm.js?d777:15:1)
    at c (auth0-spa-js.production.esm.js?d777:15:1)

Anyone have a clue what I’m doing wrong here? I’ve pushed it up to GitHub and my login button is inside /components/Navbar.vue.

Additional info, I saw in the nextjs auth0 sdk that a client secret is provided, and on my ruby backend I also make use of the client secret, yet I don’t see this mentioned anywhere with vue. Could this have something to do with it?

https://github.com/nolyoi/vue-auth0-test

1 Like
3

Update, just tried a nextjs example and that works fine. I’m guessing it has to do with the client secret. Is this flow not supported with vue?

4

Know you’ve probaly sorted by now, but I think the issue you had was that you need to set “Application Type” to “Single Page Application” and “Token Endpoint Authentication Method” to “None”

1 Like
5

Thanks for sharing that with the rest of community!