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
Related
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
I'm completely new to web development and have never implemented anything that needs some kind of authentication before - basically, where the user can sign up, log in and log out.
I've stumbled across Hasura, a GraphQL server over Postgres and deployed it to Heroku. After creating some tables and populating them with data, I created a small Vue application that can query and mutate this data using vue-apollo, and this seems to work fine.
Now I want to restrict the use of the application, unless a user is logged in. I've read through the authentication / access control section of their documentation, but I don't really get how I can accomplish this... All the examples are seemingly created with React. They talk about having (not) logged in users, but I don't even get how to create one, or what a "logged in" user means in context. Furthermore it mostly mentions JWT and webhooks and I've never used them either... In my mind it should be pretty simple, but it seems overly complicated (it's probably just me being dumb).
All I want is a simple sign up form where a user can enter a username and password, and then use this username and password to log in in the future. How can I do this, and are there any examples of this with Vue and vue-apollo?
I have developed several web applications with the own login forms/logic etc. I would like to simplify these by creating a single dedicated web app to handle all the login logic using FirebaseUI. The way I imagine this working is when the user needs to login with one of my apps they are redirected to my login web app. The user supplies their credentials and if successful the login app redirects back to the original app with data to confirm whether the login was successful.
If this is possible I shouldn't have to repeat the login logic in my other web applications and any changes to login code are only required in my login app. I'm not sure if such an approach is possible, however, or how I could securely and safely let each web app determine that the user has successfully logged in. Can anyone offer advice on how to implement this or point to examples where this has been done already?
You might be looking for single sign-on.
Google does something similar. Every time you login you're redirected to accounts.google.com, and after that you're redirected to your app.
You're right in saying that it's trickier than it appears on first sight though. Most web login systems are based around cookies and the whole client-server process around them. Cookies are set per domain. If all your webapps are on the same domain or subdomains of a single domain, you should be OK to go with this approach and get the results you want. If not, you're going to need some extra work to get code from different domains to speak with each other and make everything possible.
In general, if designing a login system from scratch is considered a big endevour, designing a single sign-on system is an order of magnitude harder. OWASP had this to say about them in 2011.
I want to send notification mails to users of my community platform coded with react and firebase. I was wondering is there is a way to authenticate the user via a magic link which is contained in his or her personal notification mails.
E.g. You've got 5 new comments on your post click HERE to read them
Clicking "here" should redirect the user to the page and automatically authenticate him without having to enter their individual passwords or usernames.
Due to the cancelation of the privacy shield framework and Schrems II, you might no longer be able to store customer details in the GCP.
A solution for it can be pseudonymization.
I am running an open-source project that can help you with that.
Check out the following article for more information:
https://databunker.org/use-case/schrems-ii-compliance/
I think your question can be divided into 2 different questions.
1. How do I send notification mails to my community platform?
I have never used notification mails in Firebase, I usually use google's SMTP server directly and send a request to the server to send an email on behalf of me. So, in your case, I would search up the library on your tech stack (for me it was Go's gomail), then you can use Google's SMTP server (host:smtp.gmail.com, port:587).
2. How do I make a link that automatically authenticate your users whenever they click the link?
I feel like this is the harder question. I think you need to consider a few things:
Your links need to be short lived. Why? to prevent unauthorized brute force login attempt (this also depends on the structure of your link). However, best practices suggests that links should be short lived (less than 24 hours).
Given that links are short lived, this depends on whether the user checked their email frequently for notification from you! There's a pretty good chance that they will miss that email in the 24 hour window.
I'm pretty much against sending time sensitive notification like that through emails. But if it is something that you still want to do, it is pretty easy to create the link, the simplest way I did it was:
Generate a random uuid for a link.
Associate it to the user who will login with the link. You should save this association in a persistent data storage.
Create an endpoint for magic link, for example /magic/:link_id that takes link_id then checks what user should be logged in.
Voila! You got yourself a magic link!
Finally, you can send the link through email like the first part of the problem!
I'm incorporating Google Sign-In for my website and the basic setup is working fine, however I face a problem to manage the user's login status.
I came across the below SO question, which suggested to use sessionStorage/localStorage to carry the login status across pages of a website, and when user signs out the stored info should be cleared.
https://stackoverflow.com/a/40206395/5345604
I afraid I don't entirely understand the suggested implementation though. What if user signs out from his Google account somewhere else, say from Gmail or from Google Maps? In this case when the user revisits my website, how can I detect that he is no longer signed in with Google and remove the stored client side session? Or this is not the way it is supposed to work?
And on top of the above question, I'm also thinking about the authentication with my backend (PHP). Given the ID token, shall I be sending it across to my server and authenticate it with the Google API Client Library every time? Or shall I only authenticate the user once and store a flag of indication in $_SESSION, and then destroy the session when the user signs out? (Given that the token is in fact a JWT, I suppose the implementation is meant to be stateless and requires the token to be passed to the server every time? Are there any concerns to implement it with the traditional approach of a server side session?)
I can only answer your first question: The login of your website is completely separate from the login status of other Google services. Even YouTube is separate from google.com.