Login with Flask Backend and React Frontend - javascript

I am currently working on a project whose backend I will be writing using Flask (cannot change that), and the frontend will be developed using React by someone else (cannot change that too). I am currently working on the login functionality and I have a few questions. I am really just beginning backend development, so please excuse me if I have some redundant questions or beginner-level questions.
I am curious as to how the login-system as a whole will be handled, not just in terms of actual login - but more so when it comes to restricting access from non-logged in users.
The tutorials and online courses I have taken on Flask have done one of 2 approaches.
The first approach was using Flask-Login to login a user and ensure that they are logged in as they navigate to different websites. This was pretty straightforward to understand and relatively easy to implement. However, (and please correct me if I'm wrong), this would require all the navigation and redirecting to be handled server-side. Therefore, we would not be utilizing React's ability to create single-page websites (instead relying on hyperlinks from each page to the next), which is far from ideal and something that we'd like to avoid if possible.
The second approach was using JWT tokens. Again correct me if I'm wrong, but we would only be able to check that the JWT token is correct if it is included in an HTTP request, which again makes creating single-page websites not feasible. Another issue with JWT is that the tokens expire fairly quickly (around 15 minutes as far as my research tells me), which is not suitable for our project because it would require users to be logged in for a longer duration. I have read about refreshing JWT tokens, but I would like to know more about the feasibility of such a process given the short expiration time (we would have to do a lot of refreshes).
My main question is:
How can we create single-page websites while preventing non-logged in users from accessing restricted pages?
But also please feel free to give me any feedback or concerns about what I have talked about.
Thank you in advance and sorry for the long post

Just use JWT, you can add the token to the header of the HTTP request and you can set the lifetime (JWT_EXPIRATION_DELTA) of the token - check this link https://pythonhosted.org/Flask-JWT

Related

Logic for Handling User Login in Node/Vuejs App

I am building a webapp in Vuejs and I've run into the same issue again.
In short, I'm allowing users to register using their Twitch account (Login with Twitch), and it works great. My question is more about the general architecture of a single-page application in regards to logging in with a third-party service.
My stack is Nodejs, Vuejs for the frontend, and connect-mongo for handling session in my Mongo database.
My questions are a bit more general:
1) once the user logs in with Twitch, I've got an access_token and a refresh_token, along with a profile object. What am I supposed to do with these things? Create a user object in my database with the tokens?
2) connect-mongo is working properly - it's setting up a record in my Mongo db sessions table. Again - am I supposed to do anything with this data or is it purely managing user logins behind the scenes?
3) I'd like to use this logged in state on the frontend (for example, kicking a user back to the login page if they try to access a members-only page) - from the perspective of the frontend, what can I "check" to know if the user is logged in? There are tons of cookies set from the Twitch login, but I have no idea what any of them mean.
4) If their login has expired, how do I force them to login again?
One more piece of information is that I'm not pulling any information about them when they aren't on the site. The Twitch login is purely to get their profile to customize their experience.
I've seen a hundred flow charts of the Oauth login process, but none of them are laid out in layman's terms. At least none that I've found - it seems like dozens of handshakes are occurring but I have no idea what's actually happening in the context of my app after they login. Lots of random strings of characters and tokens flying around, not much in the way of explanation.
Here is my server code currently: https://github.com/gedrick/multitwitch/blob/master/server.js
around line 70 is where I hit the "I copied sample code and now have no idea what's happening" train of thought.
These are some general questions and any and all help to understand how to authenticate and manage user logins is SUPER appreciated. Everything I've tried for weeks has sadly ended in frustration. Thank you for reading!
I hope this isn't considered cheating, but I put together a full demo of Passport signin / authentication. It uses Mongo to store the user and their tokens.
https://github.com/gedrick/vue-node-passport

Use Ruby's authentication on a javascript application?

I have one app on abc.website.com that authenticates users using devise with Ruby on Rails. I have to setup a react app on def.website.com that only works if the user is logged in on abc.website.com (abc uses devise)
We have to add a link in the navbar of abc.website.com that redirects to def.website.com.
Any suggestions on what the best way to do this is?
I'm a total ruby noob but good with javascript.
thanks a lot
appreciate the help
Here is one of a solution : Token Based Authentication.
JWT also is a fine idea.
The rails app can also store a cookie (for example use the rails session cookie) in the clients cookie store. This gets sent to the rails app on every request by the react app and you can verify the identity of the user by reading this cookie.
There are very few adjustments needed for this approach (and they would also be required for JWT - which I don't want to badmouth, it is also a viable and good approach).
An upshot of this is that almost no data needs to be stored at the client. Only an ID that makes it easy for the rails backend to identify the user and achieve all needed informations.
On the other side, if you want to store all the data at client side this is also possible.
I would say there is no clear advantage of rails session over JWT or vice versa. But generally this is how it should be implemented: By giving the client the necessary information which then gets passed over to the backend again.

Incorporate LinkedIn to a webpage

I'm trying to create a webpage that can incorporate LinkedIn info's (profile,people,company, etc...).
The things that it can/would do are the following:
When the user enters a name that is registered in LinkedIn, he gets the following
*Name, Company, Email
*List of LinkedIn messages that are waiting for reply
The same process goes on everytime the user adds a profile, I'm planning to use the Profile API of LinkedIn to get the Name, Company and Email but I can't find a working example to be my basis.
As for the 2nd one I still don't know how to get the LinkedIn messages.
Here's my Layout and expected result.
How can I achieved this? Opinions and Suggestions are highly appreciated tnx
This is far to broad a question for me to invest the necessary time in to figure the answers (multiple) for you, but do let me give you some hints. First of all, from my experience with the linkedin API not all the data you wish to access is available (do double check this though, I used the API quite awhile back and stuff might have changed in the meantime). As this data is not available through the API the only alternative would be to somehow bypass the cross domain policy, which in conclusion would require the user to install a chrome extension/firefox plugin which will function as a proxy for your application or even 'better', make you entire application a browser plugin based web app. Not that I am a fan of those whatsoever but if you application is meant in any way whatsoever as a linkedin (dedicated) plugin (probably as part of a greater service you're developing) then it might make most sense.
The whole system you are describing is very long winded and requires a large amount of development time. Alot of the data is not accessible directly or indirectly too. You cannot get email address's out from the API as a security feature (bots could just harvest emails for marketing campaigns).
First of all, you will need to make an application that allows for oAuth2 connections with the linkedin API service. People will log onto your website, click to join their linkedin account with your website and your website will receive back an access token to do the calls.
You will then need to build the queries which will access the data you require. The linkedin API documentation (http://developer.linkedin.com/) isn't greatly indepth but it gives you a good understand and points you where you need to go. There are also a couple of pre-done php API's around such as https://code.google.com/p/simple-linkedinphp/.
I have worked with many API's from twitters, facebooks and LinkedIn's and they all require a lot of back-end work to make sure that they are secure and get the correct data.
It would take me hours to go through exactly how to do it and has taken me many hours to get a solid implementation in place and working with all the different calls available.
If you have minimal coding knowledge, it would be best to go to an external company with a large amount of resources and knowledge in the field who can do it for you. Otherwise it may take many months to get a working prototype.

How to create basic authentication, login system for a web tool made in node.js and socket.io, without using express

I have a web tool developed, which uses node.js and socket.io. it's a one page website and uses node.js for getting data from social media website and display on the same page. I would like to add a site specific login system for the website but don't want to use 'Express' or 'Passport' as it adds lots of overload to the website while it is not needed.
I am newbie with node.js and would like to know if I need to have a login system made with node.js to maintain session of the logged in user?
Note: I need to maintain session to log user data such as login time, search query and may be heatmap.
Thanks in advance. If needed I can explain specific part of the question in detail.
Using something like Express or Passport (or at least some of connect's middleware) will definitely be easier in the long run (if your app grows), but if you want to go the 'manual' route, here are some starting points:
Cookie Parser: You won't want to send the auth details with every request as a parameter, so you'll want to put the session details in a cookie. You can set cookies manually using headers, or with a node module that wraps the API neatly.
Session Storage: You can put all the "login time, queries and heatmap data" in cookies, but it would be neater to just send a session id in the cookie in each request and save the other data server-side in a database. Options are mongoose, redis, etc.
Since reading the source is very educational, go read connect's cookieParser and cookieSession. It's not a lot of code and the API docs include the actual source, so it's very easy to learn from. Enjoy! :)
From how you are phrasing this question, I believe the overhead from using Express modules (Passport or similar) is the least of your worries ;-)
First you need to figure out which mechanisms you want to use.
For authentication, will you use a username/password combo, or will you be using a third party service like Google, Facebook, Twitter etc ("OAuth" like)? Unless you use some third party service, you also need to handle registration (and possibly verification of email address etc). Even for username/password combos, will you roll your own or use the browser based "basic-auth" mechanisms?
After authenticating you need a session mechanism to store some session token to recognize (and verify server side) that you have been authenticated. They are typically stored in browser cookies, which can easily be persisted for as long as you need, and are verified with each relevant request with tokens in a database on the server side.
And finally, you need a logout mechanism and a "I forgot my password" procedure (which may very well be manual initially...).
If all this is fairly new to you, I suggest trying to use something ready-made first (you mention Passport yourself), and then when you've mastered the basics, feel free to replace it with your own. The "upside" of using Passport or Everyauth is that they cover a lot more options that you realistically will be able to write yourself, so once you've adapted your system to use one of those, adding Facebook logins and similar will be a lot easier (somebody already figured out most of the stuff for your).
To be honest, most of the modules that handle such things in the Node ecosystem are fairly thin wrappers on top of whatever solution you decide to use, so the overhead will most likely not be substantial and you will most likely need a good understanding of the issues anyway to use them. At the other end of the spectrum are ready-made-systems like Drupal etc where everything just works, but then you're somewhat boxed in as far as making your own system.
There are use-cases where rolling your own from scratch is absolutely necessary, but there's nothing stopping your from doing this later when/if necessary (and after you've mastered the basics with the help of code that others wrote).
Best of luck!

Cookie in Javascript(login page design)

Previously I had posted a program and asked about handling cookies in Javascript.
I had posted one code and u can find it in my other question.
Many gave good answers and I aslo tried their solutions. But since I am new to this html and javascript may be I dont know how to find bugs and debug it.
So can anybody please post their solution for this problem.
I want a webpage to be created in which it should check a cookie upon loading. If the cookie is 20 mins older it has to go to login page(ask for usename and password). Otherwise no login is required and it should directly come to one page(it is being designed).
So if anybody is already having a similar or exact code(in which time cookie is maintained) kindly post it.
Regards
Chaithra
It sounds like you're trying to implement a login system using javascript. If this is the case, STOP. All forms of authentication should take place on the server side, and you can use sessions to determine how long it has been since activity from that account. "Cracking" client-side (eg: javascript) security measures is laughably easy.
Short answer - This is a pretty good tutorial...click here...
Better answer - If you're going to create a login system you need to understand cookies, sessions, forms, and security (injection!!!) before you start on anything that is implemented for serious use. You should know to avoid client-side scripting for things like login before you even start. I'd recommend you keep looking at tutorials. You might want to look at things like the difference between different languages and when best to use which.
As nickf said, session timeout is best handled by the server side. The presence of a cookie is used to locate the session, not to implement the timeout. Session cookies are usually what's used to track session state - not the ones that expire. They last as long as the browser is open.
The server side, when processing a request, uses the cookie's value (usually a long random, hard to guess string) to locate the user's session. If the session isn't present, it can respond with a redirect to the login page.
EDIT: In the comments you said you're using goAhead - I'm having difficulty accessing their wiki but assuming it's close to Microsoft's ASP, see this link from webmaster-talk's asp-forum for an example of how to process a login. The part to note on the login page is:
session("UserID") = rs.Fields("usrName")
and the part that checks on each page load the sessions is still good is:
if (session("UserID") = "") then
response.redirect("default.asp")
This is like I outlined in the notes below, driving the timeout detection from the server side and letting the framework (goAhead in your case) do all the cookie magic and timeout on inactivity.

Categories