dgrubelic / vue-authenticate Goto Github PK
View Code? Open in Web Editor NEWSimple Vue.js authentication library
Simple Vue.js authentication library
Do you think that wrapping your project in Electron could remove server's part.
If I understand, server.js acts as a proxy to relay post messages to providers, because CORS are not allowed from client to provider's domain.
Right ?
If so, electron support could be a great feature.
The electron-oauth-github-vue project could be a source of inspiration.
Hi,
First of all, great solution. It's just what I was looking for.
I have a question regarding integration. I ran it and I get a error saying this:
Possible Unhandled Promise Rejection: Error: Authentication error occurred
Stack trace:
authenticate/</<@webpack-internal:///45:1285:14
I go the same when I did the integration based on the readme of vue-authenticate
. My assumption is that I am not responding as expected on the callback url.
On the server side call Facebook does reply with all good, no issue, http 200.
What is the expected response there? Or, even better, have you seen the error before?
I am currently checking the code of vue-authenticate
and do a step by step debug to try to figure it out, just wanted to start a thread here while I do that.
I get Error
if (!this.$http) {
throw new Error('Request handler instance not found')
}
For email & password login, please list sample failed and success server messages
so that we know in what format server should send data to work with vue-authenticate on client
Thanks!
ERROR in static/js/0.74a7ac117d3159b549af.js from UglifyJs Unexpected token: name (joined) [./~/vue-authenticate/src/utils.js:92,0][static/js/0.74a7ac117d3159b549af.js:133,6]
let normalize = function (str) {
return str
.replace(/[/]+/g, '/')
.replace(//?/g, '?')
.replace(//#/g, '#')
.replace(/://g, '://');
};
return normalize(joined);
Thank you
Could you please clarify how this library works, a small introduction in the docs would be great.
Some thoughts & questions a developer could have:
Add more providers like
linkedin, instagram,live.. and generic oauth1 and oauth2.
Factory method for ES5 and CommonJS code cases is in wrong place
Thanks for this excellent library.
I'm currently connecting vue-authenticate with IdentityServer (Oauth2 and I'm using the Authorization CODE flow) and I'm at the point where I receive a valid bearer token from the IdentityServer. The token is stored in local storage with key name: vue-authenticate.vueauth_token.
the problem I'm facing is that the token is not sent automatically on each request towards the API.
I'm using vue-resource, so did i understand correctly that no explicit configuration is necessary ?
This is my main.js, Am I doing something wrong?
import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'
import vuelidate from 'vuelidate'
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'
Vue.use(Quasar) // Install Quasar Framework
Vue.use(vuelidate)
Vue.use(VueResource)
Vue.use(VueAuthenticate, {
baseUrl: 'http://localhost:8080',
providers: {
identSrv: {
name: 'identSrv',
url: 'Token/Exchange',
authorizationEndpoint: 'http://localhost:5000/connect/authorize',
redirectUri: window.location.origin || window.location.protocol + '//' + window.location.host,
scope: ['profile', 'openid', 'MyApi'],
responseType: 'code',
scopePrefix: '',
scopeDelimiter: ' ',
requiredUrlParams: ['scope', 'nonce'],
optionalUrlParams: ['display', 'state'],
state: function () {
var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
return encodeURIComponent(val)
},
display: 'popup',
oauthType: '2.0',
clientId: 'PanelButlerVueJs',
nonce: function () {
var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
return encodeURIComponent(val)
},
popupOptions: { width: 452, height: 633 }
}
}
})
Hi,
I'm trying to use vue-authenticate to get the id_token from google, so that i could get the user email after right after he signs through google (without querying another google API for that).
I can't get the user email (via google) from the access_token because its not a JWT token.
When i'm trying to change the responseTpe to id_token i'm getting an error.
Do you have a workaround for it?
The exception i'm getting:
Possible Unhandled Promise Rejection: Error: Authentication error occurred
at eval (vue-authenticate.es2015.js?26cf:1284)
at
Thanks.
Hi, I'm trying to use vue-authenticate in my application.
I followed the documentation and did:
(I use axios with vue-axios)
import axios from 'axios'
import VueAxios from 'vue-axios'
import { VueAuthenticate } from 'vue-authenticate'
Vue.use(VueAxios, axios);
Vue.use(VueAuthenticate, {
baseUrl: 'auth',
bindRequestInterceptor() {
this.$http.interceptors.request.use((config) => {
if (this.isAuthenticated()) {
config.headers['Authorization'] = [
this.options.tokenType, this.getToken()
].join(' ');
} else {
delete config.headers['Authorization']
}
return config;
})
},
bindResponseInterceptor() {
this.$http.interceptors.response.use((response) => {
this.setToken(response);
return response;
});
}
});
But when I run it: (I compile it with Laravel Mix with webpack)
I get:
Uncaught TypeError: Object.defineProperties called on non-object at Function.defineProperties (<anonymous>) at VueAuthenticate (app.js:6408) at Function.Vue.use (vendor.js:16924) at Object.<anonymous> (app.js:1239) at __webpack_require__ (manifest.js:53) at Object.<anonymous> (app.js:8508) at __webpack_require__ (manifest.js:53) at webpackJsonpCallback (manifest.js:24) at app.js:1
I'm following the 'Vuex authentication' example.
If I use, as per the ES6 example import { VueAuthenticate } from 'vue-authenticate'
I get this error:
index.js?e9c9:7 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_vue_authenticate__.VueAuthenticate is not a constructor
I am trying to work with the library but I keep getting the error POST http://localhost:3000/auth/register 404 (Not Found). I even tried cloning the original repository but it is the same I can't register or login
letsay I have provider like this..
google: {
clientId: 'SOMENUMBER.apps.googleusercontent.com',
redirectUri: 'http://localhost:8080/auth/callback' // Your client app URL
}
and method like this..
authenticate(provider) {
this.$auth.logout();
this.response = null
this.$auth.authenticate(provider).then(function (authResponse) {
console.log('authcalled');
// Execute application logic after successful social authentication
})
}
but after login I select google account it want to go
/auth/google
no matter what i do, how do pick user data response in js client.
Do I really need server part at client app?
and how to read user data?
Uncaught Error: Request handler instance not found
There appears to be a providers option called display: 'popup' along with popupOptions: { width: 452: height: 633 } but there is no way to disable the popup window.
Is this a planned feature?
Located in Vue plugin file...
Does this work with JWT?
This:
import Vue from 'vue'
import { VueAuthenticate } from 'vue-authenticate'
console.log("VueAuthenticate",VueAuthenticate); // undefined
const vueAuthInstance = new VueAuthenticate(Vue.http, {
gives this error:
ncaught TypeError: _vueAuthenticate.VueAuthenticate is not a constructor
If I import the whole module import VueAuthenticate from vue-authenticate
, I receive a Vue plugin object, which isn't a factory according to a similar issue. What am I doing wrong?
They documentation needs definitely to be more clear and have much better structure how to use this library. For example, I struggle to find how and where would I receive my authorization code. Also what does authenticate
exactly do? open up a popup? what?
According to your vue-authenticate-site project I can make service to instate new VueAuthenticate object and later import somewhere else. Problem is, that Vue is not defined here. If I console.log(Vue) it says, that it's a constructor. Should I make new Vue object?
My services/auth.js:
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'
Vue.use(VueResource)
const vueAuthInstance = new VueAuthenticate(Vue.http, {
baseUrl: 'http://localhost:8000',
loginUrl: '/oauth/token'
})
export default vueAuthInstance
In main.js I have Vue of course.
new Vue({
el: '#app',
router,
i18n,
store
});
Excuse me, but do you really mean state.js or store.js ...?
I have set up an application to use vue-authenticate
What I get instead is a new tab with the same URL
You can give it a try here
**** UPDATE: This is not an issue with the library. The problem was that I was visiting the http version of the side and not the https one.
I am closing this
It is me again :)
When making new instance of Vue Authenticate, no matter in app.js or store.js it gives me error. My code:
const vueAuth = VueAuthenticate.factory(Vue.http, {
baseUrl: 'http://localhost:4000'
})
I'm trying to use the Register/Login features to authenticate my client to my Server but I can't seem to be able to set grant type to password and Ideas where do I set it up.
I noticed that my POSTs were empty (no payload) with Axios. Seems like this.options.requestDataKey is "body" by default. Just a pointer if you want to make Axios the default, you will have to change that to "data".
Source: https://github.com/mzabriskie/axios#axiosconfig
Hi,
I need to send a header Authentication: Basic <username:password>
along my request.
This should work in Satellizer as the docs excplitly give an example: https://github.com/sahat/satellizer#question-how-can-i-send-a-token-in-a-format-other-than-authorization-bearer-token
Should this work in this plugin too?
Here is my code:
Vue.use(VueAuthenticate, {
baseUrl: API_URL,
loginUrl: '/oauth/token',
tokenHeader: 'Authorization',
tokenType: 'Basic',
//...
});
I followed the instructions for adding axios, but can not get it to work.
The problem is that this.$http is undefined. Vue is pretty new to me, but it might be that "this" is the problem?
When I replace the example interceptor code this.$http to Vue.axios, the interceptor does not throw errors anymore, but the lib does (again with this.$http being undefined).
My layout is just like with vue-authenticate-site. Any help is appreciated.
https://gist.github.com/philippeluickx/1632139a90294aced85830dec3e915b3
Looking at https://github.com/imcvampire/vue-axios#usage
This wrapper bind axios to Vue or this if you're using single file component.
Is there any way to hook this.$http globally?
How can you add query parameters to the provider URI? Such as https://localhost:3000/?code=12345. Is there a setting for this?
I'm using Vuex and after authenticate (context, payload)
, I'd like to do a POST to my server to save the user.
For Facebook, I can use graph API, send the access token to get profile IDs.
But I'm stuck on where to put this logic in Vue.
Anyone care to share some solution?
Possible Unhandled Promise Rejection: Error: Authentication failed??
After the success of the callback.
What's the problem?
thank you!
Hi, I'm trying to perform register action:
this.$auth.register(this.register).then((response) => {
console.log('register');
});
But I don't see any data sent to server in Chrome network developer tools
When I do axios
normal request I can see the data that I transfer.
The request has been made, but no data sent
I also tried with normal object, nothing changed
Hello,
Can we use vue-authenticate with JWT provider? or does it adhere to JWT protocol?
Thanks
Brice
Most auth implementations use a short lived access token and a longer living refresh token in order to securely maintain the user logged in.
Basically the refresh token is used to generate a new access token once it has expired, and this is done without having to ask the user for login credentials again.
I found a detailed explanation in the vue-auth package.
Does this package support this in any way?
ERROR in static/js/vendor.f26d5b56df0cc7f19039.js from UglifyJs Invalid assignment [./~/vue-authenticate/src/utils.js:27,0] [static/js/vendor.f26d5b56df0cc7f19039.js:9359,72]
This is caused by camelCase()
regex callback function in utils.js
file.
Lots of backends give the profile data back with the login response (token). I'm not sure how this would be the best to implement and even if it would be appropriate within vue-authenticate. Maybe with a hook?
This is more of an approach and opinion question.
I can always do a new call to fetch the profile, but that'd be a bit of a waste.
Has anybody managed to get this working in cordova, I cant seem to get InAppBrowser to redirect to the app :(
example to run an error?? demo?thanks
I haven't looked deep enough but if vue-authenticate does rely on the localStorage, if the user is browsing in private mode (e.g. chrome incognito) he will never be able to authenticate.
Different browsers do private mode differently, but chrome for instance won't share localStorage data between tabs/windows.
Any workaround?
Hi,
In vue-authenticate-site, I see you set by means of a response interceptor, the received token to local storage.
Just wondering if this is really necessary and potentially a security risk?
Wouldn't it be enough to set the token to local storage only when the response to an authenticate request to the Security service is received?
I'm trying to get this to run. I used sattelizer before and loved it and the integration with vuex seems nice.
I got to the point where I can submit a POST request to the backend, but there's not body. Nothing is being sent.
Similar with the https://github.com/dgrubelic/vue-authenticate-site demo.
I am literally following the example codes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.