Maintain user session in same browser in react - reactjs

I am working on a web app that follows dual user-role type: Admin and Investors. I need to disable two users (be it admin type or investor type) to log in simultaneously on a website, which is opened within the same browser but different tabs.
Irrespective of their role type, at a time, either user A(admin) or user B (Investor) can log in. I am using localStorage for this purpose, storing two different key names for admin and investor.
I am new to handling sessions this way. Also, my code is quite big and nested, so I am unable to paste the snippet out of it here.
Any help even regarding how I can follow this approach, will be appreciable.

There are different approaches for handling sessions in client side of your web app, such as cookies and local storage.
In your case I think you should store your app user type and session ID in local storage like this:
s_id: admin_54759eb3c090d83494e2d80494e2d80
So before login app will check for s_id availability in local storage or not. Then in your app login flow you can decide to logout previous user and replace new session ID or just prevent from new login.
But I'd rather to use cookies. One benefit could be setting expiration time for session. For more info check out here.

Related

How to communicate securely to an Database with electron?

I am creating an electron application that connects to an Database and do POST and GET requests to retrieve and insert data into it, the problem is that in the code i have defined my database uri ( im using mongodb)
const uri = "mongodb+srv://<myusesrname>:<mypassword>#cluster0.wqbiu.mongodb.net/query?retryWrites=true&w=majority"
like in the example above, but if i pack my electron app the connection to the database as well as the credentials its visible if someone unpacks the app.asar file and look in the server.js file how i can solve this problem? i dont want any security breaches neither for me or the people that will be using my application, thanks in advance for any answer :)
An application that requires a secure connection to something cannot afford to have any username's or password's hardcoded into its code.
Instead, a procedure of authentication and authorisation is utilised.
Authentication is used to verify the user. IE: They are who they say they are, often achieved via the use of some type of login form.
Authorisation is used to verify the logged-in user is allowed to access the requested resource. EG: Is this user allowed to retrieve a list of all users email addresses from the database.
As a rough guide, a user will login with their username and password. You could use OpenID as well here if you wanted. Once the user is 'logged-in' you could set a cookie or session and save the session id in the DB against the user. Of course, all of this is done over HTTPS.
There are various ways to control the validity of the session such as but not limited to refreshing the expiration date / time every time the user hits the server, auto timeout if the user has not interacted with the server for more than X minutes, etc.
In your app, the user could try and interact with the database at any time, but if the user is not logged in, the server could return the appropriate response and prompt the user to login. Some form of API here is really the way to go.
If the user is logged in then then next step is to authorise the users request, ensuring they are allowed to perform what they are asking before sending a response back. If they are not authorised to access the resource (EG: Edit another user’s post) then an appropriate response is returned indicating so.
As you can see, securing your app will take some work but the result of not doing so could be devastating to you and your users.

What's the recommended approach to setup a Stream activity feed using Firebase and anonymous users?

I'd like to show a global activity feed and the counts of reactions to website visitors (without a user account). My app is using Firebase and React.
What I'd like to have:
Show a global feed (I'll do this by adding the activities with the "to:" field in each activity) and show it on the start page (no user accounts created so far, read-only)
Show the counts of likes for each activity (read-only)
As soon as someone clicks on the follow or like button, I'll require the user to sign in and create an account. The process after this step is straightforward to me. I'll use a Firebase function to create the auth token and use the client side React components to display the feeds and reactions.
I did not find a solution to show the global feed and the count of reactions to visitors who does not have a user auth token.
Some workarounds in my mind:
One approach would be to create an anonymous Firebase user and the Stream auth token for each website visitor. As soon as the user does an interaction I'd require him to create his account and upgrade the user's account using the Firebase migration process. This is pretty safe from a security perspective, but I would have a lot of anonymous users in the backend.
Another approach would be to create a global user and use the auth token to show the feed and likes. As soon as someone does an interaction I would require the user to login. Since no read-only Stream user accounts are available for the activity feed product, this might result in a security issue.
Do you have another solution in mind?
I've found a way to create read-only tokens for the client using the JWTScopeToken helper function. (Feed wide read-only tokens)
const streamSigner = require('getstream/lib/signing')
const apiSecret = '###APISECRET###'
const clientToken = streamSigner.JWTScopeToken(apiSecret, 'feed', 'read', {'feedId': '*', userId: "global"})
console.log("read-only client token for all feeds", clientToken)
Using this token a can show user and global feeds to new visitors. I do not have to create an anonymous user anymore.

How to have a safe admin handling with reactjs and firebase

I would like to add functionalities depending on whether or not the user logged in is the administrator but I don't really know which condition (for conditional rendering with delete buttons etc) I should use to check if the user is the admin or not. Is it safe to do it based on the id of the user ? In the first place, I thought about testing the user in every component I want him to have functionalities, with a state called "user" using recoiljs to get access to the user in the whole app but I'm afraid people could change the state with the react tool extension and then pretend they are the admin and so delete articles and stuff... What's the best way to test if a user is the admin or not using firebase authentification in a react project ?
It's never safe for client code to assume admin responsibilities without absolute enforcement from your backend. It's unsafe because client code can be compromised and might not work the way you expect. And it's running on a device that the user controls fully.
Client code can check some indicator to see if the user is admin (in whatever way you find suitable), but the final check needs to happen on your backend, either through security rules (if you're using Firebase products like Realtime Database, Firestore, or Cloud Storage), or in code running on a secure backend, including products like Cloud Functions.

Google App Engine Login vs Application Login

I have an application deployed on GAE. It allows users to register for an account, and I use the google user id as the primary key to link to their account.
I have a registration link that should be visible if either the user has not been authenticated by google and/or they do not have an account on my site.
What I am trying to figure out is what is the best way to figure out if the user has an account on my site as they go from page to page. I have an authentication filter that is triggered on every page, and the filter looks at their google id (if they are logged in), goes off and determines if the user has an account on my site, and sets a request parameter, that I use in the jsp to determine whether or not to show the registration link.
It seems wasteful to do that every time, so I refactored it and had the authentication filter store the Key object tied to their user account on my site in a Session. If the key attribute is not null, I take that to mean that the user is registered on my site.
Does that seem logical, or are there better approaches? The complexity to me comes from the fact that the user may be logged in with google, but that doesn't necessarily mean they have an account on my site.
My question
When it comes to storing authentication data, you have two options :
Store the data in session
Store the data on client side, in a cookie typically
Storing the data in session is a perfectly valid mechanism, and that's actually the most common.
However, managing a session is costly (you need to store it). In App Engine's case the sessions are stored in the Datastore, with probably some caching. So it's still a call to the datastore.
That should be totally acceptable, however if it turns out managing a session really decreases you app's performance, you can always store the data in an encrypted cookie. That way the information is provided by the browser every time it sends an HTTP request. Note that it means you must get encryption right and that HTTP requests will be slightly bigger (the size of the encrypted data).
So in the end it's a tradeoff. I would recommend sticking to sessions unless you experience performance issues. The advantage of sessions (compared to your fist approach) is that if you ever want to store additional data, you will have less code to add.

cakephp auth session regeneration

We are using Cakephp framework version 2.0.6
The site is "supposed" to allow an anonymous user to "add to cart."
We are using the session id (using cake's native session class) to store the anonymous user's information in a db table.
When the user goes to checkout, then we want to ask "are you a current member? If so, click yes to login or no to create an account."
ISSUE:
Regardless of what they choose, the user either then has to login, or create a new user/pass (and then login) which is causing cakephp to regenerate a session ID. This is making it impossible in the new session to grab what that user added to the cart when they were anonymous just 5 minutes prior. In other words, the anonymous user's session id changes between when they are anonymous and after they login/create-user, making it impossible to identify their cart post-login.
Is there a way to prevent cakephp from regenerating a session in this scenario, or a better way to accomplish what we are trying to do while still keeping our order flow (ie: anonymous being allow to add to cart, before login/create)?
It is this reason that shopping carts are more often than not stored in Cookies. That way you can easily retrieve the saved information post-authentication.
If you insist on using Sessions to store this data, consider setting your Security.level setting to 'low'. That should prevent CakePHP from regenerating the session ID.

Resources