paulvanbladel / aurelia-auth-sample Goto Github PK
View Code? Open in Web Editor NEWSample for aurelia-auth
Sample for aurelia-auth
The issue I'm facing, as depicted in the 1st attached image, is that in the popup box a 7 digit pin is issued, with notification to enter the pin to complete the authorisation process. The question is, enter it where? What I was expecting to happen, as per your own demo, is that upon entering my twitter details, I would simply be authenticated as an existing twitter user, and then the popup window would then close etc etc.
In my AuthConfig.js file I have specified twitter 'Owner ID', and in config.development file I have
config.TWITTER_KEY = process.env.TWITTER_KEY || 'myKey'; config.TWITTER_SECRET = process.env.TWITTER_SECRET || 'mySecret';
So, I specified the twitter callback with the external url, thinking that this would auto-return (authenticate, close popup etc)
config.TWITTER_CALLBACK = process.env.TWITTER_CALLBACK || 'myExternalURL'
But when 'Sign in with twitter' is clicked, the popup window (see 2nd image) will then attempt to resolve:
Have I specified process.env.TWITTER_CALLBACK incorrectly?
Many thanks in advance for your help.
Hi,
In light of recent comments made over on Aurelia/Discuss (Gitter), and I quote:
We have reported the issues with SystemJS to Guy Bedford. He is interested in trying to address them. However, we think there may be some more fundamental problems that are more than just a simple "fix". For example, the performance is really bad and this may be the result of a number of practices throughout the codebase. We are trying to help in any way we can, but we didn't write that library and don't control what happens to it. So, in addition to supporting it and any improved versions, we are also trying to improve our support for Webpack and RequireJS as alternatives, both of which don't suffer from these bugs and perform massively better.
Aurelia has been designed from the beginning to support multiple loaders, so we have no hard-connection to SystemJS/JSPM in the codebase. We would like the SystemJS/JSPM issues to be resolved, however we recognized from this situation that we need to ensure that our other supported options are first class as well. Developers should be able to choose what they want but we'd also like to make a recommendation in the future of a standard toolset that is more stable, less buggy and has top notch performance. If I were starting a new project today, I would look into our new Webpack skeleton.'
Do you have any plans to release a webpack version of your aurelia-starter-node?
Many thanks in advance.
This could be a false alarm, as I did not provide " my own" versions of data in client/src/authConfig,js
file (the development variant) under the assumption that I do not need to do it in order to get myself authenticated via Google Sign In.
Using the same assumption, I also created a copy of server/config/config.production.js
and named it config.development.js
(without changing its content)
I run the gulp watch
from the client folder (assuming that Gulp will start the server side) and got the "normal" Navigation Skeleton app running. Then I clicked on Login button followed by SIgn in With Google.
The "cmd console" shows
C:\work\Aurelia-Guides\apps\aurelia-auth-sample\server\auth\google.js:58
user.picture = profile.picture.replace('sz=50', 'sz=200');
^
TypeError: Cannot read property 'replace' of undefined
at Query.<anonymous> (C:\work\Aurelia-Guides\apps\aurelia-auth-sample\server\auth\google.js:58:41)
at C:\work\Aurelia-Guides\apps\aurelia-auth-sample\server\node_modules\mongoose\node_modules\kareem\index.js:177:19
at C:\work\Aurelia-Guides\apps\aurelia-auth-sample\server\node_modules\mongoose\node_modules\kareem\index.js:109:16
at process._tickCallback (node.js:355:11)
Error: read ECONNRESET
at exports._errnoException (util.js:746:11)
at TCP.onread (net.js:559:26)
[11:44:49] [nodemon] app crashed - waiting for file changes before starting...
and chrome console shows:
INFO [aurelia] Aurelia Started
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:4000/dist/app.html ["http://localhost:4000/dist/nav-bar", "bootstrap/css/bootstrap.css"]
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:4000/dist/nav-bar.html []
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:4000/dist/welcome.html []
welcome.js:31 dispose subscription
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:4000/dist/login.html []
aurelia-http-client.js:275 POST http://localhost:4000/auth/google 500 (Internal Server Error)processRequest @ aurelia-http-client.js:275f @ shim.min.js:1415(anonymous function) @ shim.min.js:1423b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
oAuth2.js:105 error :undefined
shim.min.js:1444 Unhandled promise rejection HttpResponseMessage {requestMessage: HttpRequestMessage, statusCode: 500, response: "Error: read ECONNRESET<br> at exports…)<br> at TCP.onread (net.js:559:26)↵", isSuccess: false, statusText: "Internal Server Error"…}(anonymous function) @ shim.min.js:1444b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
shim.min.js:1444 Unhandled promise rejection HttpResponseMessage {requestMessage: HttpRequestMessage, statusCode: 500, response: "Error: read ECONNRESET<br> at exports…)<br> at TCP.onread (net.js:559:26)↵", isSuccess: false, statusText: "Internal Server Error"…}(anonymous function) @ shim.min.js:1444b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
shim.min.js:1444 Unhandled promise rejection HttpResponseMessage {requestMessage: HttpRequestMessage, statusCode: 500, response: "Error: read ECONNRESET<br> at exports…)<br> at TCP.onread (net.js:559:26)↵", isSuccess: false, statusText: "Internal Server Error"…}(anonymous function) @ shim.min.js:1444b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
I did not try to debug anything yet, as I am aiming at a different target at the moment - writing the about plugins for Aurelia-Guides, so I wanted to peek into some details of a plugin (how does the client of a plugin (aurelia-auth-sample) gain access of plugin)
I have implemented Google Auth, following the aurelia-auth-sample
, mostly. My implementation is fairly simple. I only want to use Google as the auth provider, no other social channels and no simple login/password.
I have managed to get the client to call the relevant server routes, and I can see the returned JWT in the local storage in the browser. The only item left for me to do is display the profile info (name, email, etc) in a profile widget.
My question is, can I derive this detail from the JWT?
I still have some issues with boostrap and Aurelia release from Sept 5 - and you commenting this line out seems that you encountered some problems as well. Can you tell me more?
I installed the sample following the instructions given. When I try to login, using google oauth (after changing the credentials to my own), I get an internal server error 500, in http://localhost:4000/auth/google , in the post request.
If I was writing a LOB app, I would need to force the user to the login screen before they could do anything, but if they were logged in already and had refreshed the browser for some reason, I want to direct them to the the home page.
Could you show how to achieve this with aurelia-auth and the Aurelia router?
Thanks for this library and sample code!
So I created an twitter app here: https://apps.twitter.com/app
and in my authConfig.js specified the following:
twitter:{ clientId:'Consumer Key (API Key) - I also tried the Access Token, and Owner ID' }
in the providers: section, but am receiving, 'There is no request token for this page' in the popup window (as seen in the attached image) when I select 'Sign in with Twitter'.
What am I missing here?
Many thanks in advance for your assistance
Hi, I don't know if this is the correct report where to issue, since this a sample of a library that is a port of another.
I'm trying to make work this sample with a asp.net 5 project inside visual studio, and I found in the satellizer repo a few samples controller
https://github.com/sahat/satellizer/tree/master/examples/server/c%23
I tried to use them to login a user but I have problems:
[HttpPost("login")]
public ActionResult Login([FromBody]string value)
{
return Json(new { foo = "bar", baz = "Blech" });
}
The first problem is that I have to change the type of the parameter since is a json object with username and password, and this is easy to fix, but the real problem is that returning this way the data aurelia-auth tells me that the login is failed: comparing the c# and node version I think the problem is a JWT token must be returned, and this way only a simple json packet is sent.
Do you know where can I find more informations on how to solve this problem?
Tried your online sample app at http://aureliauth.opinionatedapps.com/
When loading it seems you sample still uses Aurelia 0.12
Also none of the external site logins that I've tried work (facebook, google, twitter)
Hi @paulvanbladel . So, I'm having a bit of an issue adding additional pages to routing. For example adding:
app.router.config.js
{ route: 'users', name: 'users', moduleId: './users', nav: false, title: 'Github Users' }
nav-bar.html
<ul if.bind="isAuthenticated" class="nav navbar-nav">
<li><a href="/#/users">Github Users</a></li>
</ul>
users.js
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';
@inject(HttpClient)
export class Users {
heading = 'Github Users';
users = [];
constructor(http) {
http.configure(config => {
config
.useStandardConfiguration()
.withBaseUrl('https://api.github.com/');
});
this.http = http;
}
activate() {
return this.http.fetch('users')
.then(response => response.json())
.then(users => this.users = users);
}
}
users.html
<template>
<require from="blur-image"></require>
<section class="au-animate">
<h2>${heading}</h2>
<div class="row au-stagger">
<div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users">
<div class="card">
<canvas class="header-bg" width="250" height="70" blur-image.bind="image"></canvas>
<div class="avatar">
<img src.bind="user.avatar_url" crossorigin ref="image"/>
</div>
<div class="content">
<p class="name">${user.login}</p>
<p><a target="_blank" class="btn btn-default" href.bind="user.html_url">Contact</a></p>
</div>
</div>
</div>
</div>
</section>
</template>
is displayed correctly, once a user has been authenticated. But upon clicking the link (Github Users), the page fails to load, and all the other links in the menu bar seemingly loose their state. They also no longer load their associated pages. You have to actually log out, then back in again, to get the links (minus Github Users) to function properly.
What is the issue here?
When starting the app I just got this error message (followed your instructions how to set up this sample):
inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
at Container.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:426:15)
at Object.invoke (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:315:81)
at Container.invoke (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:512:31)
at StrategyResolver.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:155:37)
at Container.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:447:23)
at http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3627:75
at f (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)
at b.(anonymous function) (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1625:11)
at Container.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:426:15)
at Object.invoke (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:315:81)
at Container.invoke (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:512:31)
at StrategyResolver.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:155:37)
at Container.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:447:23)
at http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3627:75
at f (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)
at b.(anonymous function) (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1625:11)
at new AggregateError (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-pal.js:20:13)
at Container.invoke (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:514:15)
at StrategyResolver.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:155:37)
at Container.get (http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-dependency-injection.js:447:23)
at http://localhost:4000/jspm_packages/github/aurelia/[email protected]/aurelia-templating.js:3627:75
at f (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1415:56)
at http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1423:13
at b.exports (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:453:24)
at b.(anonymous function) (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1625:11)
at Number.f (http://localhost:4000/jspm_packages/npm/[email protected]/client/shim.min.js:1596:24)(anonymous function) @ shim.min.js:1444b.exports @ shim.min.js:453b.(anonymous function) @ shim.min.js:1625f @ shim.min.js:1596q @ shim.min.js:1600
So, I'm receiving the following error messages.
DEBUG [templating] "importing resources for http://192.168.42.222:4000/dist/welcome.html" Array [ ] aurelia-logging-console.js:38:7 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=(cities)&language=En&key=<myAPIKey. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> getCountryList service error: TypeError: NetworkError when attempting to fetch resource. geolocationData.js:39:22 undefined welcome.js:72:15
I've checked serveOnly.js, serve.js, and nodeOnly.js, and the Access-Control-Allow-Origin
header has been specified in these files. The only file it has not been specified for, is node.js.
My code is as follows:
`
welcome.js
import {inject} from 'aurelia-framework';
import {GeolocationData} from './geolocationData';
@Inject(GeolocationData )
export class Welcome{
constructor(geolocationData){
this.geolocationData = geolocationData;
}
activate(){
this.geolocationData
.getCountryList()
.then(countries => {
this.countries = countries;
console.log(this.countries);
})
.catch(err => console.log(getTransitModes error: ${err}
));
}
}
geolocationData.js
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';
@Inject(HttpClient)
export class GeolocationData {
api_key = 'myAPIKey';
constructor(http) {
http.configure(config => {
config
.useStandardConfiguration()
.withBaseUrl('https://maps.googleapis.com/maps/api/place/autocomplete/')
});
this.http = http;
}
getCountryList() {
let placesAutoCompleteURL= json? input=Vict&types=(cities)&language=En&key=${this.api_key}
;
return this.http.fetch(placesAutoCompleteURL)
.then(response => response.json())
.then(response => {
console.log(response);
return response;
})
.catch(err => console.log(getCountryList service error: ${err}
));
}
}
`
In regards to the following http error, I merely need to ensure that https is being called. How do I ensure that the page is encrypted (https)?
DEBUG [templating] "importing resources for http://192.168.42.222:4000/dist/login.html" Array [ ] aurelia-logging-console.js:38:7 Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
The following is another routing issue, pertaining to a non-tokenised page (I presume?).
ERROR [app-router] Error: Route not found: /request-password-reset Stack trace: _createNavigationInstruction@http://192.168.42.222:4000/jspm_packages/npm/[email protected]/aurelia-router.js:927:29 loadUrl@http://192.168.42.222:4000/jspm_packages/npm/[email protected]/aurelia-router.js:1459:14 _loadUrl@http://192.168.42.222:4000/jspm_packages/npm/[email protected]/aurelia-history-browser.js:281:42 _checkUrl@http://192.168.42.222:4000/jspm_packages/npm/[email protected]/aurelia-history-browser.js:274:9
My current code for request-password-reset, is as follows:
request-password-reset.js
`
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {Notify} from 'modules/notify';
@Inject(Router)
export class RequestPasswordReset {
heading = 'Password reset request';
email = ''
constructor(router) {
this.router = router;
this.notify = notify;
}
request() {
}
}
`
Many thanks in advance
Why? How do we prevent this behavior?
Ohi,
I was trying to run my app using electron and almost everything went fine. The one thing that failed, was the redirect in this module, which uses window.location.href
.
I have no problems with fixing this myself, but I would like to borrow your brain for a second. How would you go about tackling this?
This is excellent work, exactly what I needed to help me get going.
I was wondering if you or anyone has had a go at converting it to typescript? If not I may have a go.
I followed the setup instructions and got the UI running on port 4000 and the server on 5000. I changed the "linkedin" client config to use "live" (Microsoft) and entered my client ID and put my secret in the server's config.development.js file.
I can log in to Live on port 4000 but then the UI tries to reach /auth/live on port 4000 instead of 5000.
Did I miss a step where I need to tell aurelia-auth to use 5000 for the token exchange call?
Try the sample against live and it doesn't work, you get an error from the provider suggesting they are having problems but if you log in to account.live.com directly in a browser it works.
Facebook throws a different error about application permissions.
Google lets me log in and I authorise the app but then the app fails to detect authorisation.
Line 61 of Google.js in server throws an error when trying to login using Google.
It can be worked around by doing the following:
if (profile.picture)
user.picture = profile.picture.replace('sz=50', 'sz=200');
For some reason the user.google field isnt filled so it looks like google isnt linked:
Any Ideas?
Hello
I tested the application in chrome using a PC and it worked, when I use an ipad or iphone it doesn't work. It keeps showing "Aurelia navigation skeleton".
while i do get logged into facebook, i have following in the console:
POST http://localhost:4000/auth/facebook 500 (Internal Server Error)processRequest @ index.js:254run @ es6.promise.js:91(anonymous function) @ es6.promise.js:105module.exports @
oAuth2.js:107 error :undefined
authService.js:121 auth problem
es6.promise.js:139 Unhandled promise rejection HttpResponseMessage {requestMessage: HttpRequestMessage, statusCode: 500, response: "Error: connect ECONNREFUSED
at ex…ap.afterConnect as oncomplete↵", isSuccess: false, statusText: "Internal Server Error"…}(anonymous function) @ es6.promise.js:139module.exports @
es6.promise.js:139 Unhandled promise rejection HttpResponseMessage {requestMessage: HttpRequestMessage, statusCode: 500, response: "Error: connect ECONNREFUSED
at ex…ap.afterConnect as oncomplete↵", isSuccess: false, statusText: "Internal Server Error"…}
Cloned the repo and ran npm install and jspm install. I receive the following when running gulp test and/or karma start:
ERROR: 'Potentially unhandled rejection [8] Error: XHR error (404 Not Found) loading http://localhost:9876/base/app.router.config.js
at error (http://localhost:9876/base/jspm_packages/system.src.js?ebede71679331e3a7b4569b21102580729e36959:1028:16)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm_packages/system.src.js?ebede71679331e3a7b4569b21102580729e36959:1036:13)'
Unsure if this is a local issue or not. Any ideas?
Hi Paul.
Just pushed version 1 of aurelia-materialize forked from your repo
https://github.com/johntom/aurelia-auth-sample.
Main fix needed on how you hide/display menu items.
I will attempt tonight but if you have time for pointers.
Will also add jquery materialize sample.
John
Hi,
In testing this repo I get the following error when clicking on signup on form. Note the mongo database is created and as I only use sailsjs as my backend I'm not sure what to do.
TIA
John
Express Server listening at http://:::10000 in development mode
[BS] Local URL: http://localhost:4000
[BS] External URL: http://192.168.1.5:4000
[BS] Serving files from: .
[07:59:00] Finished 'serve' after 1.12 s
[07:59:00] Starting 'watch'...
[07:59:00] Finished 'watch' after 88 ms
Error: connect ECONNREFUSED
at exports._errnoException (util.js:746:11)
at TCPConnectWrap.afterConnect as oncomplete
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.