Login authentication for React & Flask app

auth_react_flask.md

To ensure that only logged-in users can see the update_user page, you'll need to implement authentication checks. This typically involves sending the token (that you've stored in localStorage after login) with each request to your backend and verifying it there. Here's how you can achieve this:

1. Send Token in Request from React: Modify your API calls to include the authentication token in the headers. With Axios, it might look something like this:

   import axios from "axios";
   
   const token = localStorage.getItem('token');
   
   axios.get('/api/update_user', { headers: { Authorization: `Bearer ${token}` } })
       .then(response => {
           // handle success
       })
       .catch(error => {
           // handle error
           if (error.response && error.response.status === 401) {
               // if unauthorized, redirect to login or show error
           }
       });

2. Verify Token in Flask: On your Flask backend, you'll need to verify the token for each request that should be authenticated. You can use Flask decorators to create protected routes:

   from flask import Flask, request, jsonify, make_response
   import jwt  # used for encoding and decoding jwt tokens
   
   app = Flask(__name__)
   
   def token_required(f):
       @wraps(f)
       def decorated(*args, **kwargs):
           token = None
           
           # jwt is passed in the request header
           if 'Authorization' in request.headers:
               token = request.headers['Authorization'].split(" ")[1]
   
           if not token:
               return jsonify({'message': 'Token is missing!'}), 401
   
           try:
               # Decode token here (you need the same secret used to encode it)
               jwt.decode(token, app.config['SECRET_KEY'])
           except:
               return jsonify({'message': 'Token is invalid!'}), 401
   
           return f(*args, **kwargs)
   
       return decorated
   
   @app.route('/api/update_user')
   @token_required
   def update_user():
       # your code here

3. Protecting React Routes: You can also protect your React routes by creating PrivateRoute components. This component would check if the token exists (or is valid) before allowing the user to access the route.

   import React from 'react';
   import { Route, Redirect } from 'react-router-dom';
   
   const PrivateRoute = ({component: Component, ...rest}) => {
       return (
           <Route 
               {...rest}
               render={props => 
                   localStorage.getItem('token') ? (
                       <Component {...props} />
                   ) : (
                       <Redirect 
                           to={{ 
                               pathname: "/login", 
                               state: { from: props.location } 
                           }} 
                       />
                   )
               }
           />
       );
   };
   
   export default PrivateRoute;

   Then, use this PrivateRoute component in your main router file for the update_user path:

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import PrivateRoute from './PrivateRoute';
   import UpdateUser from './UpdateUser';
   import Login from './Login';
   
   function App() {
       return (
           <Router>
               <Switch>
                   <Route path="/login" component={Login} />
                   <PrivateRoute path="/update_user" component={UpdateUser} />
                   {/* other routes here */}
               </Switch>
           </Router>
       );
   }
   
   export default App;

In this setup, the update_user API is protected by the token, and the update_user page in React is only accessible to users who have a valid token. This effectively ensures that only logged-in users can see the update_user page.