We Keep Coding

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.

How to get authentication token from front end while the user is logged in

I am trying to build a simple project where a user can search a movie from an api and add the selected movie to their "/movies" page, after being logged in.
I am using Nodejs, mongodb, express for backend and vanilla javascript for the front end.
When the user is registered or logged-in I am creating a JWT token and adding the token to the database.
My goal is to redirect them to their home page, which is "/user/movies"
Assume the user has logged in the first time, and it closed the
website, after some time has passed (not enough to expire the token)
the user opened the website again and went to "/user/movies" (which
requires an authentication.)
My question is, how would we still keep authenticated with the user after re-visiting, how can we reach the token that is previously created?
When I use postman, I can manually check the token from the database and enter the Authorization token to header and send a post request to validate the user.
But in the browser, how can I reach my previously created token to validate the user again?
I have tried localStorage but, in order to save token to the
localStorage, I need to take it from the database, but you can't
change localStorage in the backend.
I have tried cookies with http-only flag, but then how can I reach
the token from the front-end, since http-only, restrains from using javascript
What are my options in order to reach a JWT token from the front-end so that I can keep the user still authenticated, even after they close the website and come back later. (not enough to expire the token)
I am very new to how authentication works If I am making a logical mistake please tell me.

You need to send JWT token along with your other data as a response from your login API. Once you receive the response on the front end then just store the JWT Token to the localStorage by "localStorage.setItem("token",response.data.token).
Now you can always reference localStorage.getItem("token") to get the token even user close the browser and comeback again. Please do not forget to clear this localStoage by localStorage.removeItem("token") when user logout.
Also please note to not provide any expiry during the JWT token creation otherwise even you store that locally in localStorage then also it will get expire on server side and give "Forbidden error"

When you authenticate the user for the first time, store the token in the localStorage.
And since localStorage's data never gets deleted on its own, you can listen to the event of DOMContentLoaded where you can retrieve the token from the localStorage and authenticate the user with it, when the page is revisited.
You can read more about localStorage here

Handling JWT expiration and JWT payload update

I have a Koa based Node.js backend for my personal/hobby application.
I implemented session handling with JWT tokens. The client (AngularJS) gets the token after a successful login and stores the token somewhere (currently in sessionStorage but for the purposes of this question it shouldn't matter).
I have two questions:
When I need to update the user record which the JWT represents, say, the user turned on Two-factor authentication (2FA) so I asked him to provide his phone number and I'd like to set this phone number in the user's record. Currently, after a successful verification on the phone number I call my backend to update the user record and I create a new JWT token with the updated user record (I exclude sensitive information from the JWT token like the hashed password, but I'd like to include the phone number for client side usage). Is it okay to create a new token when some of the credentials change and update the existing client side token with this new token? Should I never-ever create another token, only to create the one and only upon successful authentication? How do I then update the payload in the token?
How should I handle expired JWT tokens? In my mind I have 3 (possible) scenarios:
2.1. The JWT is set to short living, say 15 minutes. If the backend server replies with a 401 Unauthenticated 'Invalid token' (I guess this is the default behavior of koa-jwt) then I automatically log-out my client and require re-authentication. But I also set up a complementary middleware, which is the last in the chain on the backend to re-create the token with a refreshed expiry and the client would also replace the existing token with the refreshed one. So if the user is active and uses the application every protected API call, in case of success, would create a new token to replace the old token.
2.2. The JWT is set long-living, say 1 week, and if it expires I opt-in re-authentication from the client.
2.3. Copy https://www.rfc-editor.org/rfc/rfc6749#section-1.5. Here when creating the JWT token after a successful authentication we send an access_token as well as a refresh_token. When the access_token is expired and the server responds with HTTP 401 'invalid token' (koa-jwt default) then the client sends the refresh_token to the backend to require a new access_token (and optionally a new refresh_token). In this case I don't fully understand how the refresh_token is verified against the old access_token to provide a new token? Or why do we need to have a refresh_token?
Any generic advice on the upper topics (JWT updates and JWT expiration) would be helpful.

Starting from the bottom, I would ignore refresh tokens as I don't think they will help you here. They are generally aimed at other scenarios where the client application can provide storage more secure than the user browser -- think native mobile applications or server-side web applications.
Refresh Tokens are long-lived. This means when a client gets one from a server, this token must be stored securely to keep it from being used by potential attackers, for this reason it is not safe to store them in the browser.
(emphasis is mine; source refresh tokens)
This means that option 2.3 is basically the same as 2.2, which is not a bad option. It's not uncommon to have web applications with long session duration. If your application is not highly sensitive it's acceptable to use long session to improve user experience. For example, Django uses a default of two weeks for the age of its session cookie. See SESSION_COOKIE_AGE.
The remaining option (2.1), is usually referred as sliding session. The session timeout is short, but as long as the user keeps using the application within that interval the session gets automatically renewed. This is possibly the most common approach, or at least the one I used most time, so I'm biased. The only thing I would note is that sliding session are usually implemented with opaque session identifiers stored client-side as cookies and then with the actual session data stored on the server.
Your approach is a bit different because you have a stateless JWT token (it contains actual user data) stored on browser local storage. Like you said, in order to update the token you'll have to generate a new one, because you'll have to generate a new signature.
The signature is used to verify that the sender of the JWT is who it says it is and to ensure that the message wasn’t changed in the way.
(emphasis is mine; source JSON web tokens)
Having said all that, I would consider the following:
Ask yourself if you really need JWT's or if regular session identifiers stored as cookies (HTTP Only) would simplify your logic.
If JWT's are a requirement, for example, you have another API that will also accept these tokens as authentications, then I would consider option 2.1 or 2.2 as refresh tokens for a browser-based application are not recommended.
Having said that, you should also consider that JWT's are not huge, but they will still be an overhead if you decide to be automatically renewing. You may mitigate this a little by choosing a session duration of 20 minutes and only perform automatic renewal after half the session has elapsed.
Another point is that a vulnerability like XSS in your application will expose the access token to an attacker as the injected scripts would be able to read from localStorage/sessionStorage, this can be another point in favor of HTTP only session cookie storage.

I would like to answer your second question before I can get on to the first one.
Basically the third option which you have mentioned is the best way to renew your access tokens. Access token should be short living(~5mins) and refresh token has longer life. When your access token gets expired, send your refresh token to the backend and get a new access token. So your response should be something like this:
{
"token_type":"bearer",
"access_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiVlx1MDAxNcKbwoNUwoonbFPCu8KhwrYiLCJpYXQiOjE0NDQyNjI4NjYsImV4cCI6MTQ0NDI2Mjg4Nn0.Dww7TC-d0teDAgsmKHw7bhF2THNichsE6rVJq9xu_2s",
"expires_in":10,
"refresh_token":"7fd15938c823cf58e78019bea2af142f9449696b"
}
So the idea is to seperate your application into Authorization Server (which generates access token / refresh token) & Resource Server (validate access token and access the resources ). You can maintain a schema to validate the refresh token against the access token in Authorization Server. Please refer to the schema section mentioned in this link which might give you some idea. Oauth2. You can modify the schema according to your need. You need not send your refresh token along with your access token for each request call. Refresh token can only be sent to Authorization server for generating new access token. How to generate refresh tokens? If I am using Java, I would use UUID.randomUUID() to generate a unique refresh token.
Now to answer your first question, if you want to update your JWT payload based on your updated user records, then you can use the same refresh token to generate a new access token with the updated payload. The logic remains same because if phone number exists in the user record it gets added to the payload and if not, it will be null in the payload.
The main advantage of using Refresh token is that the Access Tokens can be renewed at any time using Refresh Tokens

Yammer authentication - check if token is valid

I'm using Yammer JS SDK to authenticate users to access some web service. I'm using JS SDK to obtain a token and I store it in session. Current flow is following (may be wrong, correct me, if necessary):
User accesses any page, PHP is checking for token stored in session vars. If not - user is redirected to login page
Using Yammer SDK I'm getting an access token and save it to session vars (POSTing it to our server side login service) and render the requested page.
Problem so far - I can't find any way in Yammer API to check if the access token stored\passed to my web service is actually the right thing. Which means, that potentially anyone can generate some random gibberish data, use that as a token and view content - the rest of Yammer functionality will be broken, but content will be visible.
The smartest way I thought of so far is to try and get some client info from Yammer REST API using the token and if response is invalid - delete the session stored token.
How do I do that the proper way?

Checking for HTTP status code 401 Unauthorized Access on a request is the only way I know of to determine if your Token is valid. There are a couple instances where you will get a 401 back with a valid token, but this is pretty rare.

Phonegap: Authenticating the app and not the user for api access

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.