Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@websanova/vue-auth

Package Overview
Dependencies
Maintainers
1
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@websanova/vue-auth - npm Package Compare versions

Comparing version 1.0.0-dev to 1.0.2-dev

2

demo/src/app.js

@@ -64,3 +64,3 @@ import App from './components/App.vue';

// Http
Vue.http.options.root = 'https://hs.plugins.api.laravel.com/api/v1';
Vue.http.options.root = 'https://api-demo.websanova.com/api/v1';

@@ -67,0 +67,0 @@ // Vue Auth

@@ -17,3 +17,3 @@ {

"version": "1.0.0-dev",
"version": "1.0.2-dev",

@@ -45,3 +45,4 @@ "repository": {

"copy-webpack-plugin": "3.0.1",
"replace-webpack-plugin": "0.1.2"
"replace-webpack-plugin": "0.1.2",
"@websanova/vue-auth": "1.0.2-dev"
},

@@ -48,0 +49,0 @@

# Vue Auth
Vue.js token based authentication plugin. Supports simple token based and Json Web Tokens (JWT) authentication.
Vue.js token based authentication plugin. Supports simple token based and JSON Web Tokens (JWT) authentication.
Note this is the new name for the formerly named `vue-jwt-auth`. Since it's likely this package will expand with potentially more authentication options.
* [Install](https://github.com/websanova/vue-auth#install)
* [Demo](https://github.com/websanova/vue-auth#demo)
* [Privileges](https://github.com/websanova/vue-auth#privileges)
* [Routes](https://github.com/websanova/vue-auth#routes)
* [Methods](https://github.com/websanova/vue-auth#methods)
* [Options](https://github.com/websanova/vue-auth#options)
* [Driver Options](https://github.com/websanova/vue-auth#driver-options)
* [Change Log](https://github.com/websanova/vue-auth#change-log)
### Tested with
* vue >= 1.0.0
* vue-resource >= 0.8.0
* vue-router >= 0.7.0
## Notes
* There should not be too many non-breaking changes, so the versioning has continued from the previous package.
* There is a ton of changes in the `v1.0.0-dev` version, check the change log below.
* Because the changes are quite different a `v1.0.0` version has been started, however it is still very much in dev mode.
* The changes are mostly non breaking but there will be potentially a few (check change log).
## Install
~~~
> sudo npm install @websanova/vue-auth
~~~
~~~
Vue.use(require('@websanova/vue-auth'), {
rolesVar: 'type'
});
~~~
**NOTE:** If you do not set your router as `Vue.router = new VueRouter()` then you will need to feed the `router` in directly as an optional third argument.
~~~
var router = new VueRouter();
Vue.use(Auth, options, router);
~~~
## Demo
To run the front end part of the demo just install and run.
To run the front end part of the demo just install and run. The demo runs on a publicly available server so just the front end needs run.
```
* Demo server available publicly at https://api-demo.websanova.com
* Demo server on GitHub https://github.com/websanova/laravel-api-demo
* Change the http options root in the `app.js` demo file to a different server for personal testing.
~~~
> sudo npm install
> sudo npm run demo
```
~~~
For the backend a path to the demo file needs to be set to. If a different path is required it must be set in the `demo/app.js` file.
There is a demo server already available in the demo. If a different path is required it must be set in the `demo/app.js` file.
To run the build:
~~~
> sudo webpack
~~~
## Privileges
The `vue-auth` plugin works with the `vue-router` plugin. Setting an `auth` field in the router mapping section will set access to that route.
~~~
Vue.router.map({
'/admin': {
auth: 'admin',
component: require('./Admin')
},
'/manage': {
auth: ['admin', 'manager'],
component: require('./Manage')
},
'/account': {
auth: true,
component: require('./Account')
},
'/login': {
auth: false,
component: require('./Login')
},
'/contact': {
component: require('./Contact')
}
});
~~~
## Routes
### auth: `true`
* User must be authenticated (no roles are checked).
### auth: `false`
* If the user is logged in then this route will be unavailable. Useful for login/register type pages to be unaccessible once the user is logged in.
### auth: `undefined`
* Public, no checks required.
### auth: `Array` `String`
* The user must be logged in. Additionally the string or array will be checked against the users roles.
* Note that the users `roles` variable can be set in the options.
### auth: `Object`
* The user must be logged in and the object will be checked against the users roles.
* Note for this to work both the auth and user roles must both be objects.
* An object must also be used when using `$auth.check({some: 'name'})` where the value can be a `String` or `Array`.
## Methods
#
These are all methods available in the vue app via `$auth`.
* All `success` and `error` functions will receive proper context from currently called component.
### ready
## Options
* Fires once on the initial app load to pre-load users (if set).
~~~
<div v-if="$auth.ready()">
<vue-router></vue-router>
</div>
<div v-if="!$auth.ready()">
Site loading...
</div>
~~~
### user
* Returns the currently stored users data.
~~~
<div>
{{ $auth.user().email }}
</div>
~~~
### check
* Check to see if the user is logged in.
* It also accepts arguments to check for a specific role or set of roles.
~~~
<a v-if="!$auth.check()" v-link="'/login'">login</a>
<a v-if="$auth.check('admin')">admin</a>
<a v-if="$auth.check(['admin', 'manager')]">manage</a>
<a v-if="$auth.check()" v-on:click="$auth.logout()">logout</a>
~~~
### other
* Checks if secondary "other" user is logged in.
~~~
<a v-if="$auth.other()" v-on:click="logoutOther()">logout other</a>
~~~
### disableOther
* Disables other using the default token until it is re-enabled (or logged out).
* This allows you to login is as "another" user but still perform requests as an admin.
~~~
this.$auth.disableOther();
this.$http.get('users'); // Will run as admin.
this.$auth.enableOther();
~~~
### enableOther
* See disableOther.
### token
* Returns the currently activated token if none are specified.
* Can also specify a specific token, but only `other` and `default` will actually return anything.
~~~
var token = this.$auth.token();
var token = this.$auth.token('other');
var token = this.$auth.token('default');
~~~
### fetch
* Fetch the user (again) allowing the users data to be reset (from the api).
* Data object is passed directly to http method.
~~~
this.$auth.fetch({
params: {},
success: function () {},
error: function () {},
// etc...
});
~~~
### refresh
* Manually refresh the token.
* The refresh will always fire on boot, to disable this override the `expiredToken` option method.
* Can be used in conjunction with `expiredToken` and `token` to write custom refreshes.
* If any custom expiration custom logic needs to be done (for instance decoding and checking expiration date in jwt token) override the `expiredToken` method and return `boolean`.
* Data object is passed directly to http method.
~~~
this.$auth.refresh({
params: {},
success: function () {},
error: function () {},
// etc...
});
~~~
### register
* Convenience method for registration.
* Data object is passed directly to http method.
* Accepts `autoLogin` parameter to attempt login directly after register.
* Accepts `rememberMe` parameter when used in conjunction with `autoLogin` equal to `true`.
* Accepts `redirect` parameter which is passed directly to router.
~~~
this.$auth.register({
params: {},
success: function () {},
error: function () {},
autoLogin: true,
rememberMe: true,
redirect: {name: 'account'},
// etc...
});
~~~
### login
* Data object is passed directly to http method.
* Accepts `rememberMe` parameter.
* Accepts `redirect` parameter which is passed directly to router.
~~~
this.$auth.login({
params: {},
success: function () {},
error: function () {},
rememberMe: true,
redirect: '/account',
// etc...
});
~~~
### logout
* Data object is passed directly to http method.
* Accepts `redirect` parameter which is passed directly to router.
* Accepts `makeRequest` parameter which must be set to `true` to send request to api. Otherwise the logout just happens locally by deleting tokens.
~~~
this.$auth.logout({
makeRequest: true,
params: {},
success: function () {},
error: function () {},
redirect: '/login',
// etc...
});
~~~
### loginOther
* Data object is passed directly to http method.
* Accepts `redirect` parameter which is passed directly to router.
~~~
this.$auth.loginOther({
params: {},
success: function () {},
error: function () {},
redirect: {name: 'account'},
// etc...
});
~~~
### logoutOther
* Data object is passed directly to http method.
* Accepts `redirect` parameter which is passed directly to router.
* Also accepts `makeRequest` parameter same as `logout` method.
~~~
this.$auth.logoutOther({
makeRequest: true,
params: {},
success: function () {},
error: function () {},
redirect: {path: '/admin'},
// etc...
});
~~~
### oauth2
* Convenience method for OAuth2.
* Initial request is to third party.
* Second call is to api server.
* Accepts `code` parameter which should be set to `true` when the code is set.
* Accepts `provider` parameter which hooks into data for third party.
* Third party data should follow format such as `facebookData`, `facebookOath2Data`. Check options section for more info.
* Accepts `redirect` parameter which is passed directly to router.
~~~
if (this.$route.query.code) {
this.$auth.oauth2({
code: true,
provider: 'facebook',
params: {
code: this.code
},
success: function(res) {},
error: function (res) {}
redirect: {path: '/account'},
// etc
});
}
else {
this.$auth.oauth2({
provider: 'facebook'
});
}
~~~
## Options
Pretty much all methods are overrideable now in case there any specific issues with a particular version of Vue.
### tokenVar: `'token'`
* The name of the token to check for in the response.
### tokenName: `'auth-token'`
* The name of the token stored in local storage.
### tokenHeader: `'Authorization'`
* Name of authorization token header to look for in the response.
### authType: `'bearer'` `'basic'`
* Authentication type to use.
### rolesVar: `'roles'`
* Name of roles var in user object.
### authRedirect: `{path: '/login'}`
* Redirect to use if authentication is required on a route.
### forbiddenRedirect: `{path: '/403'}`
* Redirect to use if route is forbidden.
### notFoundRedirect: `{path: '/404'}`
* Redirect to use if route is not found (set the `false`).
### registerData: `{url: 'auth/register', method: 'POST', redirect: '/login'}`
* Default register request data and redirect.
### loginData: `{url: 'auth/login', method: 'POST', redirect: '/'}`
* Default login request data and redirect.
### logoutData: `{url: 'auth/logout', method: 'POST', redirect: '/', makeRequest: false}`
* Default logout request data and redirect.
* This request is only made if `makeRequest` is set to true.
### oauth1Data: `{url: 'auth/login', method: 'POST'}`
* Default oauth1 request data and redirect.
### fetchData: `{url: 'auth/user', method: 'GET'}`
* Default user fetch request data and redirect.
### refreshData: `{url: 'auth/refresh', method: 'GET', atInit: true}`
* Default refresh request data and redirect.
### loginOtherData: `{url: 'auth/login-other', method: 'POST', redirect: '/'}`
* Default login as "other" request data and redirect.
### logoutOtherData: `{url: 'auth/logout-other', method: 'POST', redirect: '/admin', makeRequest: false}`
* Default logout as "other" request data and redirect.
### facebookData: `{url: 'auth/facebook', method: 'POST', redirect: '/'}`
* Default request data and redirect.
### googleData: `{url: 'auth/google', method: 'POST', redirect: '/'}`
* Default request data and redirect.
### facebookOauth2Data: `{url: 'https://www.facebook.com/v2.5/dialog/oauth', redirect: function () { return this.options.getUrl() + '/login/facebook'; }, clientId: '', scope: 'email'}`
* Default oauth2 data that ships with plugin.
* These can be overridden when calling `oauth2()` method or in the plugin options on init.
### googleOauth2Data: `{url: 'https://accounts.google.com/o/oauth2/auth', redirect: function () { return this.options.getUrl() + '/login/google'; }, clientId: '', scope: 'https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'}`
* Same as facebookOauth2Data.
### getUrl: `_getUrl`
* Returns the current sites url for use in oauth2 redirects back to the site.
### cookieDomain: `_cookieDomain`
* Set the cookie domain used for `rememberMe` option.
### parseUserData: `_parseUserData`
* Set what data is stored from the user from the response data.
### tokenExpired: `_tokenExpired`
* Hook for checking if a token refresh should occur or not. Set this to return `false` when creating a custom solution.
### check: `_check`
* Function used during `check` method.
## Driver Options
These are all function related directly to Vue that sort of acts like a driver. It makes it easier to deal with incompatibilities between Vue versions.
* `_init`
* `_bind`
* `_watch`
* `_getHeaders`
* `_setHeaders`
* `_bindData`
* `_interceptor`
* `_beforeEach`
* `_invalidToken`
* `_routerReplace`
* `_routerGo`
* `_httpData`
* `_http`
## Change Log
### v1.0.0-dev
* Module renamed to `vue-auth` from `vue-jwt-auth`.
* Package name is scoped through `@websanova/vue-auth` now.
* Added demo with lots of sample code.
* Added demo server (https://api-demo.websanova.com) available on GitHub (https://github.com/websanova/laravel-api-demo).
* Any default data for a request is an object now that goes directly into the `http` method. So it can be called with whatever parameters the method supports.
* All `success` and `error` functions will contain proper context from Vue component.
* Redirects can be objects now, so you can do a redirect as a `/path` or `{name: 'object'}` etc.
* There is now a new `register` call with the option to auto login on success.
* The `auth` parameter in routes and the `check()` method now support objects for checking more complicated roles.
* Better handling for invalid tokens.
* All functions are overrideable now.
* There is a driver file for vue which supports the binding between the plugin and framework. This allows multiple drivers and overrides for any issues between versions in the future and allows full backward compatability.
* Reverted from using Vue in the base code and just went back to regular JavaScript (was not really a good idea).
* Any functions, fields parameters that involve logging in a secondary user are called `other` now.
* Actions can now be performed as "admin" user when logged in as "other" user by using `disabledOther` and `enableOther`.
* The `login`, `oauth2`, etc all have their own default parameters now.
* Removed `google` and `facebook` functions just use `oauth2` method now.
* The `logout` method can now perform an api request if `makdeRequest` is set to true.
* Switch to Vanilla JavaScriipt (for development). Had some issues with using fancy es6 syntax.
* Support for drivers allowing more flexibility between different versions (this is still in development).
* Two auth drivers which are named `bearer` and `basic`.
* A fetch call has been added allowing the user to be reset.
* The token function will return current function or called with `other` or `default` will return the appropriate token.
* Checking token expiration (base64 decode) has been removed. Since a refresh will not occur often for SPA it was a bit too much extra code. Will need to do it custom if it's really necessary.
* Reduced file size.
* Simpler consistent code base.
* Properly packaged and minified distribution.
* General bug fixes and improvements.

@@ -62,3 +62,3 @@ var __utils = require('./lib/utils.js'),

}
else if (routeAuth.constructor === Array && ! __utils.compare(routeAuth, __utils.toArray(this.watch.data[this.options.rolesVar]))) {
else if (routeAuth.constructor === Array && ! __utils.compare(routeAuth, this.watch.data[this.options.rolesVar])) {
this.options._routerReplace.call(this, this.options.forbiddenRedirect);

@@ -347,6 +347,2 @@ }

function _oauth2Process() {
}
var defaultOptions = {

@@ -359,3 +355,2 @@

tokenHeader: 'Authorization',
authType: 'bearer',

@@ -375,3 +370,3 @@ rolesVar: 'roles',

fetchData: {url: 'auth/user', method: 'GET'},
refreshData: {url: 'auth/refresh', method: 'GET', atInit: true},
refreshData: {url: 'auth/refresh', method: 'GET'},
loginOtherData: {url: 'auth/login-other', method: 'POST', redirect: '/'},

@@ -432,4 +427,3 @@ logoutOtherData: {url: 'auth/logout-other', method: 'POST', redirect: '/admin', makeRequest: false},

oauth2Perform: _oauth2Perform,
oauth2Process: _oauth2Process,
oauth2Perform: _oauth2Perform
};

@@ -436,0 +430,0 @@

@@ -76,3 +76,3 @@ module.exports = {

_invalidToken: function (res) {
if (res.status === 401) {
if (this.check() && res.status === 401) {
this.logout();

@@ -79,0 +79,0 @@ }

@@ -34,4 +34,14 @@ module.exports = (function (){

function compare(one, two) {
var i, ii;
var i, ii, key;
if (typeof one === 'object' && typeof two === 'object') {
for (key in one) {
if (compare(one[key], two[key])) {
return true;
}
}
return false;
}
one = toArray(one);

@@ -38,0 +48,0 @@ two = toArray(two);

-login and refresh
-_invalidToken needs to be completed...
**auth bearer should not be included in response.
-stack overflow question about modules...
-test as installed module (with mixbloom ?)...
-reply to the dude
---------
* Compatibility with Vue 2.0.
-reply to jeff guy.
-override vue-jwt-auth
-update to v1.0.0-dev
-update README with some basic info.
-push et all
-change to @websanova/vue-auth
-find a good name for npm here (and push)
-redirect old npm to new
-rename the github repo
-create new repo with redirect
-npm install @websanova/vue-auth
-require("@websanova/vue-auth")
-stack overflow question about modules...
-oauth1
-driver should b set with a name and require variable (this allows full extendability for expansion)
*driver should be full object to avoid requiring a build.
-here options can be set for auth name like 'Authorization'.
-support for multiple drivers in real time...
(hook into mixbloom for testing).
-demo server under naespace for auth method like "jwt",
-"basic" - should be in database
-set up test server from mixbloom online for demoing...?
-on websanova (mysql). demo-api.websanova.com
-also publish auth controller used for demo...
-and recreate steps...
-login as Other
-logout other
-clean up app ids...
-can't really do this on backend can we???????
---------------------------------------
-probably can specify config for demo server (rename to webpack.demo.config).
-clean up package.json dependencies (into one file)
-kill package.json and webpack.config.js in demo.
-setup separate build for vue-auth
-can now also test built file (in dist).
-Reserve names for react-jwt-auth angular-jwt-auth vue-jwt-auth
-Potentially move package to vue-auth, react-auth, angular-auth
- Need some kind of testing (important to hook up with existing first).
- Will need to set up with webpack (Need way to save, compile, test on the fly).
- This will need the fake PHP library.
- All functions should be overridable.
- All Vue methods need to go into a driver file (Vue.js), (React.js).
- Just use regular JavaScript object again.
- Make utils file.
- Need to look over expiration mechanism.
- oauth2 should use drivers (so that they can also easily be added by user on the fly and support other functionality in the future).
- oauth1 library (Twitter).
- Test again supporting (regular token based and JWT tokens).
- Login methods should just keep all data in `data` and not need all the multiple arguments.
- Update README methods (should be easier to lookup).
- A lot more example.
- People asking for a working demo (but how to test with API, maybe a little php faker ?).
-dependencies
-vue-router >= 0.8.0
-docs
-section as contextual methods (will always have proper context in success and error functions).
-changes
-package name is scoped now - it's a bit annoying have to worry about package names being take so they are now scped throught `@websanova` and will be consistently named with the GitHub repo.
- because this plugin is still in a lot of development, this has been made as incremental change even though it's been overhauled quite a bit.
-i will not be maintaining any backward compatability. However this is also released as an rc and will go into version one soon once bugs have been ironed out so it's a bit safer to use.
-added demo
-sudo npm run demo (you will need to hook up back-end php file for full demo).
-the library has been renamed to vue-auth (allows to support more types of login methods in the future).
-options for paths are now objects where you can specify any default data you want to pass into your calls.
-this goes for any routing params also, but now gives the option of using a string path, or an object with name or path and params.
-there is now a new register call with the option to auto login on success.
-there is now no fetch call if the auth call returns a token.
-because there are different ways that this can be implemented
-the default is to just refresh the token on each app init.
-however some users may want to set this token one the user is requested (since that typically happens once or few times) and save a hit to the server.
-to solve this a hook has been created to automatically sniff out and set a `token` var in each response. This means you can set it pretty much anywhere and it will automatically update the token.
-the fetch call will be on by default, if you want it disabled (because you are sending the token already somewhere else) just init the app options with { refreshData: { atInit: false }}
-you can also just call the `refresh` method manually if that suits you better also and provide a `success` callback.
-can set as header or as var in your data which is always checked at each response so you can insert it wherever you like.
-better handling for invalid tokens
-there were some inconsitincies here before
-this will now automatically logout the user and redirect them (if an invalid token is detected).
-all functions are overrideable now
-there is a driver file for vue which supports the binding between the plugin and framework. This allows multiple drivers and overrides for any issues between versions in the future and allows full backward compatability.
-reverted from using Vue in the base code and just went back to regular JavaScript (not a good idea).
-all the redirects area also objects now, so you can do a redirect as a `/path` or `{name: 'object'}`.
-any functions, fields params that involve logging in a secondary user are called `other` now.
-you can still perform actions as the "admin" user when logged in as other by using `useToken('default')` and switching back to `useToken('other')`.
-actually this is now enabledOther() and disableOther - not the same as logging out which kills the token for other...
-you can now specify separate path data for login and oauth1 and oauth2, etc.
-login, oauth, etc functions now just use one data object to pass in. Specify any options, paths or redirect values in there.
-these objects act as a base and any values you pass in will override them in that request. This allows a lot more flexibility for any specific setup you may have or hooking up with existing api's that can't be changed.
-removed function google, and facebook, just use oauth2('facebook', data), etc...
-the plugin comes preloaded with oauth2 info for google and facebook but you can easily add your own in the options...
-use provider parameter 'provider'
-state parameter (pass any info along here)
-rememberMe (automatically passed through state for you)
-provide example...
-there is a logout request that can be made if options.logoutData.url is set (by default it's null).
-either way the logout will follow consistent format and a `success` callback can be set in.
-the success method will contain the proper context.
-login, oauth1, oauth2, register will now have the proper context from calling component (you don't need to use _this kind of stuff).
-without circular bindings
-switch to "safe" javascript.
-support for drivers (this allows more flexibility between different versions)
-auth drivers (these are not fully extendable yet) for now it supports "bearer" and "plain" (both set the Authorization header in the request).
-fetch call (I've found sometimes we need to refetch the user data) this has been provided
-perhaps we update some field but some other processing takes place on the server that changes the users fields
-we can do it manually by calling user(data) which will set it
-or you can perform a fetch request also if that's not possible.
-token function...
-simpler consitent code base
-properly pakaged and minified distribution
-bse64 token stuff removed there really is no readon for this
-if you need to check this on your own intervals there is a `token` function and it can be put into a timeout on your own using `token` and `refresh` calls..
-if you don't like the refresh call on boot
-you can override the tokenExpired routine and check for whatever you like there, you can use `token` call to get the existing token.
-you can also just override it and return false if you want to do it on your own and use `refresh` call manually.
-overall file size ????? (compare this).
*oauth2 support coming.
**removed expiration check - actually this is just bloat and doesn't really need to be done on front end - let the server determine if it's expired.
-since this would only fail once every ten or 14 days since most tokens are alive that long it seemed a bit excessive.
-this also doesn't affect situations where the server would invalidate a token anyway (so it can still fail).
-for those who REALLY need to check this and save that call - there is the `token` method this can be done on your own with
-maybe provide some callback or hook for this....
-----
-all http methods just pass in directly into $http(data).then(success, error);
-this means you can load up the data with whatever works for you, (body, params, url, method, etc).
-appropriate defaults are set for you already such as url, method and redirect
-these can be overridden on in the initial options or on a per request basis.
registerData
-autoLogin can set this to perform a register and automatically login
-you can also set the rememberMe option as you would with login. Of course in this case it's only used with the auto login option.
-redirect: can be string or object
loginData
-redirect:
-rememberMe:

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc