Ember-Simple-Auth with Torii access user info - ember.js

I've been working all week to get authentication working. I have gotten it working with
Ember-CLI
Ember-Simple-Auth
Torii
google-oauth2 provider
However I have proven unsuccessful in getting the users information from google. I have tried creating a torii-adapter as stated in their documentation but it doesn't appear to be called
// app/torii-adapters/application.js
export default Ember.Object.extend({
open: function(authorization){
console.log('authorization from adapter', authorization);
}
});
I've exhausted my google-foo and am asking for your assistance. This is a great library combination for authorization however the documentation is lacking for this case, and when figured out I will be sure to contribute back.
Thank you

The problem I was encountering is Torii's default google-oauth2 provider doesn't access this info for you, also it uses the code workflow instead of the token workflow which is needed for the google+ API
To fix this I wrote a custom provider that uses a jquery GET request to the G+ API, I then return the userName and userEmail to access it in the session under content.
I wrote a full tutorial detailing authorizing an ember app using google start to finish here
//app/torii-providers/google-token.js
import {configurable} from 'torii/configuration';
import Oauth2Bearer from 'torii/providers/oauth2-bearer';
var GoogleToken = Oauth2Bearer.extend({
name: 'google-token',
baseUrl: 'https://accounts.google.com/o/oauth2/auth',
// additional params that this provider requires
requiredUrlParams: ['state'],
optionalUrlParams: ['scope', 'request_visible_actions', 'access_type'],
requestVisibleActions: configurable('requestVisibleActions', ''),
accessType: configurable('accessType', ''),
responseParams: ['token'],
scope: configurable('scope', 'email'),
state: configurable('state', 'STATE'),
redirectUri: configurable('redirectUri',
'http://localhost:8000/oauth2callback'),
open: function(){
var name = this.get('name'),
url = this.buildUrl(),
redirectUri = this.get('redirectUri'),
responseParams = this.get('responseParams');
var client_id = this.get('client_id');
return this.get('popup').open(url, responseParams).then(function(authData){
var missingResponseParams = [];
responseParams.forEach(function(param){
if (authData[param] === undefined) {
missingResponseParams.push(param);
}
});
if (missingResponseParams.length){
throw "The response from the provider is missing " +
"these required response params: " + responseParams.join(', ');
}
return $.get("https://www.googleapis.com/plus/v1/people/me", {access_token: authData.token}).then(function(user){
return {
userName: user.displayName,
userEmail: user.emails[0].value,
provider: name,
redirectUri: redirectUri
};
});
});
}
});
export default GoogleToken;

Related

How do I verify the ID token with Firebase and Django Rest?

I just can't wrap my head around how the authentication is done if I use Firebase auth and I wish to connect it to my django rest backend.
I use the getIdTokenResult provided by firebase as such:
async login() {
this.error = null;
try {
const response = await firebase.auth().signInWithEmailAndPassword(this.email, this.password);
const token = await response.user.getIdTokenResult();
/*
No idea if this part below is correct
Should I create a custom django view for this part?
*/
fetch("/account/firebase/", {
method: "POST",
headers: {
"Content-Type": "application/json",
"HTTP_AUTHORIZATION": token.token,
},
body: JSON.stringify({ username: this.email, password: this.password }),
}).then((response) => response.json().then((data) => console.log(data)));
} catch (error) {
this.error = error;
}
},
The only thing I find in the firebase docs is this lackluster two line snippet: https://firebase.google.com/docs/auth/admin/verify-id-tokens#web
where they write
decoded_token = auth.verify_id_token(id_token)
uid = decoded_token['uid']
# wtf, where does this go?
# what do I do with this? Do I put it in a django View?
I found a guide here that connects django rest to firebase: https://www.oscaralsing.com/firebase-authentication-in-django/
But I still don't understand how its all tied together. When am I supposed to call this FirebaseAuthentication. Whenever I try to call the login function I just get a 403 CSRF verification failed. Request aborted.
This whole FirebaseAuthentication class provided by the guide I linked to above - should I add that as a path on the backend?
path("firebase/", FirebaseAuthentication, name="api-firebase"),
Which is the api endpoint my frontend calls?

how to use session in loopback using middlewre

I m new to loopback and don't know how to do following things in loopback
I want to set access token and other value in a session using middleware for that I found this thing in server folder of loopback
"session": {},
in middleware.json but don't know how to use this because there is not much documentation
I want to condition in session middleware like if I has session value then continue else throw to login page
note i already install this npm install express-session
Could you be a little more specific about what you want? but I'll explain a little bit about how authentification sessions are handled, there are two native ways you treat it all; The first one would be using a more raw reading pulling for modeling of your api and the second would be to use the JWT in aligned with accessToken and Passport.JS.
There are two examples available today with Loopback 3.x
loopback-example-user-management
loopback-example-passport
Basically using the raw reading with app.post('/login', function(req, res) then if your client is successfully authenticated you generate a cookie using your client's accessToken, example res.cookie('access_token', token.id, { signed: true , maxAge: 300000 }); res.set('X-Access-Token', token.id); and finally if you want you can transport the generated token to your pages:
res.render('home', {
email: req.body.email,
accessToken: token.id
});
Now with Passport.JS a middleware is used to secure all your connection and authentication:
app.middleware('session:before', cookieParser(app.get('cookieSecret')));
app.middleware('session', session({
secret: 'Seal Playing Saxophone',
saveUninitialized: true,
resave: true,
}));
passportConfigurator.init();
One of the authenticated page rendering pillar is var ensureLoggedIn = require('connect-ensure-login').ensureLoggedIn; you can use this ensureLoggedIn('/login') to free up your routes:
app.get('/auth/account', ensureLoggedIn('/login'), function(req, res, next) {
res.render('pages/loginProfiles', {
user: req.user,
url: req.url,
});
});
Now if you just want to skip this all and already have your environment set up and just want to create a route to get the accessToken of the logged in client use the template below;
app.get('/session-details', function (req, res) {
var AccessToken = app.models.AccessToken;
AccessToken.findForRequest(req, {}, function (aux, accesstoken) {
// console.log(aux, accesstoken);
if (accesstoken == undefined) {
res.status(401);
res.send({
'Error': 'Unauthorized',
'Message': 'You need to be authenticated to access this endpoint'
});
} else {
var UserModel = app.models.user;
UserModel.findById(accesstoken.userId, function (err, user) {
// show current user logged in your console
console.log(user);
// setup http response
res.status(200);
// if you want to check the json in real time in the browser
res.json(user);
});
}
});
});
I hope I have illuminated your ideas :] I am here to answer your questions.

How to link my mobile hub with my existing cognito user pool? (Part 2)

I am sorry to do this, but I don't have enough reputation to comment on this issue: How to link my mobile hub with my existing cognito user pool?, and the answer provided didn't quite solve my problem.
To explain a little better, I am using the React Native build-out for AWS Mobile Hub. I have "successfully" authenticated, but Amplify keeps using the pre-configured (automatically integrated) User Pool. This requires the user to enter a phone number as part of the sign up process, but we don't have that field for sign up.
I have linked my Cognito User Pool to the pre-configured (automatically integrated) Identity Pool under "Authentication Providers" as #andrew-c suggested in the issue above. I edited the 'aws_user_pools_id' property to point to my custom User Pool, as suggested in the issue above.
When I console.log() the User Pool property, that I passed into my Amplify configuration, it gives me my custom User Pool.
When I console.log() the response from the Authentication success, I also see my custom User Pool. But the user keeps getting saved into, and authenticated against the model (namely, phone_number is required) of the pre-configured (automatically integrated) User Pool. I.e. that's where my users show up after sign-up.
Does anyone know what I'm missing?
Here's what I'm seeing in the console:
That's what I get when running this code:
const attributes = {
name: this.state.name,
birthdate: this.state.birthdate,
phone_number: '+011234567890',
}
try {
console.log(Auth.signUp);
this.setState({ loading: true });
const response = await Auth.signUp({
username: this.state.email,
password: this.state.password,
attributes,
validationData: [],
});
console.log(`SignUp::onSignUp(): Response#1 = ${JSON.stringify(response, null, 2)}`);
if (response.userConfirmed === false) {
this.setState({ authData: response, modalShowing: true, loading: false });
} else {
this.onAuthStateChange('default', { username: response.username });
}
} catch (err) {
console.log(`SignUp::onSignUp(): Error ${JSON.stringify(err, null, 2)}`);
this.setState({ error: err.message, loading: false });
}
And the relevant imports:
import Amplify, { Auth } from 'aws-amplify';
import aws_exports from '../../aws-exports';
Amplify.configure(aws_exports);
So suffice it to say I would really like to not require a phone number on sign up, and I figured this would be the easiest way, but if anyone knows what I'm missing or has a better path for me to go down, please let me know. Thanks folks!

Authenticate user with external url, Ember Simple Auth after callback with token

I use an external service for authentication Stamplay ..
To authenticate with username and password, I have to make a post in ${config.host}/auth/v1/local/login
The callback for this post contain the token, so I created a custom authenticator to handle it
Custom Authenticator
export default Base.extend({
tokenEndpoint: `${config.host}/auth/v1/local/login`,
// ... Omited
authenticate(options) {
return new Ember.RSVP.Promise((resolve, reject) => {
Ember.$.ajax({
url: this.tokenEndpoint,
type: 'POST',
data: JSON.stringify({
email: options.email,
password: options.password
}),
contentType: 'application/json;charset=utf-8',
dataType: 'json'
}).then(function (response, status, xhr) {
Ember.run(function () {
resolve({
token: xhr.getResponseHeader('x-stamplay-jwt')
});
});
}, function (xhr) {
Ember.run(function () {
reject(xhr.responseJSON.error);
});
});
});
},
invalidate(data) {
return Ember.RSVP.Promise.resolve(data);
}
});
And everything works fine.. but ...
My problem
For social logins, I need to redirect the user to https://MYAPP.stamplayapp.com/auth/v1/EXTERNAL_SERVICE/connect
EXTERNAL_SERVICE can be.. github, twitter, facebook...
Then, the user is redirect to service page, and after login, the callback will be http://myapp.com/callback?jwt=XYZ
So, how can I capture the token and login the user with this token?
Tell me if I'm wrong, but I think that for Facebook you can use Torii which is working well with simple-auth. Twitter is using Oauth1.0, so it's a bit more complicated in my opinion. But Facebook / Google should be fine.
Basically, Ember will request an AuthorizationCode from Facebook API, then send it to your server. Your server will then ask Facebook API an access_token, and use it to get the user information. Finally, you can load/register your user, generate a JWT token and send it to your Ember app.
But I'm interested to know if you have found a solution for Twitter.

Ember Simple Auth immediately invalidates the session after authenticating with Torii

I am trying to set up Torii with my own OAuth flow and Ember-Simple-Auth. I can get a successful authentication event, but immediately after I authenticate, the invalidateSession trigger is fired causing my session to end. I can see this by intercepting sessionInvalidated() in /app/routes/application.js (which has the ApplicationRouteMixin).
Have any of you come across this? Is there something peculiar that would cause an immediate session validation? Any advice would be greatly appreciated.
EDIT: I think it has to do with the torii popup code because the first return works, but the second doesn't. Any thoughts?
import OAuth2 from 'torii/providers/oauth2-code';
import {configurable} from 'torii/configuration';
export default OAuth2.extend({
name: 'api',
init() { this.set('clientID', this.get('apiKey')); },
baseUrl: configurable('baseUrl'),
redirectUri: configurable('redirectUri'),
responseParams: ['access_token', 'user_id', 'first_name'],
requiredUrlParams: ['client_id', 'redirect_uri', 'response_type'],
open() {
let name = this.get('name');
let url = this.buildUrl();
let redirectUri = this.get('redirectUri');
let responseParams = this.get('responseParams');
// this return works
return { 'yes' : 'no' }
// this return causes the immediate invalidation
return this.get('popup').open(url, responseParams).then((authData) => {
var missingResponseParams = [];
responseParams.forEach(function(param){
if (authData[param] === undefined) {
missingResponseParams.push(param);
}
});
if (missingResponseParams.length){
throw new Error("The response from the provider is missing " +
"these required response params: " + missingResponseParams.join(', '));
}
return {
access_token: authData.access_token,
first_name: authData.first_name,
user_id: authData.user_id,
provider: name,
redirectUri: redirectUri
};
});
}
});
the real answer is using this fork: https://github.com/simplabs/ember-simple-auth/pull/931 (hopefully it'll be in master soon).
You might have this.get('session').invalidate(); somewhere. Probably in one of your controllers action properties. You would usually put that in your actions for your logout button. Maybe you copy and pasted it by accident. If you post some code I might be able to look at it some more