Angular token and user login scenario - angularjs

I m building app who uses oauth2.
I me using:
Laravel for backend
Oauth2 for Laravel (lucadegasperi)
Angular for frontend because it will be also and native mobile app:D.
My question is?
What is the workflow for user sign in?
Now i have.
User comes to site and enter username and password
Angular send post for access token and when access token is returned i go for user data. Then I store access_token in localstorage. I m using grant_type=password i forget to mention.
I have 2 hours when token gona expire. In that moment when token expire I go for new token by refresh_token functionality.
My Questions are:
Is this good way/approach?
What is supposed to happen when user close browser?
Now when user close browser and again enter to my app. I will check localstorage and then autheticate user by access_token. If Access Token is expired i will get new one.
What about remeber me option or so called keep me signed in?
Does it mean thant i must set token that will be expired in 365 days (lifetime)?
or create cookie/ localstorage with access token so when user comes newt time i read cookie/loaclastorage and then authorize user?
And finnaly about destroying token. Now my token will be detroyed when i log of from the app.
Thanks

We are building the same kind of service/app using the same components. We use a password flow and I store the token in local storage if the user ticks the "remember me" checkbox on the login form, otherwise I just store the token in an un-persisted variable that gets destroyed when the user refreshes or closes the browser.
See some notes on testing protected endpoints here:Testing OAuth 2.0 protected API endpoints in Laravel

Marijan!
I'm working on simple app containing two separate layers. 1) Rails 5 Json API provider. 2) Separate NodeJS server running Angular 2 application.
Angular 2 app on Login requests access token from google
Angular 2 app retrieves UserInfo from google/people API
Angular 2 app now able to POST json with User's display name and some id from Google Response json.
Angular 2 POSTs json to my Rails 5 API server (partially implemented, but already works with login/pass auth).
So far I have implemented implicit OAuth2 using the code similar to this Gist. Using this code I am able to get User Identification Info which is enough for me to identify the user in API provider or create account for it.
This approach works for me. Hope it will work for you as well.
Note: this approach might be insecure.

Related

Separate User / Admin API?

I'm building a multi tenant app using Angular and Node.js, is it wise to have the same API for both Front End users (Public) and Admin Area users (Tenants)?
The Admin Area will require authentication for viewing and modifying sensitive data but I don't see why the rest of the API can't be left open for the front end which is only querying data?
Is this a good idea? Will it cause problems further down the line?
I'm looking to go for the following application structure:
Front end: tenant-name.domain.com (Open to public)
Admin area: domain.com/admin (with login and token auth)
API: api.domain.com
Would it be a good idea to have the client's front end authenticate with the API?
I would suggest that the admin area API calls require an auth token to be passed on all API calls. You can inject the token into the headers with http request interceptors in Angular. A user who does not already have an auth token should have to log in to get one. The injected auth token should be all the security you need.
I'll suggest you to create a token when an anonymous user requests your API. Reason for that is that you can always identify who requested what.

Google OAuth2 flow and id_token refresh

I am having troubles in implementing OAuth in the right way.
I use a client/API architecture (Angular for front and Node.js for back) and I would like user to sign in using Google OAuth authentication only.
Here is what I think is the right way for the moment (tell me if I misunderstood something) :
Angular open a Google popup asking user's consent.
Once the user agree, Google Authorization server sends back to angular a verification code.
This verification code is forwarded to an API endpoint.
Then, the API asks Google Authorization server to exchange this code for an access_token, an id_token and a refresh_token.
Google sends those 3 tokens.
The API uses access_token to retrieve user from Google API
The API persists the user
Here is the little dillema, in my opinion, the access_token and refresh_token should be stored into the database and the id_token should be sent back to Angular client.
This way, it would allow the API to ask for resource in Google API and if the token expires it can still ask for a new token thanks to the refresh_token.
Client-side, the id_token is embedded in all requests thus allowing the API to identify the client and verify his authentication with Google certs from https://www.googleapis.com/oauth2/v3/certs.
Supposing this is right way to use tokens, how could I deal with id_token expiration since client does not have any refresh token ?
Thanks !
I do it slightly different (I have the same basic architecture though).
Angular decides the user needs to log in and displays a login popup.
The url in the login popup is not serviced by angular, but is instead directly run off of the backend server: /auth/google . (I use hapijs and bell, personally).
/auth/google is serviced by a bell plugin and initiates the OAUTH dance.
the end of the OAUTH dance results in my node server generating a local token (I just generate random bytes and store them in redis mapped to user ids)
because the initial login popup was created by window.open, the success page (generated on the api side rather than in angular) can use window.opener.postMessage to communicate the token back to the angular runtime.
This way, all my sensitive google credentials (the user's oauth token, refresh token if needed, and my application's api ID and secret) are only on the server, except for during the OAUTH dance relay when they're in a URL string during the client redirects. This is reasonably secure.
Then for all the actual user interactions with the api, I use the token I generated in step four to authenticate. This could be a JWT if you wanted, but I don't do it that way; I just use redis to map from 'longrandostring' -> userId. That lets me (for example) force everyone to re-login if I wipe the redis database that has all the tokens stored, or I can write a lua script to delete all the entries that map to a certain userid.
If you need a refresh token, you can set access_type=offline in the initial request to oauth2/auth, and you'll get a refresh token as part of the response, unless you've previously gotten a refresh token. You can then persist it on the server side and get new access tokens as needed. If you set approval_prompt=force as well, you'll force a new consent screen and be guaranteed a refresh token (but after some small number of refresh tokens granted to a user, older ones expire on the same application so it's best to only request them if really needed).

What is the correct way to implement a stateless authentication?

I am new to the Single Page Application. One big question for me is how to make my application secured. I am using React in the front-end and express + mongodb in the back-end.
I old web site, we use session to do the authorization. If session is timeout, we can let the user redirect to the login page. And if a user is keep do some actions on our website, his session will never expired.
But now, I am using JWT to do the authorization. A token may expired in 1 minuet, after that, the user have to login again.
For my understanding, one way is 're-send a token on every request/response, then each request/response will have a new token'. But I think this is not the correct way of how to use JWT.
So my questions are:
What is the correct way to avoid the user login again if he still work on our web app?
Do we need to store the token in the database (mongodb)?
If I store the token in localStorage, everyone can borrow it from the browser and copy the token into their client. How to avoid it?

PassportJS, Angular and jsonwebtokens

I have an Express/Angular app with passportjs-facebook auth and I'm trying to implement a token based system to make calls to my api using jsonwebtokens and avoiding sessions/cookies.
The process that I had in mind goes as follows:
Anonymous user tries to log in with Facebook.
Facebook ID is checked
against the DB retrieving the user if there's a match or creating a
new one if the user doesn't exist.
A token is generated for that
user.
Send token to user
Angular app gets token and stores it on localStorage.
An interceptor on the angular app checks for the user's token as sends it on a header for any subsequent calls.
I'm struggling with steps 4 and 5, I'm not sure how to pass the token and get it on my angular app. Could anyone point me on the right direction to get this working?
You express app can generate the JWT for the app after FB auth.
Take look at this article: https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

AngularJS recover user session - cookies or token

I'm developing an AngularJS app used by third part applications. The third part application and my AngularJS application have a common database where users preferences/credentials are stored. User can login from the third part application and, by redirecting the user into my application, I need to maintain the user logged in, without asking a new authentication procedure.
I can't use cookies because the two applications are in two different domains.
I can't pass a session TOKEN (correspondant to the user logged iin) in query parameters due to man in the middle risks.
Is it possible to make a POST request to an angularJS page? Third part app call my AngularJS login page POSTing a token in the body request. My app take the token, verifyies it and log-in the user.
Constraints:
App in different domains;
Maintain user logged in;
No sharing cookies;
Try to prevent man in the middle;
No query parameters;
HTTPS protocol;
web based applications.
Am I missing something in the https protocols/sharing sessions?
Are there other solutions supported by AngularJS?
How can I redirect the user from one application to another and maintaining the user logged in in a simple way? Is there a simple flow I haven't figured out?
AngularJS is based on REST api communications. I can ask for a webpage (GET the webpage), but I can't make a POST to an AngularJS page. Is there a way to pass/share some values from the first application to my second app in a secure way?

Resources