Add OAuth2, JWT auth, and react-admin that uses same auth method (#21)

* add passing test for oauth2 post to token

* run black and prettier on files, add true JWT creation method

* refactor tests and put in real JWT creation method

* add build script and create initial user/password in cookiecutter template

* change sqlalchemy logo size

* fix type error on react-admin page

* add note about security

* add API docs image to README and more on security

Author: Buuntu

README.md

@@ -1,38 +1,44 @@
 # FastAPI + React Template · [![CircleCI](https://circleci.com/gh/Buuntu/fastapi-react.svg?style=shield)](https://circleci.com/gh/Buuntu/fastapi-react) [![license](https://img.shields.io/github/license/peaceiris/actions-gh-pages.svg)](LICENSE) [![Dependabot Status](https://img.shields.io/badge/Dependabot-active-brightgreen.svg)](https://dependabot.com)
 
+<div>
 <img src="assets/fastapi-logo.png" alt="fastapi-logo" height="60" /> <img
 src="assets/react-logo.png" alt="react-logo" height="60" /> &nbsp; &nbsp; <img
+src="assets/react-admin.png" alt="react-admin" height="60" /> &nbsp; &nbsp; <img
 src="assets/typescript.png" alt="react-logo" height="60" /> &nbsp;&nbsp;&nbsp;
-<img src="assets/postgres.png" alt="react-logo" height="60" />
-&nbsp;&nbsp;
-<img src="assets/sql-alchemy.png" alt="sql-alchemy" height="60" />
+<img src="assets/postgres.png" alt="react-logo" height="60" /> <img
+src="assets/sql-alchemy.png" alt="sql-alchemy" height="60" />
+</div>
 
 This project serves as a template for bootstrapping a FastAPI and React project
 using a modern stack.
 
 ## Features
 
-1. **[FastAPI](https://fastapi.tiangolo.com/)** (Python 3.8)
-2. **[React](https://reactjs.org/)** (with Typescript)
-3. **[PostgreSQL](https://www.postgresql.org/)** for the database
-4. **[SqlAlchemy](https://www.sqlalchemy.org/)** for ORM
-5. **[Alembic](https://alembic.sqlalchemy.org/en/latest/)** for database
-   migrations
-6. **[Pytest](https://docs.pytest.org/en/latest/)** for backend tests
-7. **[Prettier](https://prettier.io/)**/**[ESLint](https://eslint.org/)**
-   (Airbnb style guide)
-8. **[Docker Compose](https://docs.docker.com/compose/)** for development
-9. **[Nginx](https://www.nginx.com/)** as a reverse proxy to allow
-   backend/frontend on the same port
-10. [**MaterialUI**](https://material-ui.com/) for styling
-11. [**react-admin**](https://github.com/marmelab/react-admin) for the admin
-    dashboard
+- **[FastAPI](https://fastapi.tiangolo.com/)** (Python 3.8)
+- **[React](https://reactjs.org/)** (with Typescript)
+- **[PostgreSQL](https://www.postgresql.org/)** for the database
+- **[SqlAlchemy](https://www.sqlalchemy.org/)** for ORM
+- **[Alembic](https://alembic.sqlalchemy.org/en/latest/)** for database
+  migrations
+- **[Pytest](https://docs.pytest.org/en/latest/)** for backend tests
+  - Includes test database, client, and user fixtures
+- **[Prettier](https://prettier.io/)**/**[ESLint](https://eslint.org/)** (Airbnb
+  style guide)
+- **[Docker Compose](https://docs.docker.com/compose/)** for development
+- **[Nginx](https://www.nginx.com/)** as a reverse proxy to allow
+  backend/frontend on the same port
+- **[MaterialUI](https://material-ui.com/)** for styling
+- **[react-admin](https://github.com/marmelab/react-admin)** for the admin
+  dashboard
+  - Using JWT authentication and login/redirects configured based on status
+    codes
+- **JWT** authentication using OAuth2 and PyJWT
 
 ## Background
 
 This project is meant as a lightweight/React alternative to [FastAPI's official
 fullstack project](https://github.com/tiangolo/full-stack-fastapi-postgresql).
-If you want a fullstack, comprehensive project in Vue, I would suggest you start
+If you want a more comprehensive project in Vue, I would suggest you start
 there.
 
 Most of the boilerplate backend code is taken from that project or the [FastAPI
@@ -60,6 +66,10 @@ This will ask for the following variables to be set:
 - port [default 8000]
 - postgres_user [default postgres]
 - postgres_password [default password]
+- postgres_database [default app]
+- initial_user_email [default [email protected]]
+- initial_user_password [default password]
+- secret_key [default super_secret]
 
 and will create a directory called whatever you set for `project_slug`.
 
@@ -68,23 +78,35 @@ and will create a directory called whatever you set for `project_slug`.
 Change into your project directory and run:
 
 ```bash
-docker-compose up -d
-docker-compose run --rm backend alembic upgrade head
+chmod +x scripts/build.sh
+./scripts/build.sh
 ```
 
-This will take a while to build the first time it's run since it needs to fetch
-all the docker images.
+This will build and run the docker containers, run the alembic migrations, and
+load the initial data (a test user).
+
+It may take a while to build the first time it's run since it needs to fetch all
+the docker images.
+
+Once you've built the images once, you can simply use regular `docker-compose`
+commands to manage your development environment, for example to start your
+containers:
+
+```bash
+docker-compose up -d
+```
 
 Once this finishes you can navigate to the port set during setup (default is
 `localhost:8000`), you should see the slightly modified create-react-app page:
 
 ![default create-react-app](assets/create-react-app.png)
 
-*Note: If you see an Nginx error at first with a `502: Bad Gateway` page, you
-may  have to wait for webpack to build the development server (the nginx
-container builds much more quickly).*
+_Note: If you see an Nginx error at first with a `502: Bad Gateway` page, you
+may have to wait for webpack to build the development server (the nginx
+container builds much more quickly)._
 
-The backend docs will be at `http://localhost:8000/api/docs`.
+The backend docs will be at `http://localhost:8000/api/docs`. ![API
+Docs](assets/api-docs.png)
 
 Backend routes will be at `http://localhost:8000/api`.
 
@@ -93,16 +115,36 @@ Backend routes will be at `http://localhost:8000/api`.
 This project uses [react-admin](https://marmelab.com/react-admin/) for a highly
 configurable admin dashboard.
 
-After starting the project, navigate to `http://localhost:8000/admin`.  You
-should see a list of users, which you can edit, add, and delete. These are all
-based off of the `users` routes in the backend.
+After starting the project, navigate to `http://localhost:8000/admin`. You
+should see a login screen. Use the username/password you set for the initial
+user on project setup.
+
+![React Adming Login](assets/login-screen.png)
+
+You should now see a list of users which you can edit, add, and delete. The
+table is configured with the REST endpoints to the FastAPI `/users` routes in
+the backend.
 
 ![React Admin Dashboard](assets/admin-dashboard.png)
 
 The admin dashboard is kept in the `frontend/src/admin` directory to keep it
 separate from the regular frontend.
 
+## Security
+
+To generate a secure key used for encrypting/decrypting the JSON Web Tokens, you can run this command:
+
+```bash
+openssl rand -hex 32
+```
+
+The default is fine for development but you will want something more secure for
+production.
+
+You can either set this on project setup as `secret_key` or manually edit the
+Python `SECRET_KEY` variable in `backend/app/core/security.py`.
+
 ## Contributing
 
-Contributing is more than welcome.  Please read the [Contributing
+Contributing is more than welcome. Please read the [Contributing
 doc](CONTRIBUTING.md) to find out more.

assets/admin-dashboard.png

@@ -4,6 +4,8 @@
   "port": "8000",
   "postgres_user": "postgres",
   "postgres_password": "password",
-  "postgres_server": "postgres",
-  "postgres_database": "app"
+  "postgres_database": "app",
+  "initial_user_email": "admin@{{cookiecutter.project_name}}.com",
+  "initial_user_password": "password",
+  "secret_key": "super_secret"
 }

assets/api-docs.png

@@ -1,9 +1,12 @@
+#!/bin/bash
+
+cd "$(dirname "$0")"
+cd ..
 current_dir=`pwd`
 cd ..
 ./fastapi-react/scripts/dev-project.sh
 cd dev-fastapi-react
 docker-compose down -v --remove-orphans
-docker-compose up -d
-docker-compose run --rm backend alembic upgrade head
+./scripts/build.sh
 ./scripts/test.sh
-cd $current_dir
+# cd $current_dir

assets/create-react-app.png

@@ -59,17 +59,13 @@ def run_migrations_online():
     and associate a connection with the context.
     """
     configuration = config.get_section(config.config_ini_section)
-    configuration['sqlalchemy.url'] = get_url()
+    configuration["sqlalchemy.url"] = get_url()
     connectable = engine_from_config(
-        configuration,
-        prefix="sqlalchemy.",
-        poolclass=pool.NullPool,
+        configuration, prefix="sqlalchemy.", poolclass=pool.NullPool,
     )
 
     with connectable.connect() as connection:
-        context.configure(
-            connection=connection, target_metadata=target_metadata
-        )
+        context.configure(connection=connection, target_metadata=target_metadata)
 
         with context.begin_transaction():
             context.run_migrations()
@@ -78,4 +74,4 @@ def run_migrations_online():
 if context.is_offline_mode():
     run_migrations_offline()
 else:
-    run_migrations_online()
+    run_migrations_online()

assets/login-screen.png

@@ -10,21 +10,21 @@
 
 
 # revision identifiers, used by Alembic.
-revision = '91979b40eb38'
+revision = "91979b40eb38"
 down_revision = None
 branch_labels = None
 depends_on = None
 
 
 def upgrade():
     op.create_table(
-        'user',
-        sa.Column('id', sa.Integer, primary_key=True),
-        sa.Column('email', sa.String(50), nullable=False),
-        sa.Column('hashed_password', sa.String(100), nullable=False),
-        sa.Column('is_active', sa.Boolean),
+        "user",
+        sa.Column("id", sa.Integer, primary_key=True),
+        sa.Column("email", sa.String(50), nullable=False),
+        sa.Column("hashed_password", sa.String(100), nullable=False),
+        sa.Column("is_active", sa.Boolean),
     )
 
 
 def downgrade():
-    op.drop_table('user')
+    op.drop_table("user")

assets/react-admin.png

@@ -0,0 +1,31 @@
+from fastapi.security import OAuth2PasswordRequestForm
+from fastapi import APIRouter, Depends, HTTPException, status
+from datetime import timedelta
+
+from app.db.session import get_db
+from app.core import security
+from app.core.auth import authenticate_user
+
+auth_router = r = APIRouter()
+
+
+@r.post("/token")
+async def login(
+    db=Depends(get_db), form_data: OAuth2PasswordRequestForm = Depends()
+):
+    user = authenticate_user(db, form_data.username, form_data.password)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+
+    access_token_expires = timedelta(
+        minutes=security.ACCESS_TOKEN_EXPIRE_MINUTES
+    )
+    access_token = security.create_access_token(
+        data={"sub": user.email}, expires_delta=access_token_expires
+    )
+
+    return {"access_token": access_token, "token_type": "bearer"}

assets/sql-alchemy.png

@@ -0,0 +1,21 @@
+
+def test_login(client, test_db, test_user, test_password):
+    response = client.post(
+        "/api/token",
+        data={"username": test_user.email, "password": test_password},
+    )
+    assert response.status_code == 200
+
+
+def test_wrong_password(client, test_db, test_user, test_password):
+    response = client.post(
+        "/api/token", data={"username": test_user.email, "password": "wrong"}
+    )
+    assert response.status_code == 401
+
+
+def test_wrong_login(client, test_db, test_user, test_password):
+    response = client.post(
+        "/api/token", data={"username": "fakeuser", "password": test_password}
+    )
+    assert response.status_code == 401

cookiecutter.json

@@ -1,21 +1,16 @@
-from sqlalchemy import create_engine, Boolean
-import json
-from sqlalchemy.orm import sessionmaker
-from app.db.session import Base, get_db
-
-from app.core import config
-from app.main import app
 from app.db import models
 
 
 def test_get_users(client, test_db, test_user):
     response = client.get("/api/v1/users")
     assert response.status_code == 200
-    assert response.json() == [{
-        'id': test_user.id,
-        'email': test_user.email,
-        'is_active': bool(test_user.is_active),
-    }]
+    assert response.json() == [
+        {
+            "id": test_user.id,
+            "email": test_user.email,
+            "is_active": bool(test_user.is_active),
+        }
+    ]
 
 
 def test_delete_user(client, test_user, test_db):
@@ -25,44 +20,54 @@ def test_delete_user(client, test_user, test_db):
 
 
 def test_delete_user_not_found(client, test_user, test_db):
-    response = client.delete(f"/api/v1/users/4321")
+    response = client.delete("/api/v1/users/4321")
     assert response.status_code == 404
 
 
 def test_edit_user(client, test_user, test_db):
     new_user = {
-        'email': '[email protected]',
-        'is_active': False,
-        'password': 'new_password',
+        "email": "[email protected]",
+        "is_active": False,
+        "password": "new_password",
     }
 
     response = client.put(f"/api/v1/users/{test_user.id}", json=new_user)
     assert response.status_code == 200
-    new_user['id'] = test_user.id
-    new_user.pop('password')
+    new_user["id"] = test_user.id
+    new_user.pop("password")
     assert response.json() == new_user
 
 
 def test_edit_user_not_found(client, test_user, test_db):
     new_user = {
-        'email': '[email protected]',
-        'is_active': False,
-        'password': 'new_password',
+        "email": "[email protected]",
+        "is_active": False,
+        "password": "new_password",
     }
-    response = client.put(f"/api/v1/users/1234", json=new_user)
+    response = client.put("/api/v1/users/1234", json=new_user)
     assert response.status_code == 404
 
 
 def test_get_user(client, test_user, test_db):
     response = client.get(f"/api/v1/users/{test_user.id}")
     assert response.status_code == 200
     assert response.json() == {
-        'id': test_user.id,
-        'email': test_user.email,
-        'is_active': bool(test_user.is_active),
+        "id": test_user.id,
+        "email": test_user.email,
+        "is_active": bool(test_user.is_active),
     }
 
 
 def test_user_not_found(client, test_user, test_db):
     response = client.get("/api/v1/users/123")
     assert response.status_code == 404
+
+
+def test_unauthenticated_user(client):
+    response = client.get("/api/v1/users/me")
+    assert response.status_code == 401
+
+
+def test_authenticated_user(client):
+    # TODO
+    pass