React Flask Authentication
Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server. 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.
Links
- React Flask Authentication - LIVE Demo
- LIVE Support via Discord - provided by AppSeed
Quick-start in Docker
Clone/Download the source code
$ git clone https://github.com/app-generator/react-flask-authentication.git
Start the Flask API
$ cd flask-api
$ docker-compose pull # download dependencies
$ docker-compose build # local set up
$ docker-compose up # start the app
At this point, the API should be up & running at http://localhost:5000, and we can test the interface using POSTMAN or curl.
Start the React UI (use another terminal)
$ cd react-ui
$ docker-compose pull # download dependencies
$ docker-compose build # local set up
$ docker-compose up # start the app
Once 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. After we register a new user and signIN, all the private pages become accessible.
General Information
The 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:
Compile and startthe Flask API Backend- be default the server starts on port
5000
- be default the server starts on port
Compile and startthe React UI- UI will start on port
3000and expects a running backend on port5000
- UI will start on port
Configuration(Optional)- Change the API port
- Configure the API port used by the React UI to communicate with the backend
Manual build
Start the Flask API
$ cd flask-api
$
$ # Create a virtual environment
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip install -r requirements.txt
$
$ # Set Up the Environment
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
$
$ # Start the API
$ flask run
Compile & start the React UI
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start
Configuration (Optional)
Change the port exposed by the Flask API
$ flask run --port 5001
Now, the API can be accessed on port 5001
Update the API port used by the React Frontend
API Server URL - src/config/constant.js
const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};
API
For a fast set up, use this POSTMAN file: api_sample
Register -
api/users/register(POST request)
POST api/users/register
Content-Type: application/json
{
"username":"test",
"password":"pass",
"email":"[email protected]"
}
Login -
api/users/login(POST request)
POST /api/users/login
Content-Type: application/json
{
"password":"pass",
"email":"[email protected]"
}
Logout -
api/users/logout(POST request)
POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)
{
"token":"JWT_TOKEN"
}
Product UI
React Flask Authentication - Login
React Flask Authentication - Icons
React Flask Authentication - Colors
Links & Resources
- Ask for Support on Discord
- See for React Starters - index provided by AppSeed
React Flask Authentication - Open-source full-stack seed project provided by AppSeed App Generator
5 Dec 15, 2021
183 Jan 6, 2023
4 Feb 22, 2022
5 Jan 21, 2022
8 Aug 6, 2022
2 Dec 23, 2021
651 Dec 12, 2022
18.7k Jan 8, 2023
827 Dec 15, 2022
167 Jan 03, 2023
1.6k Dec 31, 2022
122 Dec 22, 2022
1 Nov 26, 2021
19 Oct 30, 2022
5 May 25, 2022
1 Jan 18, 2022
1 Dec 17, 2021
1.6k Jan 08, 2023
3 Nov 07, 2022
3 Nov 17, 2022
40 Jul 16, 2022
176 Dec 29, 2022
94 Dec 13, 2022
1 Dec 14, 2022
33 Dec 27, 2022
1 Oct 13, 2021