https://github.com/joeavanzato/demo-react-flask-mui-auth
Example React app utilizing MaterialUI with Flask JWT-authed API backend.
https://github.com/joeavanzato/demo-react-flask-mui-auth
bootstrap demo example flask flask-jwt-extended flask-restful material-ui mongodb react react-loader-spinner react-query react-router-dom react-spring react-use
Last synced: 7 months ago
JSON representation
Example React app utilizing MaterialUI with Flask JWT-authed API backend.
- Host: GitHub
- URL: https://github.com/joeavanzato/demo-react-flask-mui-auth
- Owner: joeavanzato
- License: mit
- Created: 2022-11-01T17:45:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-02T13:30:33.000Z (over 3 years ago)
- Last Synced: 2025-04-06T10:45:38.722Z (about 1 year ago)
- Topics: bootstrap, demo, example, flask, flask-jwt-extended, flask-restful, material-ui, mongodb, react, react-loader-spinner, react-query, react-router-dom, react-spring, react-use
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# demo-react-flask-mui-auth
Example React app utilizing MaterialUI & react-query with Flask JWT-authed API backend using flask-restful and flask-jwt-extended. Additionally the Flask back-end is using MongoDB to store users, token and application example data.
I also utilize react-spring for some animations, react-router for pathing/navigation and react-query for asynchronous query management/data refresh.
I am by no means an expert in these technologies - in learning, I found there was many different implementation techniques for both Flask and React when considering how to protect resources - I wanted to demonstrate one methodology I found particularly easy to implement while also providing a decent authentication mechanism for users. Keep in mind I am not paying any mind to 'authorization' in this demo and am considering all users to have the same level of permissions in both the front-end and back-end implementations.
### To Start / Requirements
Ensure MongoDB is installed / running (or modify to use an Atlas instance,etc). (https://www.mongodb.com/try/download/community)
Ensure NPM and Python are installed and available in your command-interpreter as appropriate and follow the steps below to install requirements and start both the Flask and the React server locally for testing.
```
py -m pip install requirements.txt
cd backend
py -m flask --app app --debug run
cd ../frontend
npm i react-use react-bootstrap bootstrap @mui/icons-material @mui/material @emotion/styled @emotion/react @tanstack/react-query axios react-router react-spring react-router-dom react-loader-spinner
```