Enable auth with keycloak

Author: cht42

README.md

@@ -1,5 +1,11 @@
 # fastapi-react-postgres-keycloak
 
+To launch all the services just execute:
+
+```bash
+docker-compose up -d
+```
+
 ## Keycloak installation
 
 Create a `.env` file based on the `.env.example` file.

backend/app/main.py

@@ -1,11 +1,12 @@
 """Main module."""
-from fastapi import FastAPI, Request
+from fastapi import Depends, FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import Response
 from simber import Logger
 import uvicorn
 
-from app.router import targets
+from app.router import auth, targets
+from app.service.keycloak import verify_token
 
 LOG_FORMAT = "{levelname} [{filename}:{lineno}]:"
 logger = Logger(__name__, log_path="/logs/api.log")
@@ -47,11 +48,11 @@ async def root() -> Response:
 
 app.include_router(
     targets.router,
-    prefix="/api",
+    prefix="/api/targets",
     tags=["targets"],
-    # dependencies=[Depends(verify_token)],
+    dependencies=[Depends(verify_token)],
 )
-# app.include_router(auth.router, prefix="/api", tags=["auth"])
+app.include_router(auth.router, prefix="/api/auth", tags=["auth"])
 
 if __name__ == "__main__":
     uvicorn.run("main:app", host="0.0.0.0", reload=True, port=8888)  # nosec

backend/app/router/auth.py

@@ -3,14 +3,30 @@
 
 from fastapi import APIRouter, Depends
 from fastapi.security import OAuth2PasswordRequestForm
+from pydantic import BaseModel
 
-from app.service.keycloak import authenticate_user
+from app.service.keycloak import authenticate_user, logout, refresh_token
 
 router = APIRouter()
 
 
+class Token(BaseModel):
+    token: str
+
+
 @router.post("/token")
 async def login(form_data: OAuth2PasswordRequestForm = Depends()) -> tp.Dict[str, str]:
     """Login user."""
     token = await authenticate_user(form_data.username, form_data.password)
     return token
+
+
+@router.post("/refresh")
+async def refresh(token: Token) -> tp.Dict[str, str]:
+    new_token = await refresh_token(token.token)
+    return new_token
+
+
+@router.post("/logout")
+async def logout_user(token: Token) -> None:
+    await logout(token.token)

backend/app/router/targets.py

@@ -10,7 +10,7 @@
 router = APIRouter()
 
 
-@router.post("/targets", response_model=schemas.Target)
+@router.post("", response_model=schemas.Target)
 def create_target(
     target: schemas.TargetIn, db: Session = Depends(get_db)
 ) -> schemas.Target:
@@ -19,7 +19,7 @@ def create_target(
 
 
 @router.get(
-    "/targets",
+    "",
     response_model=tp.List[schemas.Target],
     response_model_include={"id", "first_name", "last_name"},
 )
@@ -28,19 +28,19 @@ def read_targets(db: Session = Depends(get_db)) -> tp.List[schemas.Target]:
     return crud.get_targets(db)
 
 
-@router.get("/targets/{target_id}", response_model=schemas.Target)
+@router.get("/{target_id}", response_model=schemas.Target)
 def read_target(target_id: int, db: Session = Depends(get_db)) -> schemas.Target:
     """Get a specific target."""
     return crud.get_target(db, target_id)
 
 
-@router.delete("/targets/{target_id}", response_model=schemas.Target)
+@router.delete("/{target_id}", response_model=schemas.Target)
 def delete_target(target_id: int, db: Session = Depends(get_db)) -> schemas.Target:
     """Delete a target."""
     return crud.delete_target(db, target_id)
 
 
-@router.put("/targets/{target_id}", response_model=schemas.Target)
+@router.put("/{target_id}", response_model=schemas.Target)
 def edit_target(
     target_id: int, target: schemas.TargetIn, db: Session = Depends(get_db)
 ) -> schemas.Target:
@@ -54,7 +54,7 @@ def read_pictures(db: Session = Depends(get_db)) -> tp.List[schemas.Picture]:
     return crud.get_pictures(db)
 
 
-@router.post("/targets/{target_id}/pictures", response_model=schemas.Picture)
+@router.post("/{target_id}/pictures", response_model=schemas.Picture)
 def create_picture_for_target(
     target_id: int, picture: schemas.PictureCreate, db: Session = Depends(get_db)
 ) -> schemas.Picture:

backend/app/service/keycloak.py

@@ -59,3 +59,17 @@ async def verify_token(token: str = Depends(oauth2_scheme)) -> tp.Dict[str, str]
         raise HTTPException(
             status_code=401, detail=str(error), headers={"WWW-Authenticate": "Bearer"}
         ) from error
+
+
+async def refresh_token(token: str) -> tp.Dict[str, str]:
+    try:
+        return keycloak_openid.refresh_token(token)
+    except (KeycloakGetError) as error:
+        raise HTTPException(status_code=401, detail=str(error)) from error
+
+
+async def logout(token: str) -> tp.Dict[str, str]:
+    try:
+        return keycloak_openid.logout(token)
+    except (KeycloakGetError) as error:
+        raise HTTPException(status_code=401, detail=str(error)) from error

frontend/app/public/favicon.ico

@@ -3,12 +3,12 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/logo.png" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" />
-  <title>My Project</title>
+  <title>Targets</title>
 </head>
 
 <body>

frontend/app/public/index.html

@@ -3,7 +3,7 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "logo.png",
+      "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

frontend/app/public/manifest.json

@@ -1,30 +1,39 @@
-import React, { FC } from "react";
+import React, { createContext, FC, useState } from "react";
 import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
 
-import {
-  Home,
-  TargetInfo,
-  TargetSearch,
-  NavigationBar,
-  TargetCreate,
-} from "./components/public";
+import { Home, NavigationBar, Login } from "./components/public";
+import { TargetInfo, TargetSearch, TargetCreate } from "./components/private";
+import { PrivateRoute } from "./PrivateRoute";
+import { isAuthenticated, peridodicRefreshTokenCheck } from "./utils/Auth";
+
+export const AuthContext = createContext({
+  authenticated: false,
+  setAuthenticated: (auth: boolean) => {},
+});
 
 export const App: FC = () => {
+  const [authenticated, setAuthenticated] = useState<boolean>(
+    isAuthenticated()
+  );
+
+  peridodicRefreshTokenCheck(60);
+
   return (
-    <>
+    <AuthContext.Provider value={{ authenticated, setAuthenticated }}>
       <BrowserRouter basename="/">
         <NavigationBar />
         <Switch>
           <Route exact path="/" component={Home} />
-          <Route exact path="/targets" component={TargetSearch} />
-          <Route exact path="/targets/create" component={TargetCreate} />
-          <Route path="/targets/:id" component={TargetInfo} />
+          <Route exact path="/login" component={Login} />
+          <PrivateRoute exact path="/targets" component={TargetSearch} />
+          <PrivateRoute exact path="/targets/create" component={TargetCreate} />
+          <PrivateRoute path="/targets/:id" component={TargetInfo} />
           <Route>
             <Redirect to="/" />
           </Route>
         </Switch>
       </BrowserRouter>
-    </>
+    </AuthContext.Provider>
   );
 };
 

frontend/app/src/App.tsx

@@ -0,0 +1,17 @@
+import { Redirect, Route } from "react-router";
+import { isAuthenticated } from "./utils/Auth";
+
+export const PrivateRoute = ({ component: Component, ...rest }: any) => {
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        isAuthenticated() ? (
+          <Component {...rest} />
+        ) : (
+          <Redirect to={{ pathname: "/login", state: { from: location } }} />
+        )
+      }
+    />
+  );
+};

frontend/app/src/PrivateRoute.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Form, Button, Row, Col, Container } from "react-bootstrap";
 import { useHistory } from "react-router";
+import { authorized_fetch } from "../../utils/Auth";
 
 export const TargetCreate = () => {
   const [firstName, setFirstName] = useState<string>("");
@@ -10,26 +11,28 @@ export const TargetCreate = () => {
   const history = useHistory();
 
   useEffect(() => {
+    document.title = "Create Target";
     if (firstName.length > 0 && lastName.length > 0) {
       setDisabled(false);
     } else {
       setDisabled(true);
     }
   }, [firstName, lastName]);
 
-  const createTarget = (e: React.MouseEvent) => {
-    fetch("/api/targets", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        first_name: firstName,
-        last_name: lastName,
-        dob: dob,
-      }),
-    })
-      .then((res) => res.json())
-      .then((data) => history.push("/targets/" + data.id))
-      .catch(console.error);
+  const createTarget = async (e: React.MouseEvent) => {
+    const data = await authorized_fetch(
+      "/api/targets",
+      { "content-type": "application/json" },
+      {
+        method: "POST",
+        body: JSON.stringify({
+          first_name: firstName,
+          last_name: lastName,
+          dob: dob,
+        }),
+      }
+    );
+    history.push("/targets/" + data.id);
   };
 
   return (

frontend/app/src/components/public/TargetCreate.tsx frontend/app/src/components/private/TargetCreate.tsx

@@ -11,42 +11,46 @@ import {
 } from "react-bootstrap";
 
 import { Target } from ".";
+import { authorized_fetch } from "../../utils/Auth";
 
 export const TargetInfo: FC = () => {
   const { id }: { id: string } = useParams();
   const [target, setTarget] = useState<Target | null>(null);
   const history = useHistory();
 
   useEffect(() => {
-    fetch("/api/targets/" + id, {
-      method: "GET",
-    })
-      .then((res) => res.json())
+    document.title = "Target Information";
+    authorized_fetch(
+      "/api/targets/" + id,
+      {},
+      {
+        method: "GET",
+      }
+    )
       .then((data) => setTarget(data))
       .catch(console.error);
   }, [id]);
 
-  const deleteTarget = (e: React.MouseEvent) => {
+  const deleteTarget = async (e: React.MouseEvent) => {
     if (window.confirm("Are you sure you want to delete this target ?")) {
-      fetch("/api/targets/" + id, { method: "DELETE" })
-        .then(() => history.push("/"))
-        .catch(console.error);
+      await authorized_fetch("/api/targets/" + id, {}, { method: "DELETE" });
+      history.push("/");
     }
   };
 
   const listPaths = target && (
     <ListGroup>
-      {target.pictures.map((picture) => (
-        <ListGroup.Item>{picture.path}</ListGroup.Item>
+      {target.pictures.map((picture, idx) => (
+        <ListGroup.Item key={idx}>{picture.path}</ListGroup.Item>
       ))}
     </ListGroup>
   );
   const listAttributes = target && (
     <ListGroup>
       {Object.entries(target)
         .filter(([key, value]) => key !== "pictures")
-        .map(([key, value]) => (
-          <ListGroup.Item>
+        .map(([key, value], idx) => (
+          <ListGroup.Item key={idx}>
             <b>{key}</b> {value}
           </ListGroup.Item>
         ))}

frontend/app/src/components/public/TargetInfo.tsx frontend/app/src/components/private/TargetInfo.tsx

@@ -14,29 +14,30 @@ import {
 import { Link } from "react-router-dom";
 
 import { getName, Target } from ".";
-
-const loadAllTargets = async () => {
-  return fetch("/api/targets", {
-    method: "GET",
-  });
-};
+import { authorized_fetch } from "../../utils/Auth";
 
 export const TargetSearch: FC = () => {
   const [targets, setTargets] = useState<Target[]>([]);
   const [targetsDefault, setTargetsDefault] = useState<Target[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(true);
 
+  const loadAllTargets = async () => {
+    const data = await authorized_fetch(
+      "/api/targets",
+      {},
+      {
+        method: "GET",
+      }
+    );
+    setTargetsDefault(data);
+    setTargets(data);
+    setLoading(false);
+  };
+
   useEffect(() => {
-    document.title = "Home";
-    loadAllTargets()
-      .then((res) => res.json())
-      .then((data) => {
-        setTargetsDefault(data);
-        setTargets(data);
-        setLoading(false);
-      })
-      .catch(console.error);
+    document.title = "Search Targets";
+    loadAllTargets().catch(console.error);
   }, []);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {