I am currently trying to design a new web-application for a rest-api service I have running. In basic I am trying to realize the login/logoff system. For authorization-management the API provides three endpoints:
/login, which takes username and password via a POST request and returns a token embedded in a json answer. This token is not a JWT, but its some arbitrary unique string. It is valid for X hours and everytime it used it is reset to be X hours valid again. The validity is check on the server in each request.
/logout, which makes the token invalid on the server.
/validate, which takes a token as json in POST request and checks if it is valid. If not it returns a 401.
Now I realized a login procedure following https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications . The application finally should used the react-router to provide the different pages. My problem is not how to integrate the validation of the token on each page change and if a 401 is returned, switch to the login page again.
PS: The server is written in C++ and accesses a custom database.
As Suggested By You That You Want To Integrate Validation, So You Need To Create A Component Over The Current Route Component.
It would serve as the private Route and as soon as you get a 401 Response From Your Server You Would Redirect To The Login Page By Updating the Token as empty depenedending upon the storage you are using i.e. session storage or localstorage.
This way whenever your token expires the next request responds with 401 and you are logged out.
Further I am Linking An Example Gist For Creating Private Routes And Logging Out
https://gist.github.com/EduVencovsky/f8f6c275f42f7352571c92a59309e31d
Related
I have React signIn form and sessions mechanism implemented in NodeJs. In React I have protected routes only for authenticated users.
How should I check if user is authenticated. I have two ideas:
If user sign in for the fisrt time I can save this information in LocalStorage and then evrytime just check localStorage.
Send request to NodeJS server every time to check if user is authenticated.
Do you have any other ideas? Which solution should I pick?
I tried both options and second one is more UI unfriendly becasue I have to run loading state evrytime I am waiting for auth response. On the other hand, first option has also disadvantege, because I am based on token in LocalStorage which can be malicious.
Every time a request is made to an endpoint that requires authentication, the request should contain proof that they are who they claim to be.
The classic way to do this is by storing some sort of "Session ID" in a cookie or localStorage (client side), that you send along with every request.
Using a "Token" (e.g: JWT) instead of a "Session ID" is another popular way to handle authentication.
Check out this article for more information about both: https://dzone.com/articles/cookies-vs-tokens-the-definitive-guide
To return to your question, I'm not sure what you're worried about in regards to a "malicious Token in localStorage" (Or do you mean localStorage can be malicious?). But for a secure application you have to either:
Store something client-side
Require your user to provide credentials (username + password) for every request
I'm currently developing an App using Microsoft LIVE 2.0 API
Currently, I’m using these URLs as my authentication endpoints:
https://login.microsoftonline.com/common/oauth2/v2.0/authorize
https://login.microsoftonline.com/common/oauth2/v2.0/token
However, when I sent the request to the token endpoint with the redirect URL as
https://blabla.com/accept_token.php?api_ver=wave5&csrf=AY7F6O4hF0n8yW3i2O_y6N-ky7zzfULiYV_fttLK1S3JgaeQz2GTk9FOeIGBBH5CvkfkEYCyPOCQCujcrij4KDy2wAMZyXqx24jvwZRtzOv0s9ADGYl1iFtvYtkmgeFmZEY&appdata=%7B%22use_case%22%3A1%2C%22type%22%3A1%2C%22flow%22%3A2%2C%22domain_id%22%3A12%2C%22tracked_params%22%3A%22%5B%5D%22%7D
I got errors saying the reply address does not match the reply addresses configured for the application
For the application, I set the reply address to be https://blabla.com/accept_token.php.
Is it possible that I add some parameters to the url and still make it match?
I'm pretty sure the reply url you send must match exactly the reply url registered on the application, including any query strings.
If there is variable state informaiton you need passed throughout the authentication process, you should use the state variable.
https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-oauth-code
state
A value included in the request that will also be returned in the token response. It can be a string of any content that you wish. A randomly generated unique value is typically used for preventing cross-site request forgery attacks. The state is also used to encode information about the user's state in the app before the authentication request occurred, such as the page or view they were on.
So this is my structure:
HTML form sends authentication to nodejs.
Authenticate using passportjs > res.send the userid with jwt-simple (json web token).
The received info is saved in $localStorage.user. I use that info in any of the controllers needed and include it and send my post/get requests to nodejs.
I decode the info in nodejs and query the DB.
Is this safe? Is this how it works in real world?
Many thanks.
#Somename:
The workflow which you have mentioned is slightly correct.
The ideal way to get passport authentication done is,
User log's in entering his username and passport.
Send a post request with these form data.
Authenticate the credentials using Passport. Using the passport.authenticate will invoke the serializeUser and get you the valid user if it exists. Else we return a login error response.
A Successful login will automatically create a session in back end, save it in the sessionStorage and adds it with the response.
This cookie will be saved automatically into browser's local storage once the response is fetched at client side.
Every time we send a subsequent API request we need to include this cookie in the req headers.
This cookie should be validated each time in back end. passport.authorize will again make use of the cookie and check if the session is valid.
Logout session once the User logs out.
Hope I've made things clear for you.
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.
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/