Vue Authentication Using Sendy Auth Plugin

Francis Kisiara
Sep 17, 2019 · 4 min read

Prerequisites: Sendy auth is a vue js plugin, therefore it is assumed that the reader has a basic understanding of javascript & vuejs.

Dependencies: Sendy auth uses axios internally to send http requests and js-sha1 to encrypt passwords when sending the requests.

Getting Started

Building authentication into our applications is one of the most repetitive and mundane tasks, which always leave many-a-developer demotivated, consequently killing developer productivity.

The sendy authentication plugin was created to eliminate some of the repetitive tasks when handling authentication. This ultimately promotes code reuse and allows developers to focus more on their application’s core functionality instead of the abstract concept of service authorization.

Lets get to it.


Ahoy! Google authentication uses google apis and so it is advised to include google’s script in your layout file. Otherwise the plugin will not work.

<script src="https://apis.google.com/js/api.js"></script>

To install Sendy auth on a fresh Vue application, we use npm

npm install @sendyit/auth

Install Sendy auth’s dependencies by running

npm install axios js-sha1

You can then import the plugin in your main.js or app.js file and initialise it using the Vue.use() function — passing an options object as the second argument.

import SendyAuth from '@sendyit/auth'

Configuring Sendy Auth

The options object includes a number of properties that can be used to configure the plugin.

driver (string)

The driver property sets the social authentication driver that will be used when performing social authentication. If a driver is not defined in the object then the app will default to using Google.

NOTE: Currently, the plugin only supports the ‘Google’ driver.

authUrl (string)

In case there is an internal authentication endpoint that is required in your application, this is where you define it. This property is also used for basic authentication that shall be covered in the second part of the series.

NOTE: For social authentication, if this is provided then the payload that will be sent to the url will be the email and password (token) obtained from the social providers.

configs

The configs property further customises the driver. It’s an object whose keys should be supported drivers only. Each definition is an object with the necessary driver configurations. For example Google’s config object expects a clientId that is used to access google apis (gapi).

configs: {

Sendy auth automatically registers two components in the global Vue instance:- the social auth and the basic auth component.


The Social Authentication Component

To use the social auth component, we include it in our .vue files using

<sendy-auth-social></sendy-auth-social>

The default display for the social authentication component will be as shown below.

Sendy auth social component

Customising the Social Component

The component comes with batteries included, however you may want to customise the displays to better suit your application. You can do this by using props.

app-name

String value indicating the name of the application. Default is ‘Sendy Authentication Plugin’

button-text

Text that will be shown on the login button. Default is ‘Login’

loading-text

Text that will be shown when processing the request. Default is ‘Logging in …’


The Basic Authentication Component

To use the basic auth component, we include it in our .vue files using

<sendy-auth-basic></sendy-auth-basic>

The default display for the basic authentication component will be as shown below.

Sendy auth basic component

Customising the Basic Component

Like the social component, you can customise the basic component using props.

form-header

Text displayed at the top of the form. Default is ‘Log in to Sendy’

username-placeholder

Placeholder text for the username input. Default is ‘Enter Email’

password-placeholder

Placeholder text for the password input. Default is ‘Password’

reset-link

The link for reseting the password

reset-link-text

The text to be shown on the reset link. Default is ‘Forgot password?’

register-link

The link for registering a new account

register-link-text

The text to be shown on the registration link. Default is ‘Sign Up?’

username

The property expected as a username by the endpoint. Default is ‘email’

password

The property expected as a password by the endpoint. Default is ‘password’

Theme

The theme color (blue or orange). Default is blue.

encrypt

A boolean prop that determines if the password should be encrypted before submitting the payload to the authentication request.

Components Events

There are two events that are triggered once execution is complete in either of the components.

authenticate

The authenticate event is triggered when authentication was successful. It returns a response object that contains the token that was generated or the user data depending on the authUrl option.

When handling this event, you can then redirect the user appropriately.

error

The error event is thrown only if something goes wrong during authentication. We can display appropriate error messages to the user by handling this event.

<template>

CONGRATULATIONS!!! You have successfully integrated authentication using Sendy auth in your Vue application. :) Easy … right?


Did you find this article useful? Follow me (Francis Kisiara) for more tutorials and guides on frontend development with vue js.

Sendyit

Keeping It Simple

Francis Kisiara

Written by

Treat the world with compassion and it will respond in kind

Sendyit

Sendyit

Keeping It Simple

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade