paulvanbladel / aurelia-auth-sample Goto Github PK

View Code? Open in Web Editor NEW

40.0 40.0 20.0 143 KB

Sample for aurelia-auth

JavaScript 86.30% HTML 10.39% CSS 3.30%

aurelia-auth-sample's Introduction

Hi there 👋

aurelia-auth-sample's People

Contributors

Stargazers

Watchers

aurelia-auth-sample's Issues

Crash using Google Sign In

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> &nbsp; &nbsp;at exports…)<br> &nbsp; &nbsp;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> &nbsp; &nbsp;at exports…)<br> &nbsp; &nbsp;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> &nbsp; &nbsp;at exports…)<br> &nbsp; &nbsp;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)

Twitter URL callback error

Hi @paulvanbladel

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:

https://api.twitter.com/oauth/authenticate?%3C%3Fxml%20version=%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Chash%3E%0A%20%20%3Cerror%3EDesktop%20applications%20only%20support%20the%20oauth_callback%20value%20%27oob%27%3C%2Ferror%3E%0A%20%20%3Crequest%3E%2Foauth%2Frequest_token%3C%2Frequest%3E%0A%3C%2Fhash%3E%0A

Have I specified process.env.TWITTER_CALLBACK incorrectly?

Many thanks in advance for your help.

doesn't work on ios

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".

Provider changes seem to have broken the sample

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.

DI error when starting sample app (shim.min.js)

When starting the app I just got this error message (followed your instructions how to set up this sample):

Unhandled promise rejection Error: Error invoking App. Check the inner error for details.

window.location.href and electron

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?

Typescript?

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.

Mongo

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

Getting Profile (Google) detail from token

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?

CORS, https, and routing issues.

Hi @paulvanbladel

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

If profile.picture, throws error

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?

Internal server error 500

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.

Gulp test fails

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?

Materialize

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

Unhandled promise rejection Error loading "animation-main"

Hi, when I try to run, it gave me the following error.
Unhandled promise rejection Error loading "animation-main"

Could you please advise me how to fix this? Thanks in advance.

facebook

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 @ $.invoke.js:6queue.(anonymous function) @ $.task.js:40run @ $.task.js:27listner @ $.task.js:31

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 @ $.invoke.js:6queue.(anonymous function) @ $.task.js:40run @ $.task.js:27listner @ $.task.js:31

Upgrade sample to latest aurelia

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)

Why does the login form GET on click/hover?

Go to http://aureliauth.opinionatedapps.com/#/login
Click into the email input.
Mouse out of the email input.
This causes two GET requests to ./undefined.

Why? How do we prevent this behavior?

Why is the line #2 in client/app.js commented out

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?

Additional pages addeed to routing not functioning properly

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?

There is no request token for this page

Hi @paulvanbladel

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

satellizer asp.net 5 sample controllers are not working with this sample

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?

Webpack version

Hi,

In light of recent comments made over on Aurelia/Discuss (Gitter), and I quote:

'March 24, 2016 10:54 AM

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.

Force to login screen if not logged in

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!

Auth URLs point to port 4000 but server on 5000

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?

paulvanbladel / aurelia-auth-sample Goto Github PK

aurelia-auth-sample's Introduction

Hi there 👋

aurelia-auth-sample's People

Contributors

Stargazers

Watchers

Forkers

aurelia-auth-sample's Issues

Unhandled promise rejection Error: Error invoking App. Check the inner error for details.

Recommend Projects

Recommend Topics

Recommend Org