AWS Cognito Correct User Flow - javascript

I'm trying to migrate my PHP based system to AWS but the biggest thing I'm struggling with is user management/authentication side of things. I've made API Gateways and Lambda functions to get data from my RDS instance and I can use API key or ID token for authentication to protect the data they generate. What I'm really struggling with is the Cognito side of things. In my head, the system would work as follows?
User goes to my website and clicks the login button.
User is redirected to the hosted cognito UI and logs in.
The user is redirected to the chosen page and the id token is displayed in the URL
I use JavaScript to store the ID token in local storage (not sure this is the right way)
I can then pull the ID token out and use it in SDK to run and authenticate my APIs
In PHP I would check the session existed before loading the page to prevent users who aren't logged in accessing my system if the session didn't exist they would be redirected to the login page. How do I do this with Cognito/JWT, do I need to verify the JWT with a Lambda function at the top of every HTML page for my site? I basically want to only allow users who are signed in via Cognito user pool to have access to all the HTML, js, CSS files of my system, except the home page.

It sounds like you have most of the cognito stuff worked out.
If you are calling the api gateway from the web client, you are most likely passing that jwt token in the header and those api calls will fail before the user logs in.
If you are using a client side framework (React, Vue, etc), then you probably have access to a router that renders various UI components. This works analgously to what you do on the server in php, and it's pretty easy to lock down certain routes or the rendering of certain components based on a user being logged in. Doing it without a framework will probably require a significant amount of effort.
You can also stand up a php server, validate the jwt token and do what you normally do for authenticated users.
Or you could take the hyper-modern, serverless approach. You could host your html/css in an S3 bucket and put a Cloudfront distribution in front of that. You could write some Lambda#Edge functions to enforce permissions on the content in the S3 bucket.
Likely, if you are creating an api based javascript application you won't need to protect your markup/css.

Related

How can I require auth to access some components in react?

I'm new to react but i have previously worked on server side rendering websites
My objective is to make a website where at first only a sign-up, login page is shown and if the login was successful the user would be able to access other pages
I'm using and api which provide jwt tokens and jwt refresh tokens for authentication, the main token expires in 1hr and i need to auto generate new token by then in the background without the user knowing
So how should i go about implementing this any example code would be helpful
This site is about helping to solve specific programming issues, noone will write your app for you. The idea is to acquire the token via authentication, persist it in browser (local/session storage), then attach it as auth header to every api request. For refreshing the token implement some setInterval.

Securing API calls without token

I'm building an app and an API endpoint using PHP(I know what you thinking!). My issue is that if I ask user for username and password on opening the app for the first time, since I can't store these details locally because they could be compromised. I'd send these through Post request to server then generate a token depending on whether the user is the right one. After getting response I must store this token locally right?
Yes!. there's expiration for the token. After the token is expired, I don't want to ask user for their name and password but want to access API still authenticating as that user. How will I do this?
If I use Oauth it's still the same procedure right? I should store something locally. won't that be compromised? I'm very confused.
How does other apps work. I'm sure they doing something in the background. They ask us for credentials only once and all subsequent API calls will be secured. Won't the token expire in that case or what?
Can i secure API calls without storing anything locally? I don't want API to be accessed from anywhere else but app.
Use android SharedPreferences. It should be very secure unless you deliberately expose it e.g. its accessible via an exported content provider missing the (android:exported="false") in the manifest. You can also use sqlite but there is no point of using a db table for one or two rows of data.You can also encrypt the user name and password to add one more security layer to protect rooted users.
Furthermore to protect the data in the network you should use ssl in the backend so no one can sniff the credentials.

How to authenticate user in browser using AWS Cognito?

I need to authenticate users in browser (not mobile app) using AWS Cognito with username/pass, not FB/google IdProviders.
There are a lot of docs but they seem to be separate blocks which either incomplete, do not fit the requirements or do not fit each others :(
I created Cognito User Pool, then Identity pool and tied the userPool to the idPool, then I stuck. Do not know which library to use and how to use it.
The closest I find are:
https://aws.amazon.com/sdk-for-browser/ but my experience is not enough to convert their FB samples to not-using FB
https://github.com/aws/aws-amplify but using this lib I'll have to study React/Angular from the very beginning (I'm not a front-end developer, sorry) and I have no clue how to convert their npm-based samples to front-end javascript (npm is for NodeJS thus back-end, isn't it?).
All I need is plain html form with username/pass, send the request to Cognito and a way to check during the next page load whether the password was correct. If it matters I will use AWS Lambda as back-end for processing future tasks.
How can I do it? Is there a tutorial/doc for my case?
Thank you.
You can use AWS Cognito UserPools Hosted UI for your use case. The simplest form of authentication is using the Implicit Grant.
For more information about setting up Hosted UI refer Add an App to Enable the Hosted Web UI.. This will create a UserPool where users can register them self (If you plan to restrict this, you will need to either add users using the AWS Web Console, Cognito UserPools or using their SDK)
The steps are as follows.
Set up Cognito Hosted UI and register your application domain. This will create the login/registration pages for you where each of this will have a unique URL. What you have to do is, if the user is not authenticated (Let's discuss how to detect it later), you need to redirect the user to the Login page.
In the Login URL, you also need to specify the redirect back URL to the application so that after a successful login, Cognito will redirect back the user to the application providing the token in a query string.
You can then access the id_token from inside the application and use it for querying the backend.
Since the id_token is a JWT token you can verify it at your Backend using the public key available at the Cognito token endpoint.
To implement the JWT verification, you can also refer Cognito JWT Token validator NodeJS module.
Note: If you need to keep the user's logged in for a longer time period (Than 1 hr), you might need to use the Code Grant flow which will return a Refresh Token, which could be used to retrieve new id_tokens programmatically.

How do I pass a token when calling a website

I've been reading up on token based authentication for a project that's part of my trainee-ship. My task is to implement some sort of user authentication and we've settled on token based authentication.
Now I get the basic principles, like passing the token in the xhr header for xhr requests. But I do not understand how you would pass the token on an initial page call.
Let's say we're working on a single page application with a navigation bar that has a login button for users that are not currently logged in, and a profile button for users that are logged in.
Seeing as that navigation bar is delivered on the initial call of the website, how do I know how to serve the right button to the user? From what I can gather I can pretty much only authenticate on xhr.
Do I have a misunderstanding about token based authentication?
A little clarification:
Assume a User already is logged in and has received a token from the Server.
He then closes the Tab and later goes to my app again.
At this point, server-side I do not know the user, as I could not have sent the token at the initial request.
A coworker suggested using AngularJS' onload to send the token after the initial page load to verify and get my JSON data from the server, which is then used to create the app with Angular
Also the point of the project is to not use an existing library like JWT, so I can actually grasp the concept and the inner workings of such mechanisms.

Using Dropbox API with Node.js

Im working on an web application using the MEAN Framework, within that app I want to give the users the ability to upload files.
Now heres the main thing:
All users uploaded files should be uploaded to a SINGLE dropbox account (my account)
They will only upload files of with the max size of 20MB (I've already built the functionality to check the file size before upload)
What I've done:
Ive gone to a Dropbox developers and I have setup my app. And now I have access to my appKey, appSecret and also a Access Token
My questions:
Is it possible for me to connect a single dropbox account (my
account) to my app and give users in my app access to upload/download files from the dropbox but by using my apps interface?
As I already have the access token would I or every user in my app still need to go through
the OAUTH process?
Can I just send my Access Token with each request to Dropbox api every
time a user uploads a file through a specific form on my app?
If you can provide an example or a link that would be very helpful.
UPDATE:
I generated my token using the following button on the dropbox developers console:
Assumption: it is supposed the user of your apps are "legit" and that they won't do anything of your dropbox files that should concern you.
Yes, it is. You can configure your app to be the consumer of your dropbox; of course, your app will also have to make sure the users of the app are legit (check them with user/password login and so on) --note: consequences can be that any unauthorised person able to use your app can delete permanently all your files (or do anything as bad as possible according to the privileges)
The access token is part of OAuth, so I am not sure what you mean when you say "process". I will interprete your question as "how do I refresh my token?". Simply, before every call to dropbox API by your app, you check the expiration of your access token: if it is still valid you just perform the call, otherwise you request a new token. You do not need a Refresh token in this case: the OAuth mechanism (or 'grant flow' as per OAuth jargon, or 'process' to use your word) you are using is called "client credentials grant flow"
See above 2)
Some links for you: Here some overview of the grant flows.
Here a schema of that grant flow (note: MS uses another component called "ActiveDirectory" to grant permission; in your case, both "Azure AD" and "Resource API" are just "the dropbox server")

Categories