In this tutorial, we will be using Vuex and ApolloClient connected to a GraphQL API to handle authentication in our Vuejs app.

Authentication and Authorization

Authentication and Authorization are most often used interchangeably, but they’re different concepts entirely. Authentication identifies or verifies who a user is while Authorization is validating the routes (or parts of the app) the authenticated user can have access to. In this tutorial, we would just be dealing with local authentication. The most popular way for handling authentication in most modern apps is by using username and password. The flow for implementing this is:

• User signs up using password and email
• The user credentials are stored in a database
• When registration is successful, the user is redirected to the login
• On successful authentication, the user is granted access to specific resources
• The user state is stored in any one of the browser storage mediums (localStorage, cookies, session) or JWT.

Prerequisites

You need to have some of the following to work through this tutorial:

• Node 6 or higher
• Yarn (recommended) or NPM
• Vue CLI
• GraphQL Playground app.

yarn global add @vue/cli

BashCopy

• Knowledge of GraphQL and VueJS and State Management with Vuex
• …and a very inquisitive mind.

#graphql #vue #graphql api #vue authentication #api