Add Authentication and Authorization to Vue.js Apps with Auth0 and GraphQL

This article provides a detailed guide on how to add authentication and authorization to Vue.js applications using Auth0 and GraphQL. The tech stack used includes Vue.js with vue-cli-plugin-apollo and vue-router, Auth0 for authentication, and Hasura GraphQL Engine for instant GraphQL APIs. The process involves deploying Hasura along with Postgres to get the GraphQL APIs ready. Then, an application is created in Auth0, custom JWT claims are added, and a JWT signing certificate is obtained. The backend setup is completed by enabling JWT mode on Hasura and creating an Auth0 rule for user syncing into the postgres database. The Vue.js frontend is configured to make GraphQL queries with the right headers using vue-apollo. Apollo Client is set up with the getAuth method, which ensures that ApolloClient uses the token returned by Auth0 for Authorization header when making its query or subscription. Authentication and authorization are ensured through a combination of authentication tokens from local storage, event emitting after successful login, and permissions defined in Hasura console. Protected routes using Vue Router are also implemented with navigation guards. Finally, the sample app is run by installing dependencies, running npm serve, and checking out the boilerplate on GitHub for further customization or questions.