{"id":27097366,"url":"https://github.com/joeavanzato/demo-react-flask-mui-auth","last_synced_at":"2025-10-08T12:52:05.806Z","repository":{"id":154759146,"uuid":"560529118","full_name":"joeavanzato/demo-react-flask-mui-auth","owner":"joeavanzato","description":"Example React app utilizing MaterialUI with Flask JWT-authed API backend.","archived":false,"fork":false,"pushed_at":"2022-11-02T13:30:33.000Z","size":2368,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T10:45:38.722Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joeavanzato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-01T17:45:02.000Z","updated_at":"2024-12-25T10:35:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"853a8e17-7a68-4e74-87e3-124b8896e937","html_url":"https://github.com/joeavanzato/demo-react-flask-mui-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joeavanzato/demo-react-flask-mui-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeavanzato%2Fdemo-react-flask-mui-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeavanzato%2Fdemo-react-flask-mui-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeavanzato%2Fdemo-react-flask-mui-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeavanzato%2Fdemo-react-flask-mui-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joeavanzato","download_url":"https://codeload.github.com/joeavanzato/demo-react-flask-mui-auth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeavanzato%2Fdemo-react-flask-mui-auth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278948024,"owners_count":26073747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-04-06T10:39:40.635Z","updated_at":"2025-10-08T12:52:05.801Z","avatar_url":"https://github.com/joeavanzato.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# demo-react-flask-mui-auth\n\nExample React app utilizing MaterialUI \u0026 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.\n\nI also utilize react-spring for some animations, react-router for pathing/navigation and react-query for asynchronous query management/data refresh.\n\nI 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.\n\n![Demonstration](img/apptest.gif?raw=true \"Demonstration\")\n\n### To Start / Requirements\nEnsure MongoDB is installed / running (or modify to use an Atlas instance,etc). (https://www.mongodb.com/try/download/community)\n\n\nEnsure 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.\n```\npy -m pip install requirements.txt\ncd backend\npy -m flask  --app app --debug run\ncd ../frontend\nnpm 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\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeavanzato%2Fdemo-react-flask-mui-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoeavanzato%2Fdemo-react-flask-mui-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeavanzato%2Fdemo-react-flask-mui-auth/lists"}