What is the best way to authenticate users using Local storage in React?

[zootechdrum]

I have been following this tutorial

🔐 Private Route in react-router v6

To implement a protected route in my react application.

It works as expected. I set the JWT token into local storage under ‘rememberMe’ key.

However, I don’t understand how this could be truly secure.

Wouldn’t a user be able to make a key called “rememberMe” with some arbitrary value in order to fake credentials and get past the login screen ?

Does this mean that upon each protected route I will have to make a trip to the Flask server and check whether the user exists based on the JWT token ?

If that is the case, will I have to make an authentication route in Flask and check if JWT is okay ?

For example

@app.route('/test', methods=['GET'])
@jwt_required()
def test():
    print('This is SPARTA')
    return make_response(jsonify({'secrents':'companySecrets'}))

if the JWT exists and is intact, I send some sort of response back to the client. It just seems a little repetitive to me to have to do this for every route that is protected.

Is there a better way to do this ?

[zootechdrum]

Funny enough the comments section of another article of about the same topic answered my question.

Implementing Protected Route and Authentication in React-JS

[DanCouper]

Yeah, a valid token would normally be used in the header of every request to the API once someone is past the auth itself. So then it makes no difference if someone managed to fool the initial auth: they’re not going to be able to actually get any data because the server should just reject any request they make, the token will be invalid.