@sendyit/auth

Sendy Authentication Plugin

Basic and social authentication components for your frontend applications

Dependencies

• Vuejs - javascript framework that supports the plugin
• Axios - used to send http requests to external APIs
• js-sha1 - used to encrypt passwords before sendng auth request

Please note that all dependencies need to be installed for sendy auth to work properly

Getting Started

To pull sendy authentication plugin into your vue project, use the command

npm i @sendyit/auth

Initializing & Configuring

Initialize the authentication plugin by passing it into the Vue.use() function

import SendyAuth from '@sendyit/auth'

Vue.use(SendyAuth)

The plugin can be configured by passing an options object as a second argument

import SendyAuth from '@sendyit/auth'

Vue.use(SendyAuth, {
    // social authentication driver: 'google'
    // default: google
    driver: 'google',

    // internal authentication url
    authUrl: null,

    // custom configurations for social drivers
    configs: {
        google: {
            // google's client key & identification for gapi
            clientId: ''
        }
    }
})

Usage

The sendy authentication plugin exposes two main components that are automatically injected into the main Vue instance upon initialization

1. Social Authentication Component sendy-auth-social
2. Basic Authentication Component sendy-auth-basic

Sendy Authentication Components

Include any of the two components in your .vue files as follows

// social authentication component
<sendy-auth-social><sendy-auth-social>

// basic authentication component
<sendy-auth-basic><sendy-auth-basic>

NOTE: @sendyit/auth does not have support for running both basic and social authentication (yet) so only include one component at a time

CONGRATULATIONS! You have implemented authentication using sendy auth. :)

Sendy Auth API

Sendy auth components can be customised to suite your needs by passing props and listening to events

Props

Social Component API

prop name	default value	type	prop description
app-name	Sendy Authentication Plugin	string	Sets the application name
button-text	Login	string	Sets submit button text
loading-text	Logging in ...	string	Sets text shown while processing

Basic Component API

prop name	default value	type	prop description
form-header	Log in to Sendy	string	Sets the heading on the form
username-placeholder	Enter Email	string	Sets the placeholder text on the username field
password-placeholder	Password	string	Sets the placeholder text on the password field
button-text	Login	string	Sets submit button text
loading-text	Logging in ...	string	Sets text shown while processing
reset-link	#	string	Sets link to trigger password resets
reset-link-text	Forgot password?	string	Sets text shown on the reset link
register-link	#	string	Sets link to trigger registration
register-link-text	Sign Up	string	Sets text shown on the registration link
username	email	string	Determines the property that will be used as the username
password	password	string	Determines the property that will be used as the password
theme	blue	string	Sets the theme color. Allowed values: 'blue' & 'orange'
encrypt	false	boolean	Encrypt the password before sending the payload

Events

The following events are triggered upon execution for both components

event name	type	event description
authenticated	object	Returns an object with the token on successful authentication
error	object	Returns an error object in case authentication failed