I am building a web application, in which I use Vue 2 (2.6.11) and AWS Cognito for authentication. It all works fine (log in/out, display username, groupuser etc). I used this tutorial for it: https://sanaulla.info/2019/04/20/integrating-amazon-cognito-with-single-page-application-vue-js/
Now. My question is, how could I restrict the access to each Vue component based on my cognito usergroup?
Let's say I have two cognito usergroup: admingrp and usergrp, and inside my App.vue two components: admin.vue and normal.vue (there can be more in future). The admingrp users should be able to access both admin.vue and normal.vue, while the usergrp users can only access to normal.vue.
How could I reach this?
The general answer to your question is that you need to test the groups in the JWT before allowing a user to access restricted parts of your site.
One easy way to do this is to use the Amplify UI Authenticator component for the login flow. If your entire application is wrapped in this component, then every page will require login, and your application code will be able to rely on the user object that the component provides. This should contain the groups returned in the JWT, so you'll be able to test those to disallow access for non-admins on whichever pages you want.
This blog post describes a clean pattern you can use for this, although it may be a bit more involved than you need.
Related
On my website, I have two portals for login. Portal A is login for learners. Portal B is login for teachers.
Both learners' and teachers' accounts are located in the same Firebase project, in another words, both types of accounts are located in the same authentication space. Both portals use the same simple login code:
firebase.auth().signInWithEmailAndPassword(user_email, user_password).catch(function(error) {})
Currently, the learners can login at both portals, and same for the teachers. What I am trying to do is to prevent the teachers to login at the learners' portal and vice versa. I am not sure how to implement this. I have made a setCustomUserClaim to give an identity to the two types of accounts on the authentication token. But I can only grab the auth token once the user is logged in, not before I think. Also, I have a Firestore collection that stores all the info of the users including their identity. But each user's document is named with their corresponding UID. The latter can be grabbed once they login in as well. Any idea on how to implement this?
Firebase Authentication has no built-in way to distinguish between these two types of users. It simply authenticates the credentials that a user enters, and ensure that they're correct. If certain users can only access a certain application or certain data, this is information that will have to come from you.
The above is important to realize, so I'll repeat it: Firebase Authentication allows all users to authenticate as long as they provide the right credentials. It has no way to block access to authentication based on application-specific information, such as your user-type. This type of authorization logic is part of your application, both in code and (if you use a Firebase Database) of your server-side security rules.
A common way to implement your scenario is to add the information about the types of users to a database (such as Firebase's Realtime Database, or Cloud Firestore). In this data you could for example store the email addresses of all teachers.
Now with this information, your code can then determine whether the person who signed in to the site is a teacher or not. If they're a teacher signing in to the student web site, you can redirect them, and vice versa.
Is it possible to use the salesforce APIs in a JS application to authenticate users of multiple, unknown organizations that I do not control or have access to and import their account names?
I want users of my application, all of which belong to different companies, to be able to import their salesforce contacts into my application. All of the tutorials I have come across seem to focus on creating applications for organizations that the developer has access to via "connected apps". I assume that creating a connected app will only allow access to that specific organization and that if someone from a different organization tried to authenticate and access their data it would fail? Pointers to the product I should be using to accomplish this are much appreciated!
You have the right idea, to get data from a salesforce org, you are going to need the user with the Salesforce account to authorize your application to access the data. The connected app is basically just a way for you to get the auth code that you need to access that data.
It is possible to define the connected app in one org, and have it be used by multiple different salesforce orgs. The data that one auth code provides access to is limited based on the data available to the user that grants access.
I am relatively new to web-developing as well as using React.js and wanted to double-check on some security concerns:
Authentication
Assuming part of my app should not be accessible for unauthenticated users and I implement this by calling for example AWS Cognito and a conditional render:
{Auth ? <userPanel/> : <smthElse/>}
Is there any scope for client-side manipulation i.e, is there a way to access the userPanel component despite being rejected by Cognito?
Authorisation
Furthermore, if I have different user groups (user, admin etc), what would be a safe way to restrict different parts of the App? Some options i have come up with so far:
Same as above, with directly calling the Cognito API and a conditional render
Maybe there is way to make the Redux state temper-proof and to use it in combination with private react-router-dom routes
Use private routes in combination with direct calls to the Cognito API
Thanks
Client-side authentication/authorisation is impossible and should be avoided.
The front-end should not be bundled with any sensitive data.
Secure your API endpoints instead, so that even if users edit the source to render the component/page, they will not see any sensitive data rendered unless they are authorised.
Nothing on client side is tamper proof. I think your solution is fine as long as you're performing a back-end validation as well, before rendering the page.
If you're really concerned that this might be changed from the client side, I would suggest setting up an entirely different route for authenticated vs non-authenticated users
I want to be able to sign into multiple accounts at the same time (think of how gmail lets you swap between signed in accounts). Is this possible/supported using Cognito? (I only need to be able to use one at a time)
Further, is there a way that I can give the user a challenge when swapping to another account such as a pin code (dumbing down my use case here).
This whole managed user accounts thing is very different to more traditional apps given that the authentication is no longer done on my server side... except for the challenge. Is it possible to mix the server/non-server based cognito authentication like this?
I'm going serverless with lambda and typescript.
Some guidance on how I could achieve this would be much appreciated
Suppose you have 2 applications and if both of them are authenticated using the same userpool, then I don't see an issue in this. All you need to do is store the access id post authentication in the Application 1 and look its validity before allowing the same user to use Application 2, which in turn is using the same userpool.
I believe that you can achieve the challenge usecase by customizing the userpool workflow using the pre-authentication lambda.
Customizing User Pool Using Lambdas
I currently have a React-Redux Application.
I want to create an admin user in React-Redux.
If I create a state with userAdmin true or false will users be able to access the state and change this value? That is to say, is this a secure method of creating such access?
I am using webpack to create a bundle.js, and have a node.js server for serving data that is secured using JWTs.
Furthermore, is there a standard or semi-standard pattern for creating an admin user in a react-redux application?
My thoughts on this are:
Create a separate app for admin user management.
Create a state for the admin user and if that state is true then query the serverAPI for any admin action. But show the admin capability only if that state is true eg. delete other users, view details of users, but do not serve that data without an authorised API call. Then if the state is changed surreptitiously the user can only see the actions but is not able to access the API without the required authorisation.
tldr: your thoughts are correct
You are right in the assumption that the user could manipulate the state of the client side app to escalate her privileges. However, that shouldn't give any useful benefits if your architecture is done right.
Data that only admins should have access to shouldn't be transmitted to a regular user in the first place and changes that only admins should be able to do should only be accepted with JWTs that identify admin users.
Right management is something that has to happen server side. The client app just reflects that in the UI.