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 |