Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sbathgate/flask-react-aws

Last synced: 1 day ago
JSON representation

Host: GitHub
URL: https://github.com/sbathgate/flask-react-aws
Owner: sbathgate
Created: 2020-06-05T21:56:46.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-06T08:03:09.000Z (almost 2 years ago)
Last Synced: 2024-10-12T17:26:34.357Z (about 1 month ago)
Language: Python
Size: 8.22 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 23
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Authentication with Flask, React, and Docker

## Quick start
* Clone GitLab Repo: `$ git clone https://gitlab.com/sbathgate/flask-tdd-docker.git`
* Switch to project root: `$ cd flask-tdd-docker/`
* Build the images: `$ docker-compose build`
* Run the containers: `$ docker-compose up -d`
* Create the database: `$ docker-compose exec users python manage.py recreate_db`
* Seed the database: `$ docker-compose exec users python manage.py seed_db`

## File Structure
#### Within the download you'll find the following directories and files:
```
├── .gitignore
├── .gitlab-ci.yml
├── Dockerfile.deploy
├── README.md
├── docker-compose.yml
├── makefile
├── release.sh
└── services
├── client
│ ├── .dockerignore
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── Dockerfile
│ ├── Dockerfile.ci
│ ├── README.md
│ ├── coverage
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src
│ ├── App.jsx
│ ├── components
│ │ ├── About.jsx
│ │ ├── AddUser.jsx
│ │ ├── LoginForm.jsx
│ │ ├── Message.jsx
│ │ ├── NavBar.css
│ │ ├── NavBar.jsx
│ │ ├── RegisterForm.jsx
│ │ ├── UserStatus.jsx
│ │ ├── UsersList.jsx
│ │ ├── __tests__
│ │ │ ├── About.test.jsx
│ │ │ ├── AddUser.test.jsx
│ │ │ ├── App.test.jsx
│ │ │ ├── LoginForm.test.jsx
│ │ │ ├── Message.test.jsx
│ │ │ ├── NavBar.test.jsx
│ │ │ ├── RegisterForm.test.jsx
│ │ │ ├── UserStatus.test.jsx
│ │ │ ├── UsersList.test.jsx
│ │ │ └── __snapshots__
│ │ │ ├── About.test.jsx.snap
│ │ │ ├── AddUser.test.jsx.snap
│ │ │ ├── App.test.jsx.snap
│ │ │ ├── LoginForm.test.jsx.snap
│ │ │ ├── Message.test.jsx.snap
│ │ │ ├── NavBar.test.jsx.snap
│ │ │ ├── RegisterForm.test.jsx.snap
│ │ │ ├── UserStatus.test.jsx.snap
│ │ │ └── UsersList.test.jsx.snap
│ │ └── form.css
│ ├── index.js
│ └── setupTests.js
└── users
├── .coverage
├── .coveragerc
├── .dockerignore
├── .flake8
├── Dockerfile
├── Dockerfile.prod
├── entrypoint.sh
├── htmlcov
├── manage.py
├── project
│ ├── __init__.py
│ ├── .isort.cfg
│ ├── api
│ │ ├── __init__.py
│ │ ├── auth.py
│ │ ├── ping.py
│ │ └── users
│ │ ├── __init__.py
│ │ ├── admin.py
│ │ ├── crud.py
│ │ ├── models.py
│ │ └── views.py
│ ├── config.py
│ ├── db
│ │ ├── Dockerfile
│ │ └── create.sql
│ └── tests
│ ├── __init__.py
│ ├── conftest.py
│ ├── pytest.ini
│ ├── test_admin.py
│ ├── test_auth.py
│ ├── test_config.py
│ ├── test_ping.py
│ ├── test_user_model.py
│ ├── test_users.py
│ └── test_users_unit.py
├── requirements-dev.txt
├── requirements.txt
└── setup.cfg
```

## Common Commands
### Docker Compose
#### Set the `REACT_APP_USERS_SERVICE_URL` environment variable:
```$ export REACT_APP_USERS_SERVICE_URL=http://localhost:5001```

#### Build the images:
```$ docker-compose build```

#### Build and spin up the new containers:
```$ docker-compose up -d --build```

#### To stop the containers:
```$ docker-compose stop```

#### To bring down the containers:
```$ docker-compose down```

### Client
#### Run the tests without coverage:
```$ docker-compose exec client npm test```

#### Run the tests with coverage:
```$ docker-compose exec client npm test --coverage```

#### Check formatting with Prettier:
```$ docker-compose exec client npm run prettier:check```

#### Lint with eslint:
```$ docker-compose exec client npm run lint```

### Server
#### Create the database:
```$ docker-compose exec users python manage.py recreate_db```

#### Seed the database:
```$ docker-compose exec users python manage.py seed_db```

#### Run the tests without coverage:
```$ docker-compose exec users python -m pytest "project/tests" -p no:warnings```

#### Run the tests with coverage:
```$ docker-compose exec users python -m pytest "project/tests" -p no:warnings --cov="project"```

#### Lint with Flake8:
```$ docker-compose exec users flake8 project```

#### Run Black and isort with check options:
```$ docker-compose exec users black project --check```

```$ docker-compose exec users /bin/sh -c "isort project/**/*.py --check-only"```

#### Make code changes with Black and isort:
```$ docker-compose exec users black project```

```$ docker-compose exec users /bin/sh -c "isort project/**/*.py"```

### Postgres
#### Want to access the database via psql?
```$ docker-compose exec users-db psql -U postgres```

##### Then, you can connect to the database and run SQL queries. For example:
```# \c users_dev```
```# select * from users;```

### Other Commands
#### Want to force a build?
```$ docker-compose build --no-cache```

#### Remove images:
```$ docker rmi $(docker images -q)```

## TODO:
#### My notes:
- [ ] Configure singular setup.cfg for flake8, black and isort.

#### Test-Driven Development with Python, Flask and Docker
- [ ] Test coverage: Add more tests to increase the overall test coverage.
- [ ] DRY out the code: There's plenty of places in the code base that could be refactored.
- [x] Flask-CORS: Use Flask-CORS to handle cross-origin requests -- e.g., requests that originate from a different protocol, IP address, domain name, or port.
- [ ] Caching: Add caching (where appropriate) with Flask-Cache.
- [ ] Database migrations: Manage changes to the database through SQLAlchemy database migrations with the Flask-Migrate extension.

#### Authentication with Flask, React, and Docker
##### Part 2: Auth Routes
- [ ] Try to increase the test coverage. Add tests for the remaining edge cases.
- [ ] Add unit tests as well in a new file called test_auth_unit.py. Use monkeypatch like we did in test_users_unit.py.
- [ ] We're currently allowing duplicate usernames. Is this okay? Probably not. Practice TDD on your own and add a test for this and then implement the code.
- [ ] We should probably invalidate refresh tokens. We could create a new database table for this and only store a single refresh token per user.
##### Part 3: React Auth - Part 2
- [ ] Write test to ensure UserStatus redirects to login if invalid token.
- [ ] Revoke/Blacklist tokens in order to prevent abuse
- [ ] Adding email confirmation between user registration and login
- [ ] EXPLORE: For added protection, instead of storing refresh tokens in LocalStorage, how would you return tokens from the server in HttpOnly cookies? The Flask-JWT-Extended extension may be worth looking at.
##### Part 3: React Alert Messages
- [ ] Add test to ensure message disappears when 1: a user click the 'x', 2: a new message is flashed, 3: three seconds pass
##### Part 3: Update Components
- [ ] Add ability to update user. Reuse same modal.
- [ ] Prevent currently logged in person from deleting themselves.

## Valuable Notes
If you get a compilation error due to Module not found: Can't resolve 'temp'; try installing temp in the running container:
```$ docker-compose exec client npm install react-router-dom```