Home Posts GitHub Menu

Vue Auth Guides Startup



Authentication is going be to be one of the first things an application requires.

The vue-auth plugin attempts to simplify the front end application part of the puzzle. However it's important to understand that the plugin doesn't simply work on it's own. It is only one of the pieces in the puzzle and some prior knowledge and api setup will be required.

Resources

If you are new to single page app development it's a good idea to take a look at the Primer Guide first.

Install

Install the package via npm.

> npm install @websanova/vue-auth

Setup

The default install is for ES6 module syntax.

import Vue             from 'vue';
import auth            from '@websanova/vue-auth';
import authBasic       from '@websanova/vue-auth/dist/drivers/auth/basic.esm.js';
import httpVueResource from '@websanova/vue-auth/dist/drivers/http/vue-resource.1.x.esm.js';
import routerVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';
import oauth2Google    from '@websanova/vue-auth/dist/drivers/oauth2/google.esm.js';
import oauth2Facebook  from '@websanova/vue-auth/dist/drivers/oauth2/facebook.esm.js';

oauth2Google.params.client_id = 'GOOGLE-OAUTH2-CLIENT-ID';
oauth2Facebook.params.client_id = 'FACEBOOK-CLIENT-ID';

Vue.use(auth, {
    auth: authBasic,
    http: httpVueResource,
    router: routerVueRouter,
    oauth2: {
        google: oauth2Google,
        facebook: oauth2Facebook,
    }
    rolesKey: 'role',
    ...
});

Also supports ES5 require syntax.

var Vue             = require('vue');
var auth            = require('@websanova/vue-auth/dist/vue-auth.common.js');
var authBasic       = require('@websanova/vue-auth/dist/drivers/auth/basic.common.js');
var httpVueResource = require('@websanova/vue-auth/dist/drivers/http/vue-resource.1.x.common.js');
var routerVueRouter = require('@websanova/vue-auth/dist/drivers/router/vue-router.2.x.common.js');
var oauth2Google    = require('@websanova/vue-auth/dist/drivers/oauth2/google.common.js');
var oauth2Facebook  = require('@websanova/vue-auth/dist/drivers/oauth2/facebook.common.js');

Vue.use(auth, {
    auth: authBasic,
    http: httpVueResource,
    router: routerVueRouter,
    ...
});

Drivers

The drivers for the most part should work out of the box. Typically it's the "auth" driver that will require customization since each app sends it's token in a slightly different way.

It's best to check the Drivers Guide for more details on usage and customization.

Auth Meta

The next step will be to start defining access on the router's routes. This is done using special meta.auth data in the route.

This also has it's own Meta Auth Guide which contains details and examples for usage.

Requests

With some basic understanding of drivers and auth meta out of the way we can now fire off a request.

Let's start with the simplest case.

this.$auth.login({
    body: this.form.body
});

From here it's best to refer to the reference guides for Methods and Options.

Ready / Loaded

When a user is authenticated the app will likely need to do some initial preload and checks.

For instance if we refresh the app in authenticated mode, we'll need to first check tokens and fetch some data.

A special $auth.ready() Method has been created for this specific case.

<div
    v-if="!$auth.ready()"
>
    Loading...
</div>

<div
    v-if="$auth.ready()"
>
    <router-view />
</div>

Conclusion

That's pretty much it in a nutshell.

It may be a bit of a struggle to initially get setup but it requires very little maintenance. Each app will of course be different, but the vue-auth plugin aims to be simple and flexible enough to handle most situations.