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.
Related
Per https://developers.google.com/identity/sign-in/web/server-side-flow in order to get a refresh token, the client must grant offline access. However, I see no way to do that using the new API. What's the proper way to get a refreshed token using the Google button, so the user doesn't need to re-login every hour?
Authentication for sign-in has been separated from authorization for data access in he new API.
In the new API authentication does not require or use access or refresh tokens, instead a signed JWT ID token credential containing the user profile is shared after user consent. This greatly simplifies the level of effort and need to manage tokens during app sign-up or sign-in.
If you're performing authorization to access Google APIs and storing refresh tokens on your backend, then a server-to-server OAuth flow is appropriate.
Another clarification, user sign-in to your app and maintaining session state are separate concepts and should be handled separate from backend processes which may use an offline refresh token to perform actions through a Google API on behalf of the user while they are not logged in.
I'm currently playing around with a KnockoutJS SPA template in ASP.NET Core 2.1, and I managed to implement an authorization flow exactly as this one which was made in Angular:
https://fullstackmark.com/post/13/jwt-authentication-with-aspnet-core-2-web-api-angular-5-net-core-identity-and-facebook-login
As you can see in their User front-end service, basically the only check for whether the user is logged in on the client side is the check if the "auth_token" key exists in the client's local storage:
https://github.com/mmacneil/AngularASPNETCore2WebApiAuth/blob/master/src/src/app/shared/services/user.service.ts
this.loggedIn = !!localStorage.getItem('auth_token');
// ?? not sure if this the best way to broadcast the status but seems to resolve issue on page refresh where auth status is lost in
// header component resulting in authed user nav links disappearing despite the fact user is still logged in
Simply put, anyone can open up the browser local storage and insert a random string with the "auth_token" key and they'll be able to see everything admin-related in the UI (even though they will fail on API requests).
Can someone suggest a better flow for this? Or is the only option to send a "log in request" to the API, whenever an admin page is "opened"?
P.S. I am relatively new to the authentication schemes front, should JWT perhaps not be used for client-side content validation?
Considering JWT best practices, all your validations should be done in your back-end, since any validation coded in your web app could be read by any of your clients, resulting in a huge security flaw: anyone would know how to create a valid JWT for your application.
Is it a big problem to be possible to see your admin-related UI, even without any data? Considering that all of the routes which can return sensitive data are protected by JWT authorization, if a user access any pages or parts of your UI which require data, they would trigger a request to retrieve it, which would probably return a 401 (Unauthorized) HTTP status, or similar. A common front-end practice in these situations is to erase client user data, and redirect to a login page.
So, a typical flow would be:
User inserts a fake access token into their storage
User opens an admin page/ui which uses sensitive data in any way (showing, using for any internal logic, etc)
Web app does a request to the API requesting data
API returns a response which will be interpreted as an authorization error
Web app receive the API response, erase user access token and redirect them to its login page
In most cases, this entire flow will happen fast enough to block your user to further interact and explore your web app.
Would be better if you provide more information about your scenario, so anyone could understand if your worries are something that needs to be considered and truly solved. However, in most cases, the behavior above is accepted.
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.
I have an app and i have created the required API for in php I could also create it using firebase.
The app is meant to be used by people who are new to technology. I don't want any login authentication.
As I have created API any one who goes through my code can see the API link and can get the data which i don't want.
What i want to achieve is the API to serve data when the request is from my app only
How can i achieve this without any user login?
create an access token and store it in your application, then on each ajax request you will compare the token, so if the token is valid you will deliver the contents otherwise you will show an error message.
As, raymond Camden said in his comment:
it is not secure. I can use Remote Debugging to sniff the access token
and then use it myself. At the end of the day, there is no way to do
what you want 100% securely.
I'm setting up an HTML5 and JavaScript web application to consume Azure Mobile Services tables using the JavaScript client library. I've managed to get authentication setup successfully with the MicrosoftAccount identity provider. On load, my application checks if the user is already logged in, or if we have a token and username stored locally. If true, I hide the login button, and display the logout button, and proceed to load application data.
My problem is that when a token that is stored locally expires, my application still thinks the user is logged in. Therefore when I request table data, I get a 401 Unauthorized HTTP response.
Is there a graceful pattern to renew an expired token without burdening the user with relogging in every time their token expires?
You will need to log the user in every time, unfortunately. The token must have a lifetime associated with it. On some client platforms, you can get much longer lifetimes via single-sign flows, but these are generally not available for HTML. The common pattern is to, upon receiving the 401, retrigger your login code. Here is a blog post showing the approach for the Mobile Services Managed SDK. The same concepts should apply for JS.