Vue Auth
Upgrades
2.x to 3.x

For the most part the plugin should be fully backwards compatible with a few exceptions.

There are a handful of breaking changes which are outlined below. The rest are add-ons and internal updates.

Upgrade time: 10 to 20 minutes.

New options.cookie object parameter added to allow for custom cookie paramaters.

For instance the default cookie option below which can be extended/overridden as need be.

cookie: {
    Path:     '/',
    Domain:   null,
    Secure:   true,
    Expires:  12096e5,
    SameSite: 'None',
},

Check the Cookies Guide for more details.

Calling $auth.user() will now return null if not set.

To ensure proper reactivity, this will now return null rather an empty ({}) object if not set.

No more success/error callbacks.

These have been completely removed and now return a Promise.

This applies to:

• $auth.load()
• $auth.login()
• $auth.register()
• $auth.fetch()
• $auth.refresh()
• $auth.logout()
• $auth.impersonate()
• $auth.unimpersonate()
• $auth.oauth2()

NOTE: Requests will now correctly chain in situations such as with a login and subsequent fetch request.

Instead of:

this.$auth
    .login({
        body: body,
        rememberMe: true,
        success() => {},
        error() => {}
    });

Use then:

this.$auth
    .login({
        body: data,
        rememberMe: true,
    })
    .then(() => {
        // success
    }, () => {
        // error
    });

The $auth.ready() function no longer accepts a callback.

The ready function now simply returns true/false.

Use $auth.load() instead for this which returns a Promise.

NOTE: The $auth.load().then() can be called multiple times.

Instead of:

this.$auth
    .ready(() => {
        // do some stuff
    });

Use load and then:

this.$auth
    .load()
    .then(() => {
        // do some stuff
    });

New $auth.load() function.

This replaces the $auth.ready() callback.

NOTE: These can be used multiple times.

this.$auth
    .load()
    .then(() => {
        // Do something.
    });

this.$auth
    .load()
    .then(() => {
        // Do something again
    });

The "remember me" functionality has changed.

This has been modified to add more granularity for what "remember me" may actually mean to the app.

1. The rememberMe flag has been renamed to remember.
2. The new remember flag has been repurposed to accept a String value for the purpose of storing some basic info like a users name for subsequent logins.
3. Use staySignedIn to retain usage of the old 'rememberMe' flag.

Instead of:

this.$auth
    .login({
        rememberMe: true
    });

Use staySignedIn instead:

this.$auth
    .login({
        staySignedIn: true
    });

Use remember for data:

this.$auth
    .login({
        staySignedIn: true,
        remember: JSON.stringify({name: 'Rob'})
    });

New "staySignedIn" flag has been added to login.

This is also now part of the loginData default options and defaults to a true value.

NOTE: Check above for more notes on this.

this.$auth
    .login({
        staySignedIn: true
    });

New $auth.remember() function.

This will return the data stored in the remember store when using remember flag on login.

this.$auth
    .login({
        staySignedIn: true,
        remember: JSON.stringify({name: 'Rob'})
    });

var name = JSON.parse(this.$auth.remember() || '{}').name;
var msg  = name ? 'Welcome back,' + name : '';

Or just keep it simple.

this.$auth
    .login({
        staySignedIn: true,
        remember: 'Rob'
    });

var name = this.$auth.remember();
var msg  = name ? 'Welcome back, ' + name : '';

New $auth.unremember() function.

This will clear out the remember store data.

this.$auth.unremember();

Simplified "OAuth2" setup.

There is now only one oauth2Data options object that will be used as a general case.

A drivers/oauth2 folder has been added and ships with Facebook and Google drivers.

The $auth.oauth2() call remains however the options are a bit different depending on the call.

Check the OAuth2 Guide for more details.

The sessionStorage option for tokenStore has been removed.

This has been removed and merged with localStorage to simplify things.

Check the Tokens Guide for more details.

NOTE: More notes below on storage and tokens.

The localStorage option for tokenStore has been renamed to storage.

This has been merged with sessionStorage into one simplified storage option.

This will automatically work with staySignedIn to set the appropriate expiration when storing the token.

With staySignedIn set to true it would use localStorage while with a false value, it will use sessionStorage.

With the cookie storage we can expect same behavior as before with cookies being set and expired accordingly.

Calling $auth.login() will attempt to set user if fetchUser is disabled.

If the user data is already returned on a successful login the user can be loaded right away without doing a fetch.

NOTE: This will use same parser as with the fetch call.

this.$auth
    .login({
        fetchUser: false
    })
    .then(() {
        // Do something.
    });

Token name options renamed.

The tokenDefaultName and tokenImpersonateName options have been renamed to tokenDefaultKey and tokenImpersonateKey respectively.

Token Store option renamed.

The tokenStore option has been rename to stores.

Added staySignedInKey to options.

This is in case the storage name needs to be changed when saving the staySignedIn selection during login.

No more underscore prefix on driver functions.

This applies to http and router drivers.

This was quite unnecessary so have removed it.

Update to ES6 imports.

The source files now use ES6 import / export syntax.

Internal function renaming.

Lots of functions have been renamed to follow a more consistent naming pattern.

Lib clean up.

The libraries here have been cleaned up to be a much more consistent naming scheme.

Removed internal function exposing.

A lot of internal functions were exposed via the options. This was intended to allow overriding various parts of the plugin.

This has been removed to keep things simpler.