{"id":14064964,"url":"https://github.com/app-generator/react-flask-authentication","last_synced_at":"2025-03-16T10:31:17.984Z","repository":{"id":100503177,"uuid":"426958673","full_name":"app-generator/react-flask-authentication","owner":"app-generator","description":"React Flask Authentication - Open-Source Full-stack Project | AppSeed ","archived":false,"fork":false,"pushed_at":"2023-02-11T18:34:29.000Z","size":570,"stargazers_count":81,"open_issues_count":0,"forks_count":29,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-11T04:43:30.622Z","etag":null,"topics":["appseed","authentication","flask","react"],"latest_commit_sha":null,"homepage":"https://blog.appseed.us/react-flask-authentication/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2021-11-11T10:25:34.000Z","updated_at":"2024-09-26T08:15:53.000Z","dependencies_parsed_at":"2023-05-15T11:15:49.386Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/react-flask-authentication","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Freact-flask-authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Freact-flask-authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Freact-flask-authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Freact-flask-authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/react-flask-authentication/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221662722,"owners_count":16859736,"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","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":["appseed","authentication","flask","react"],"created_at":"2024-08-13T07:04:12.308Z","updated_at":"2024-10-27T10:25:30.792Z","avatar_url":"https://github.com/app-generator.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"# [React Flask Authentication](https://blog.appseed.us/react-flask-authentication/)\n\nOpen-source full-stack seed project that uses a `React UI` powered by a simple `Flask API Server`. **[React Flask Authentication](https://blog.appseed.us/react-flask-authentication/)** sample can be used to bootstrap fast a new project using a tested `development-ready` stack or simply for eLearning purposes by beginners. For newcomers, **React** is a popular Javascript library for coding user interfaces baked by Facebook and Flask is a leading web framework written in Python. \n\n- 👉 [React Flask Authentication](https://react-flask-authentication.appseed-srv1.com/) - LIVE Demo\n- 👉 LIVE [Support](https://react-flask-authentication.appseed-srv1.com/) via [Discord](https://discord.gg/fZC6hup) - provided by AppSeed\n\n\u003cbr /\u003e\n\n## ✨ **Start the Flask API** via `Docker`\n\n```bash\n$ cd api-server-flask\n$ docker-compose up --build  # Start with Docker\n```\n\nAt this point, the API should be up \u0026 running at `http://localhost:5000`, and we can test the interface using POSTMAN or `curl`.\n\n\u003cbr /\u003e\n\n## ✨ **Start the React UI** (use another terminal)\n\n\u003e 👉 **Step 1** - Once the project is downloaded, change the directory to `react-ui`. \n\n```bash\n$ cd react-ui\n```\n\n\u003cbr \u003e\n\n\u003e 👉 **Step 2** - Install dependencies via NPM or yarn\n\n```bash\n$ npm i\n// OR\n$ yarn\n```\n\n\u003cbr /\u003e\n\n\u003e 👉 **Step 3** - Start in development mode\n\n```bash\n$ npm run start \n// OR\n$ yarn start\n```\n\nOnce all the above commands are executed, the `React UI` should be visible in the browser. By default, the app redirects the guest users to authenticate. \nAfter we register a new user and signIN, all the private pages become accessible. \n\n\u003cbr /\u003e\n\n![React Flask Authentication - Open-source full-stack seed project crafted by CodedThemes and AppSeed.](https://user-images.githubusercontent.com/51070104/137620059-07547eb2-0e7c-45e3-b825-67f5c72e4d3e.gif)\n\n\u003cbr /\u003e\n\n## ✨ General Information\n\nThe product is built using a `two-tier` pattern where the React frontend is decoupled logically and physically from the API backend. In order to use the product in a local environment, a few simple steps are required: \n\n- `Compile and start` the **Flask API Backend**\n  - be default the server starts on port `5000`\n- `Compile and start` the **React UI**\n  - UI will start on port `3000` and expects a running backend on port `5000`\n- `Configuration` (Optional)\n  - Change the API port\n  - Configure the API port used by the React UI to communicate with the backend \n\n\u003cbr /\u003e\n\n## ✨ Manual build\n\n\u003e 👉 **Start the Flask API** \n\n```bash\n$ cd api-server-flask\n$ \n$ # Create a virtual environment\n$ virtualenv env\n$ source env/bin/activate\n$\n$ # Install modules\n$ pip install -r requirements.txt\n$\n$ # Set Up the Environment\n$ export FLASK_APP=run.py\n$ export FLASK_ENV=development\n$ \n$ # Start the API\n$ flask run \n```\n\n\u003cbr /\u003e\n\n\u003e 👉 **Compile \u0026 start the React UI**\n\n```bash\n$ cd react-ui\n$\n$ # Install Modules\n$ yarn\n$\n$ # Start for development (LIVE Reload)\n$ yarn start \n```\n\n\u003cbr /\u003e\n\n### Configuration (Optional)\n\n\u003e Change the port exposed by the Flask API\n\n```bash\n$ flask run --port 5001\n```\n\nNow, the API can be accessed on port `5001`\n\n\u003cbr /\u003e\n\n\u003e Update the API port used by the React Frontend\n\n**API Server URL** - `src/config/constant.js` \n\n```javascript\nconst config = {\n    ...\n    API_SERVER: 'http://localhost:5000/api/'  // \u003c-- The magic line\n};\n```\n\n\u003cbr /\u003e\n\n## ✨ API\n\nFor a fast set up, this [POSTMAN](https://docs.appseed.us/boilerplate-code/api-server/api-unified-definition) definition can be used.\n\n\u003e **Register** - `api/users/register` (**POST** request)\n\n```\nPOST api/users/register\nContent-Type: application/json\n\n{\n    \"username\":\"test\",\n    \"password\":\"pass\", \n    \"email\":\"test@appseed.us\"\n}\n```\n\n\u003cbr /\u003e\n\n\u003e **Login** - `api/users/login` (**POST** request)\n\n```\nPOST /api/users/login\nContent-Type: application/json\n\n{\n    \"password\":\"pass\", \n    \"email\":\"test@appseed.us\"\n}\n```\n\n\u003cbr /\u003e\n\n\u003e **Logout** - `api/users/logout` (**POST** request)\n\n```\nPOST api/users/logout\nContent-Type: application/json\nauthorization: JWT_TOKEN (returned by Login request)\n\n{\n    \"token\":\"JWT_TOKEN\"\n}\n```\n\n\u003cbr /\u003e\n\n## ✨ Product UI\n\n\u003e React Flask Authentication - Login \n\n![React Flask Authentication - Login.](https://user-images.githubusercontent.com/51070104/141444378-763ca3fb-c18c-4558-9730-b42a341a7b22.jpg)\n\n\u003cbr /\u003e\n\n\u003e React Flask Authentication - Icons\n\n![React Flask Authentication - Icons.](https://user-images.githubusercontent.com/51070104/141444472-8c966396-69dc-46c3-835e-b64329fdbf7d.jpg)\n\n\u003cbr /\u003e\n\n\u003e React Flask Authentication - Colors\n\n![React Flask Authentication - Colors.](https://user-images.githubusercontent.com/51070104/141444532-46a3bcd0-841b-4725-aa82-122569cd678a.jpg)\n\n\u003cbr /\u003e\n\n## ✨ Links \u0026 Resources\n\n- Ask for [Support](https://appseed.us/support) on [Discord](https://discord.gg/fZC6hup)\n- See for [React Starters](https://appseed.us/apps/react) - index provided by AppSeed\n\n\u003cbr /\u003e\n\n---\n**[React Flask Authentication](https://blog.appseed.us/react-flask-authentication/)** - Open-source full-stack seed project provided by **[AppSeed](https://appseed.us/)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Freact-flask-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Freact-flask-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Freact-flask-authentication/lists"}