react-auth | use solution for user registration | User Interface library

I am working on a basic react auth app, right now the routes /signup and /login work when I run this repo with my .env.local file that contains firebase auth variables. https://github.com/MartinBarker/react-auth-app

I am trying to make it so that the '/' route that points to Dashboard will only be accessible for a user who is currently signed in, and if a user is not signed in but tries to access the '/' route they will be redirected to the '/login' page.

But whenever I use the route

I see in a blog (here) about Authentication in React with JWT, this setup: access token expiry is 15 minutes , refresh token expiry is 1 month; every 10 minutes the client calls the /refreshToken endpoint, to check if refreshToken is still valid (otherwise the user is shown the login screen).

On the server, the /refreshToken endpoint correctly checks that the refreshtoken is not expired, that the user with the id in refreshtoken payload is still existing and valid (i.e.: the passed refreshToken is present in his refreshTokens array). If everything's fine, a new access token is generated, and sent back with the response.

So far so good. But, before returning the response, a new refreshToken is generated, too, and replaced to the old one into users's refreshTokens array... I think this strategy is flawed, since this way the user will never see his login to expire, even after refresh token (one month in this example) will be overdue...

I did make some tests (lowering the 1 month value to 30 minutes), and effectively the user authorization never expires... Forcing a logout of the user deleting his refreshTokens array obviously works fine, but I'd expect a logout when the refresh token expires by age.

I ask if my understanding is correct (the refreshToken endpoint on the server should not refresh the refresh token, but the access token only), or if I miss something.

UPDATE after @Ghero comment: I see your point... But why to refresh a token if not to update it's expiry?
However, the blog's code used to renew the refresh token:

When using React.js and React-Auth, calling server-side functions like getServerSideProps will prevent you from exporting your project via next export. This is the content of my pages/_app.js, I copied the structure from the docs (https://next-auth.js.org/getting-started/client and also https://github.com/nextauthjs/next-auth/issues/1210#issuecomment-782630909):

I am building a React App with authentication using JWTs. I am able to create a new user. I am able to log that user in. But I am unable to update that user's info in the MongoDb it is connected to. The error I am receiving is the following:

I have searched around, but still can't get it to work. I followed this blog to set things up.

this is where I send my cookie (server):

Im trying to get some input value from a library(https://www.npmjs.com/package/react-auth-code-input) , but im getting an error TypeError: Cannot read properties of undefined (reading 'value')

code :

I want to receive a value from my variable(meta) in the file form.js this one:

I have looked through quite a few tutorials (e.g. this, this, and this) on user authentication in a full-stack Django + React web app. All of them simply send username and password received from the user to the backend using a POST request. It seems to me that, if the user leaves the computer unattended for a minute, anyone can grab his password from the request headers in network tools in the browser. Is this a valid concern that must be taken care of? If so, how should these examples be modified? A tutorial / example of the correct approach would be appreciated.

I have inherited a React application that uses CSS in JS. This is cumbersome as all of the SCSS is written as a string, making it very difficult to work with as no code hinting or formating by the IDE can be done.

I am used to working with web-pack for these kinds of things, but I don't think it is part of the solution as I can't find a reference to it in the package.json file.

I am trying to switch over to SCSS, but am not quite managing. I am using the following tutorial that claims to work without web-pack:

https://medium.com/programming-sage/react-and-sass-setup-no-webpack-no-bs-a813ac56a9b7

Here is a copy of my package.json: