Cookies not being saved in browser - rest

I am working on a full-stack project that has the usual login/logout functionality. Both the API and the frontend code are on a subdomain of a domain (project-api.domain.app for the backend and project.domain.app for the frontend). The files for these repositories are uploaded on Heroku; I just put a custom domain to domain.app.
The problem is, whenever a user logs in, the server usually responds with 200 but the cookie is not sent to the browser.
The login code is as follows:
if (comparePasswords) { // passwords from body and database are hashed, and if it
// matches, proceed
res.cookie('name', 'cookie', {
maxAge: 9000000000,
httpOnly: true,
secure: true
});
res.status(200).json({
id: userData.patientID,
userData
})
} else { // if it does not match, deny access
res.status(401).json({
status: "Wrong password",
message: "Incorrect input from user. Access denied."
})
}
When I inspect the http request from the browser, it says that the login request was successful. However, when I check the cookie storage, it is empty. What could be the problem?
Also for context, I used to host these apps on Heroku's free plan (the one without a custom domain). I also encountered the same problem (the cookies not being sent because of cross-domain issues, please see this). As stated, it was advised that I should get a custom domain to avoid these kinds of problems. Could it be that the problem I am facing right now is because my files are still in Heroku? Would that affect anything?
Thank you for any advice.

Related

Auth0 error after failed login attempt

I am using Auth0 to authenticate users by redirecting them to facebook.
But the problem I am facing is that if a user types in incorrect account credentials the first time and succeeds on the second attempt the redirect does not happen, instead it takes me to "Oops!, something went wrong" page with the following message:
"invalid_request: You probably pressed the back button or there is some issue with cookies, since we couldn't find your session. Try logging in again from the application and if the problem persist contact the administrator."
EDIT: I am using the below Auth0Lock code on the client side.
var lock = new Auth0Lock('<%= auth0.clientId %>', '<%= auth0.domain %>', {
//redirect mode
auth: {
redirectUrl: '<%= auth0.callback %>',
responseType: 'code',
params: {
scope: 'openid' // Learn about scopes: https://auth0.com/docs/scopes
}
},
autoclose: true,
theme: {
logo: 'https://xxxxxx/logo_orange.jpg'
},
languageDictionary: {
title: "test"
}
});
lock.on("unrecoverable_error",function(err) {
console.log(err);
});
lock.on("authorization_error",function(err) {
console.log(err);
});
Once I select Login with facebook I am redirected to facebook url that looks something like link
There if I enter the email/password incorrectly the first time the page refreshes and on the second try if I succeed,instead of taking me back to my app the auth0 generic error page => doc shows up with the error I mentioned at the top.On the server side passport seems to correctly authenticate the user.
PS: Chrome is taking me to a login page which has a login form on top and center but firefox just has login at the center of the page.For chrome if I use the top login form and has a failed login attempt on second successful attempt I am taken to my facebook page i.e no redirect happens.
There's at least one issue and that one is a Facebook problem. Their login page is showing two login forms:
The TOP form has an action equal to:
https://www.facebook.com/login.php?login_attempt=1&lwv=100
while the CENTER one has:
/login.php?login_attempt=1&next=https://www.facebook.com/v2.4/dialog/oauth?redirect_uri=https%3A%2F%2Flogin.eu.auth0.com%2Flogin%2Fcallback&state=[state]&response_type=code&client_id=[client_id]&ret=login&logger_id=1bf0be0d-4b64-43a6-b112-79a30100fa5b&lwv=100
This means that submitting the top form does not maintain enough information to be able to return back to your application. Now, there's still the issue of the Auth0 generic page being shown, but that one I'm unable to reproduce. If you think it's worthwhile, then do upload an HAR for review, even one where you strip all cookies might help.
Update:
Looked at the HAR, the second issue seems to be caused by an authentication request to Facebook that does not pass through Auth0. There's a request to your application, but that one does not complete an then there's this second request that will trigger the Auth0 error page.
Expected flow:
https://test.auth0.com/authorize
https://www.facebook.com/dialog/oauth
https://www.facebook.com/login.php (user authenticates here)
https://www.facebook.com/v2.8/dialog/oauth
https://test.auth0.com/login/callback
https://localhost:8080/callback
What's causing the error generic page, before your localhost request completes another request is issued:
https://www.facebook.com/v2.8/dialog/oauth
https://test.auth0.com/login/callback (generic error page shown here)
The error is caused because https://test.auth0.com/login/callback is called without first going through https://test.auth0.com/authorize to setup the authentication transaction state.
Given the request to your application localhost is marked as incomplete I would start looking in your code to see if there's any reason for that request to not complete.

Google Sign-In with Passportjs not getting authenticated

I'm using Sails with Passport for authentication. I'm using passport-google-oauth(OAuth2Strategy) and passport-facebook for enabling Google Sign-in.
I'm not too well-versed with Passport, so pardon me if this is a rookie question. I've set up login via Facebook and it works just fine. With Google, I do receive an authorization code after allowing access to the app, but the I'm eventually not authenticated. I'm guessing the same code should work for both Facebook and Google since the strategies are both based on oauth2.
I'm not even sure what code to share, since I'm using the auto-generated code from sails-generate-auth, but do let me know if there's anything else I can share.
Any ideas on why this might be happening? The app is locally hosted but that's unlikely to be the problem since I am getting to the authorization stage anyway.
I faced the same problem and it was located here in in api/services/passport.js:
// If the profile object contains a list of emails, grab the first one and
// add it to the user.
if (profile.hasOwnProperty('emails')) {
user.email = profile.emails[0].value;
}
// If the profile object contains a username, add it to the user.
if (profile.hasOwnProperty('username')) {
user.username = profile.username;
}
// If neither an email or a username was available in the profile, we don't
// have a way of identifying the user in the future. Throw an error and let
// whoever's next in the line take care of it.
if (!user.username && !user.email) {
return next(new Error('Neither a username nor email was available'));
}
The Google service was not returning a profile.username property.
Because of it, the user is not saved in the database and cannot be authenticated. Then the passport callback receives an empty user, so the function that handles errors is fired and the user is redirected to the login page.
This change allows to use the displayName property as the username:
// If the profile object contains a list of emails, grab the first one and
// add it to the user.
if (profile.hasOwnProperty('emails')) {
user.email = profile.emails[0].value;
}
// If the profile object contains a username, add it to the user.
if (profile.hasOwnProperty('username')) {
user.username = profile.username;
}
/** Content not generated BEGIN */
// If the username property was empty and the profile object
// contains a property "displayName", add it to the user.
if (!user.username && profile.hasOwnProperty('displayName')) {
console.log(profile); // <= Use it to check the content given by Google about the user
user.username = profile.displayName;
}
/** Content not generated END */
// If neither an email or a username was available in the profile, we don't
// have a way of identifying the user in the future. Throw an error and let
// whoever's next in the line take care of it.
if (!user.username && !user.email) {
return next(new Error('Neither a username nor email was available'));
}
You could also use the profile.id property because profile.displayName is not necessarily unique (ie: two Google accounts can have an identical displayName). But it is also true accross different services: a Twitter account could also have the same username than a Facebook account. If both register on your application, you will have a bug. This is a problem from the code generated by sails-generate-auth and you should adapt it with the behavior that you want.
I will propose a PR if this solution works for you too.
Alright, so this ultimately turned out to be a known issue with the API.
TL;DR: Enable the Google+ API and the Contacts API as mentioned here. (The Contacts API isn't required, as #AlexisN-o pointed out in the comments. My setup worked as desired with Contacts API disabled. This obviously depends on what scope you're using.)
I believe it's not a nice way of failing since this was an API error that was prevented from bubbling up. Anyway, I dug into passport.authenticate to figure out what was going wrong. This eventually calls the authenticate method defined in the package corresponding to the strategy (oauth2 in this case). In here (passport-google-oauth/lib/passport-google-oauth/oauth2.js) I found that the accessToken was indeed being fetched from Google, so things should be working. This indicated that there was a problem with the requests being made to the token urls. So I ventured a little further into passport-oauth2/lib/strategy.js and finally managed to log this error:
{ [InternalOAuthError: failed to fetch user profile]
name: 'InternalOAuthError',
message: 'failed to fetch user profile',
oauthError:
{ statusCode: 403,
data: '{
"error": {
"errors": [{
"domain": "usageLimits",
"reason": "accessNotConfigured",
"message": "Access Not Configured. The API (Google+ API) is not enabled for your project. Please use the Google Developers Console to update your configuration.",
"extendedHelp": "https://console.developers.google.com"
}],
"code": 403,
"message": "Access Not Configured. The API (Google+ API) is not enabled for your project. Please use the Google Developers Console to update your configuration."
}
}'
} }
This was the end of the hunt for me and the first result for the error search led to the correct answer. Weird fix though.

Multiple required auth strategies for hapi.js?

I have a hapi server that saves login credentials to a session cookie using the node module 'hapi-auth-cookie'. I'm using 'bell' to allow certain features to be authenticated with Facebook.
In the handler for the Facebook authentication, how do I access session info from the session cookie while still being able to access information bell provides me from Facebook?
there's an issue within the bell repository with a proposed solution to use server.auth.test(). Like this:
request.server.auth.test('strategy-name', request, (err, credentials) => {
if (err) {
// tested strategy didn't find a user
return reply({ error: 'Cannot find your credentials' })
}
//there is a user :)
return reply({ status: true, user: credentials.name })
})
Hope that helps and gives a direction :)

Thinktecture IdentityServer3 Facebook Login Button Issue

I am using "IdentityServer3 - IdentityManager - MembershipReboot" in my project for User Management, Authentication & Resources Authorization.
I started from below sample and have gone good for creating users, authenticating them via /connect/token api and authorizing resources.
https://github.com/thinktecture/Thinktecture.IdentityServer.v3.Samples/tree/master/source/MembershipReboot
A brief architecture for my solution is
MySql as database. Communication via MembershipReboot.EF to MembershipReboot.
The client project is developed using html + angularjs.
Resources APIs are developed using Nancy & hosted on Owin+Katana in a seperate project.
Authentication Services(IdSvr+IdMgr+MR) are hosted in a seperate project.
Now I want to create a simple button/link clicking on which leads me to facebook login. The functionality of this button should be same as defined in IDSvr default login page's(https://localhost:44333/core/login?signin=4f909a877cc465afd26d72f60ec08f51) "Facebook button".
I have tried googled internet a lot but none of cases are matching my scenario.
I even tried to replicate the request-response behaviour of default IdSvr facebook login but that does not work as cookies are not being saved on end client.
Also i tried to hit "https://localhost:44333/core/signin-facebook" and getting response as HTTP/1.1 500 Internal Server Error from server. So i think might be I am somewhere wrong in setting facebook options in IdSrv project.
So if someone can just provide me a single IdSvr API to connect or tell me how to config Id Svr so that mapping a url can redirect it to facebook login. Or can tell me that where I am wrong in setting facebook authentication options in IdSrv.
A short and simple answer for my question is that I was looking for url.
https://localhost:44333/connect/authorize?client_id=implicitclient&response_type=token&scope=read&redirect_uri=http://localhost:8088/login/auth&nonce=random_nonce&acr_values=idp%3AFacebook&response_mode=form_post
Read further if you want to get better idea about this url
After lots of Hit&Trial & Study efforts, I have got solution for this. Well I think root cause for this problem was that sudden new technical things(Owin, Katana, OAuth, IdentityServer, IdentityManagement, MembershipReboot, Owin Facebook) and a meager time to understand them all.
I would advice folks that whoever is in same situation as me then first get an idea about OAuth. I found below link as a short and good one.
http://tutorials.jenkov.com/oauth2/index.html
After this I learnt that in our scenario we are dealing with two applications and hence two authentication.
For connecting User to Facebook. We created an app on developers.facebook.com
For connecting User to IdentityServer. We created a client in Clients.cs file on AuthenticationServices project.
So now here is the final solution.
localhost:44333 where AuthenticationService is running
locahost:8088 where FrontEnd services are running which iscalling AuthenticationService .
1. Create client app in AuthenticationServices as below
new Client
{
ClientName = "Implicit Clients",
Enabled = true,
ClientId = "implicitclient",
ClientSecrets = new List<ClientSecret>{
new ClientSecret("secret".Sha256())
},
Flow = Flows.Implicit,
RequireConsent = true,
AllowRememberConsent = true,
RedirectUris = new List<string>
{
"http://localhost:8088/login/auth" //This should be redirect url you want to hit after your app(not facebook app) redirects.
},
ScopeRestrictions = new List<string>
{
Constants.StandardScopes.OpenId,
Constants.StandardScopes.Profile,
Constants.StandardScopes.Email,
"read",
"write",
},
//SubjectType = SubjectTypes.Global,
AccessTokenType = AccessTokenType.Jwt,
IdentityTokenLifetime = 360,
AccessTokenLifetime = 360,
},
2 Create Authorize URL as below
var client = new OAuth2Client(new Uri("https://localhost:44333/core/connect/authorize"));
var startUrl = client.CreateAuthorizeUrl(
clientId: "implicitclient",
responseType: "token",
scope: "read",
redirectUri: "http://localhost:8088/login/auth",
nonce: "random_nonce",
responseMode: "form_post",
acrValues: "idp:Facebook");
The facebook app after successful authorization will redirect default to http://localhost:44333/signin-facebook. So no need to do any changes there.
Finally on http://localhost:8088/login/auth you will get access_token(+ few other parameters) after successful authentication. Here onwards you can use this token to access resources from Resources server.

Can a html5 local app have an asp.net session? (local webapp for iPhone)

The context:
I'm actually developing a small web app (C#/MVC2). Users are going to use their iPhones (and probably Android phones in the future) to access it.
At the moment it's quite simple (it just shows some info and reports from our customer's ERP), and I decided to give a try at creating local webapp that the users could add to their iPhones, so that they had an icon for it and, most importantly, most files are locally cached, so that only the relevant data is obtained using json from the server.
The problem:
To authenticate users, a small form asks for username and password, and sends them to the server via ajax, which in turn validates the user and sets the authcookie. If the app is executed in Safari, everything works ok, but if it's executed locally (that is, in Mobile Safari directly from an icon), the server validates correctly the user, but this validation is lost when the next ajax call to recover data is made.
Does this mean that session cookies are not supported by Mobile Safari in webapps? I'm doing it wrong?
And most importantly: What's the best way to authenticate users in a local webapp that access remote data?
I'm not quite sure about what do you mean by local webapp. I assume that it's an HTTP web server running on localhost.
If that's the case, you need some protocol to communicate between http://localhost and http://yourwebsite.com, and that protocol should help localhost authenticate user via yourwebsite.com. I think OAuth might be what you're looking for.
The first time the user access your local webapp, he will be redirected to yourwebsite.com for the authentication. After that, yourwebsite.com will bring him back with an OAuth token. After verifying that token is valid from yourwebsite.com, localhost can serve user on its own.
(I realise I'm very late to this question, but anyway…)
Mobile Safari employs a slightly different web engine to that used in "home-screen apps" (i.e. web pages that you bookmark as self-contained icons on the iOS home screen).
Perhaps the issue you're seeing with cookies comes from that, rather than in Mobile Safari per se? I guess it's easy enough to test: if the app all works OK in Mobile Safari, and not from a home screen icon, there's your answer.
As an alternative take, rather than relying on authentication in the on-line version of the app, another approach that may work for you / your organisation is using the app in an unauthenticated state, but over a VPN for mobile workers? (This will still work OK as an offline web app).
Instead of using a cookie can't you have a ajax call to login that just returns the "authcookie"-value. The value can be saved using localStorage or similar.
http://dev.w3.org/html5/webstorage/
Later when you want to fetch something you can send this value to the server using a custom header (X-authentication or similar) or just append it as a GET-variable to the url.
Your best bet :
http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api
To access a protected resource, the client includes the access token
in the Authorization header of the HTTP request
Login :
var loginData = {
grant_type: 'password',
username: ...,
password: ...
};
$.ajax({
type: 'POST',
url: '/Token',
data: loginData
}).done(function (data) {
// Cache the access token in session storage.
sessionStorage.setItem(tokenKey, data.access_token);
});
Second request:
// If we already have a bearer token, set the Authorization header.
var token = sessionStorage.getItem(tokenKey);
var headers = {};
if (token) {
headers.Authorization = 'Bearer ' + token;
}
$.ajax({
type: 'GET',
url: 'api/values/1',
headers: headers
}).done(function (data) {});
If you don't plan to use Web API, you must generate your own token and put it in every request data