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.

Image for post
Image for post

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'Vue.use(SendyAuth, {    driver: 'google',    authUrl: null,    configs: {        google: {            clientId: ''        }    }})

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: {    google: {        clientId: //enter your google api token here as a string    }}

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.

Image for post
Image for post
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.

Image for post
Image for post
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>    <div>
<sendy-auth-social
@authenticated="handleAuth" @error="handleErrors" ></sendy-auth-social>
</div>
</template><script>export default { methods: { handleAuth (res) { // handle authentication success here }, handleErrors (err) { // handle any errors here },
}
}</script>

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store