SPA ReactJS social registration with HelloJS and PassportJS - node.js

I'm facing a problem related to oauth authentication using NodeJS. The main concern is how to connect all to my current architecture. Lets me explain it a little bit.
I have a Cloud API which is a REST API to serve and manage the data. I also have the web client developed in ReactJS (an SPA). My main goal is to allow social authentication without redirect or without to leave the page. For this, I'm using HelloJS and the oauth proxy in the same Cloud API.
Taking for example my Facebook App, the workflow is like:
The user clicks signup with Facebook
The oauth proxy serve as "handshake".
Facebook sends back the token to the web app.
At this point, this approach is working perfectly for me. My main concern is how do I send the token to the Cloud API for registration?, obviously I could add a middleware in the Cloud API to automatically register the user in the database, however I still need to invoke the authentication from the web client in order to exchange that token for a JWT token.
Yes, I'm using JWT for communication with the REST API. I would like to allow local registration and social registration (Facebook, Twitter, and so forth).
It seems odd to me to trust in the token received from the web app without ensure that it is real and not expired. I thought to check it with passportjs.
Advices or recomendations?
Thanks.

Related

How do you implement a custom login UI when using PKCE in auth0?

I am setting up a login system in auth0 for a React Typescript application. Due to how the application works I am using the PKCE flow for authentication and authorization to get access tokens and refresh tokens. So far I have implemented the flow by adding a node js express server that fetches the access token and refresh token from auth0 once we have the authroization code after logging in through the /authroize endpoint on auth0. However the problem we have now is that we cant implement our custom UI onto the login page since when we hit the /authorize endpoint we are sent to the login page hosted at auth0. We would want to set up our own login form and send over the details to auth0 in order to fetch the authorization code. Is there a way to login through our own login page instead of using the one hosted by auth0, by for example hitting the right endpoint in their api to fetch an authorization code? The only other option I have seen is by changing the HTML under branding in the application dashboard but I have also read that auth0 does not recommend doing this.
I have also previously used the auth0 js SDK and there I was able to use our own custom page for login, however that SDK uses the implicit flow which does not issue refresh tokens and cannot therefore be used. In the other SPA sdk, you cant add your own UI for login since that redirects you to auth0 as well.
Assuming that you still use the Node.js server in addition to the SPA, you can ask the user for username and password, send it the Node.js server. Using the Resource Owner Password flow, the Node.js server can then request the access, refresh and ID tokens.
Please study the security implications carefully, in particular related to this authentication flow.
By implementing custom login UIs, you lose many things: hardened security of Auth0 servers, easy configuration of authentication methods without changing the application, use of ready-made Auth0 SDKs etc. I would carefully consider if it is worth it.

Is there a way to use CSRF protection and JWT in a sails app together but not at the same time?

I'm working on an application using sails. web and mobile.
I want to use CSRF protection that sails provides when the app is visiting on the web. And if a request is send by the mobile app. send with the payload a jwt.
On the sails' documentation I found a property csrf.routesDisabled that disabled the CSRF for some routes. But that is not what I want. I'm trying to find a way to for example, check if the parameter jwt is send in the post request. And if the parameter was send then check and validate it. else, check for _csrf value of the form. Is this possible?
or the csrf protecction works before any information is send to the server?
my better choose is use jwt in the web app too?
any other good idea for solving this problem is welcome
thanks
Sounds like you've built the web app with SailsJS and you're trying to reuse the controller actions as REST endpoints for external applications.
Really what you should do, is decouple the data access from the front-end. Have an isolated REST API - using token authentication - which is used by both a web front-end (and any other applications).
For example, I'm currently working with a SailsJS REST API, used by an EmberJS front-end and an iOS app. Both front ends login using user credentials, in order to receive an authentication token. This token is then used for any future requests. A policy locks down all but the login authentication endpoint, to validate the token

Secure Web API action without authentication

In asp.net web api, when you want to secure a action or REST endpoint, you use authentication, like token-based solutions. But, what if there is mobile app client for the api, and this have a sign up form, so I want only this mobile app could send Sign-Up request to my API, and prevent other fake clients (like POST-Man or a-alike) to send request to sign-up api?
Best
this is exactly the scenario covered by token based systems.
Your mobile app simply becomes a client with its own identifying data, then the API does its thing and only accepts requests from authenticated applications. This is exactly the kind of scenario you can cover with your own OAuth2 system.
Have a look at this article : https://eidand.com/2015/03/28/authorization-system-with-owin-web-api-json-web-tokens/
It will guarantee that only your mobile app can access that API.
Is this what you are after?

Social auth from mobile client connected to Node.js API

I have a Node.js server using PassportJS that uses social login via Google, Facebook, and Twitter.
The Node.js server hosts an API that uses the PassportJS middleware to authenticate routes and securely serve the data. The API exists to serve an iOS application which will be where the user "logs in" through Google, Facebook, Twitter and will subsequently create their account on my service.
How can I accomplish this when the mobile SDKs for the respective companies are for a direct communication between my client and their server? I essentially want a way for my client which talks to my server which talks to their server. Please let me know if the overall idea is incorrect as well.
I believe the right way to do it is to integrate the mobile app with social login, not your website.
Depending what technology you use in your app, you can find libraries to make it easier for you. On your app, it would be a native pop-up, or a simple app-redirect to Facebook app, or Google app or whatever to get the permissions and then a app-redirect back to your app.
You probably dont want a browser to pop out and redirect the user to facebook. A lot of users just use facebook app on their smartphones and they are not even logged-in facebook website in their smartphone's browser.
Once you get the permission and get the user's information, you can securely send those data to your server and store them for future use. You can associate those information with device ID, or generate a token and sent it back to the user's device and store it there for future authentications.

User authentication through my REST API and Facebook

I'm a bit confused about how to properly and securely authenticate users using my REST API and provide and option to authenticate using other OAuth 2.0 providers as well (e.g. Facebook, Google, etc.).
Scenario
Users interact with a web application which should consume my REST API. Users should be able to login and perform CRUD operations both using username/password and by using 3rd party services such as Facebook. I will be using SSL to encrypt the traffic to the website and the API.
Without taking the 3rd party login services in consideration and by studying the various questions already asked here on SO, I thought about handling user authentication as in the picture.
Technologies and current idea
The REST API is written using JS using NodeJS and Express. The WebApp provided through another NodeJS instance is mostly AngularJS with templates which consumes the REST API.
My current idea is to let the WebApp handle the login sequence and let Facebook save their token in my DB using the callback. But this solution smells too much of workaround!
Questions
Is the authentication sequence depicted in the image correct?
How is the above authentication sequence compared to the Resource Owner Password Credential flow in OAuth2.0? Is it worth using OAuth2.0 instead of it?
How can I integrate login through 3rd parties (i.e. Facebook)? Any suggestion or (better) example?
References
passport.js RESTful auth
Login with facebook and using oauth 2.0 for authentication of REST api calls
And many others here on SO :)
My 2 cents..
The process looks good to me.. I would re-issue the token on each sign in and also keep it inside a database so tokens can be revoked easily.
Use PassportJS. Its got support for OAuth flows and supports many 3rd party integrations like FB, Twitter, Github etc..and since its a nodejs middleware.. its integration will be very tight within your application..

Resources