GraphQL Vue Authentication: A Beginner’s Guide

Unlocking the Power of Authentication in Modern Apps

The Quest for Secure Identity Verification

When building applications, identifying the person requesting a resource is a crucial aspect of authentication. However, this task becomes increasingly complex when dealing with web-based applications, where security concerns like cross-site scripting (XSS) loom large. To tackle this challenge, many Single-Page Applications (SPAs) employ token-based authentication, leveraging the scalability and stateless nature of tokens.

The Authentication Flow

The typical authentication process unfolds as follows:

1. The client sends a request to the authentication route with user information like email address and password.
2. The server verifies the user’s identity, generates a JSON Web Token (JWT), and returns it to the browser.
3. The client stores the token in one of the browser storage mediums (APIs).
4. The client appends the token to the authorization header for subsequent requests to the server.

Storage Options for Tokens

When it comes to storing tokens on the client-side, three options are available:

• Local Storage
• Session Storage
• Cookies

Building a Vue App with GraphQL API

In this tutorial, we’ll delve into handling authentication in a Vue app connected to a GraphQL API. We’ll create a mini app using localStorage to store our token.

Prerequisites

Before we begin, ensure you have:

• Node.js 10x or higher
• Yarn / npm 5.2 or higher installed
• Basic knowledge of JavaScript and Vue.js
• Knowledge of GraphQL
• Vue CLI installed

Tools of the Trade

We’ll be using the following tools to build our app:

• Vue-Apollo: An Apollo Client integration for Vue.js
• Vuex: A state management pattern library for Vue.js applications
• Vue Router: The official routing library for Vue.js

Getting Started

We’ll use the Vue CLI tool to bootstrap a new Vue project. First, create a new project using the create command, then select the necessary features. Next, change into the project folder and start the project with the command yarn serve.

Creating the User Interface

Open your App.vue file and replace the content with the following code:

“`html

“`

Configuring Routes

Next, let’s include the routes for the login, register, and dashboard pages in our router file located in src/router/.

Installing Apollo Client with Vue-Apollo

To integrate Apollo in our Vue app, we’ll install the vue-apollo plugin for vue-cli. This plugin creates two files: apollo.config.js in the root directory and vue-apollo.js in the src folder.

Queries and Mutations

Create a folder named graphql in your src folder, and inside it, create two files: queries.js and mutations.js. The queries.js file will contain queries to be made to our GraphQL server, while the mutations.js file will contain mutations made to the GraphQL server.

Configuring Vuex

First, let’s import our mutations, queries, and the apolloClient instance. Next, set the data we’ll be needing in our state object, and configure our getters and mutations.

Adding Functionality to Forms

Now that our store is configured, let’s add functionality to our login and register forms.

Guarding Routes

Import the vuex store at the top of your router file, and add a meta field to our /dashboard route. This meta helps us when defining our routes navigation guard middleware.

The Finished Application

Our finished application should now have authentication functionality using Vue Router, Vue Apollo, and Vuex.

Learn More

Want to learn more about Apollo GraphQL and GraphQL? Check out the resources below!