Adding simple CSRF example(no auth)

.gitignore

@@ -1,3 +1,4 @@
 .env
 __pycache__/
 *.py[cod]
+.vscode/*

client/src/App.js

@@ -1,30 +1,62 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';
 
 import UserList from './components/UsersList';
-
+import UserForm from './components/UserForm';
+import AuthContext from './auth'
 
 function App() {
+    const [fetchWithCSRF, setFetchWithCSRF] = useState(() => fetch);
+    const authContextValue = {
+        fetchWithCSRF,
+    };
+    useEffect(() => {
+        async function restoreCSRF() {
+            const response = await fetch('/api/csrf/restore', {
+                method: 'GET',
+                credentials: 'include'
+            });
+            if (response.ok) {
+                const authData = await response.json();
+                setFetchWithCSRF(() => {
+                    return (resource, init) => {
+                        if (init.headers) {
+                            init.headers['X-CSRFToken'] = authData.csrf_token;
+                        } else {
+                            init.headers = {
+                                'X-CSRFToken': authData.csrf_token
+                            }
+                        }
+                        return fetch(resource, init);
+                    }
+                });
+            }
+        }
+        restoreCSRF();
+    }, []);
 
   return (
-    <BrowserRouter>
-        <nav>
-            <ul>
-                <li><NavLink to="/" activeclass="active">Home</NavLink></li>
-                <li><NavLink to="/users" activeclass="active">Users</NavLink></li>
-            </ul>
-        </nav>
-        <Switch>
-            <Route path="/users">
-                <UserList />
-            </Route>
-
-            <Route path="/">
-                <h1>My Home Page</h1>
-            </Route>
-        </Switch>
-    </BrowserRouter>
+    <AuthContext.Provider value={authContextValue}>
+        <BrowserRouter>
+            <nav>
+                <ul>
+                    <li><NavLink to="/" activeclass="active">Home</NavLink></li>
+                    <li><NavLink to="/login" activeclass="active">Login</NavLink></li>
+                    <li><NavLink to="/users" activeclass="active">Users</NavLink></li>
+                </ul>
+            </nav>
+            <Switch>
+                <Route path="/users" exact={true}>
+                    <UserList />
+                </Route>
+                <Route path="/users/:id/edit" component={UserForm} />
+                <Route path="/">
+                    <h1>My Home Page</h1>
+                </Route>
+            </Switch>
+        </BrowserRouter>
+    </AuthContext.Provider>
   );
 }
 
-export default App;
+export default App;

client/src/auth.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AuthContext = React.createContext({});
+
+export default AuthContext;

client/src/components/User.js

@@ -1,11 +1,17 @@
-import React from 'react';
-
+import React, {} from 'react';
+import { Link } from 'react-router-dom';
 
 function User(props) {
     return (
         <>
             <strong>Username:</strong> {props.user.username}<br />
             <strong>Email:</strong> {props.user.email}<br />
+            <Link to={{
+                pathname: `/users/${props.user.id}/edit`,
+                state: {
+                    user: props.user
+                }
+            }}> Edit </Link>
             <hr />
         </>
     );

client/src/components/UserForm.js

@@ -0,0 +1,56 @@
+import React, {useState, useContext} from 'react';
+import AuthContext from '../auth'
+
+function UserForm(props) {
+    const { id } =  props.location.state.user;
+    console.log(id)
+    const [username, setUsername] = useState(props.location.state.user.username);
+    const [email, setEmail] = useState(props.location.state.user.email);
+
+    const [errors, setErrors] = useState([]);
+    const {fetchWithCSRF} = useContext(AuthContext);
+
+    const submitForm = (e) => {
+        e.preventDefault();
+
+        async function updateUser() {
+            const response = await fetchWithCSRF(`/api/users/${id}`, {
+                method: 'POST',
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    username,
+                    email
+                })
+            });
+
+            const responseData = await response.json();
+            if (!response.ok) {
+                setErrors(responseData.errors);
+            }
+        }
+        updateUser();
+    }
+    return (
+        <form onSubmit={submitForm}>
+            {errors.length ? errors.map((err) => <li key={err} >{err}</li>) : ''}
+            <div className="field">
+                <label>Email: </label>
+                    <div className="control">
+                        <input className="input" type="text" value={email} onChange={(e) => setEmail(e.target.value)} name="email" />
+                    </div>
+            </div>
+            <div className="field">
+                <label>Username: </label>
+                <div className="control">
+                    <input className="input" type="text" value={username} onChange={(e) => setUsername(e.target.value)} name="username" />
+                </div>
+            </div>
+
+            <button>Update</button>
+        </form>
+    );
+}
+export default UserForm;

client/src/components/UsersList.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, createContext } from 'react';
 
 import User from './User';
 
@@ -13,7 +13,6 @@ function UsersList (props) {
         }
         fetchData();
     }, []);
-
     const userComponents = users.map((user) => <User key={user.id} user={user} />)
     return (
         <>

starter_app/__init__.py

@@ -12,6 +12,7 @@
 app = Flask(__name__)
 
 app.config.from_object(Config)
+CSRFProtect(app)
 app.register_blueprint(user_routes, url_prefix='/api/users')
 db.init_app(app)
 
@@ -34,3 +35,6 @@ def react_root(path):
     if path == 'favicon.ico':
         return app.send_static_file('favicon.ico')
     return app.send_static_file('index.html')
+@app.route('/api/csrf/restore')
+def restore_csrf():
+    return {'csrf_token': generate_csrf()}

starter_app/api/user_routes.py

@@ -3,7 +3,13 @@
 
 user_routes = Blueprint('users', __name__)
 
+
 @user_routes.route('/')
 def index():
-  response = User.query.all()
-  return { "users": [user.to_dict() for user in response]}
+    response = User.query.all()
+    return {"users": [user.to_dict() for user in response]}
+
+
+@user_routes.route('/<int:id>', methods=['GET', 'POST'])
+def user_detail(id):
+    return {}