Let me preface by saying that I am a authentication newbie. What I am trying to do is figure out the correct way to configure Auth0 to work with VueJS on the client which talks to my API in NodeJS which then access data from a MySQL database.
I am not exactly sure how I should setup the settings on the Auth0 side and also am not sure exactly how to tie everything together correctly. Can anyone point me in the right direction? I did get auth working ish with Vue JS but I don’t think I have setup completely right. Any help would be much appreciated.
Here’s an high level view of what would be required in terms of Auth0 configuration:
- Create a client application (Clients section in Dashboard) to represent your Vue.js application; Given the use of Vue.js I’m assuming this is strictly a SPA application so you should create it with the SPA client application type.
- Create an API (APIs section in Dashboard) to represent your Node.js API.
Use Auth0.js (v8) authorize method in your SPA application to redirect the users to the hosted login page where they will authenticate. You can follow the Vue.js quickstart to accomplish this part.
Augment the previous Auth0.js confiuration to include an audience parameter and any appropriate scopes associated with the API you configured. At this time, the Vue.js quickstart does not have a call an API step, but for the most relevant bits in terms of configuration you can check the jQuery quickstart step as it also uses Auth0.js.
Setup your Node.js API to receive and validate access tokens issued by your Auth0 account; you can follow the Node.js API quickstart for this part.
Having completed all of the above you end-users would authenticate in the hosted login page and an ID token and access token would be issued to the SPA application. You could use the information contained in the ID token to know who the user is and update the UI to reflect their login state. The received access token would be used in any call that the client application would need to perform to the API.
The access token would eventually expire so you would need to obtain a refreshed one; since the end-user initially authenticated through the hosted login page, an authenticated session was established. This makes it possible for you to use the Auth0.js renewAuth method to get a fresh access token without forcing the user to provide their credentials again.
Thanks for your help, I will start here and post if I have further questions, very helpful post, thanks!