Logon frame (+ new logo

kstrassheim · Konstantin Strassheim · web-flow · commit c56584a9fb5c · 2025-03-16T11:15:38.000+01:00
* added logon functionality

* added logo

---------

Co-authored-by: Konstantin Strassheim &lt;konstantin.strassheim@gmail.com&gt;
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@ The app which fulfills the following requirements for a
 - Deployment of a productive version with precompiled frontend server
 - Deployment to Azure App Service Free Plan with Actions on Pull Request
 - Handle Front and Backend routing in FastAPI both together
+- Handle 404 page
+- A frame for further development with server side Authentication
 
 ## Prerequisites
 Here are the prerequisites that you have to install before running the app
diff --git a/backend/api.py b/backend/api.py
@@ -0,0 +1,6 @@
+from fastapi import APIRouter
+
+api_router = APIRouter()
+@api_router.get("/data")
+def read_hello():
+    return {"message": "Hello from API"}
diff --git a/backend/auth.py b/backend/auth.py
@@ -0,0 +1,16 @@
+from fastapi import APIRouter
+from fastapi.encoders import jsonable_encoder
+from pydantic import BaseModel
+
+class LoginItem(BaseModel):
+    message: str
+
+auth_router = APIRouter()
+@auth_router.post("/login")
+async def login(loginitem: LoginItem):
+    data = jsonable_encoder(loginitem)
+    return {"token": "ABCDEF", "data": data}
+
+@auth_router.post("/logout")
+async def login():
+    return {"message": 'Loggout ok'}
diff --git a/backend/main.py b/backend/main.py
@@ -3,16 +3,17 @@
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse, RedirectResponse
 from pathlib import Path
+from auth import auth_router
+from api import api_router
 # Init FastAPI
 app = FastAPI()
 origins = ["http://localhost:5173", "localhost:5173"]
 app.add_middleware(CORSMiddleware,allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"])
 
-# API Router
-api_router = APIRouter()
-@api_router.get("/hello")
-def read_hello():
-    return {"message": "Hello from API"}
+# Register Auth Router
+app.include_router(auth_router, prefix="/auth")
+
+# Register API Router
 app.include_router(api_router, prefix="/api")
 
 # Frontend Router
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>EntraID-Web-Auth-Reference</title>
+    <title>FastAPI-Reference</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/404.jsx b/frontend/src/404.jsx
@@ -0,0 +1,10 @@
+import { Link } from "react-router-dom";
+export default function NotFound() {
+    return (
+      <>
+        <h1>404</h1>
+        <Link to='/'>Goto Home</Link>
+      </>
+    );
+  }
+  
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,16 +1,19 @@
 import { useState, useEffect } from 'react'
 import { Routes, Route } from "react-router-dom";
-import Login from './components/Login';
+import { RequireToken, setToken } from "./components/auth";
+import Login from './Login';
 import Home from './pages/Home';  
+import NotFound from './404';
 import './App.css'
 
 function App() {
   return (
     <>
       <div className ="App">
         <Routes>
-          <Route path="/" element = {<Home/>}/>
+          <Route path="/" element = {<RequireToken><Home/></RequireToken>}/>
           <Route path="/login" element = {<Login/>}/>
+          <Route path="*" element = {<NotFound/>}/>
         </Routes>
       </div>
     </>
diff --git a/frontend/src/Login.jsx b/frontend/src/Login.jsx
@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router";
+import { Link } from "react-router-dom";
+import { fetchToken, login, logout } from "./components/auth";
+import logo from './assets/logo.png'
+export default function Login() {
+    const navigate = useNavigate();
+    const token = fetchToken();
+
+    const loginFunc = async () => {
+      await login();
+      navigate('/');
+    }
+
+    return (
+      <>
+        <div>
+            <a href="https://github.com/kstrassheim/fastapi-reference" target="_blank">
+              <img src={logo} className="logo " alt="logo" />
+            </a>
+        </div>
+        <h1>Login to FastAPI-Reference</h1>
+        <p>Just press the button to automatically logon without any forms</p>
+        {
+          token ? (<>
+          <p>you are logged in</p>
+          <Link to='/'>Goto Home</Link>
+          </>
+        ) 
+        : 
+        (
+          <button onClick={loginFunc}>Login</button>
+        )
+        }
+      </>
+    );
+  }
+  
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
diff --git a/frontend/src/components/api.js b/frontend/src/components/api.js
@@ -0,0 +1,14 @@
+export const backendUrl = import.meta.env.MODE === 'production' ? '': 'http://localhost:8000';
+
+export const apiHello = async () => {
+    try {
+        const response = await fetch(`${backendUrl}/api/data`);
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
diff --git a/frontend/src/components/auth.js b/frontend/src/components/auth.js
@@ -0,0 +1,75 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom"
+import { backendUrl } from "./api"
+
+export const setToken = (token) => {
+    console.log(token, "setToken");
+    localStorage.setItem('mytoken', token) // make up your own token
+}
+
+export const clearToken = () => {
+    localStorage.removeItem('mytoken');
+  };
+
+export const fetchToken = () => {
+    let token = localStorage.getItem('mytoken')
+    console.log(token, "fetchToken");
+    return token
+}
+
+export const RequireToken = ({children}) =>{
+    const auth = fetchToken()
+    const location = useLocation()
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!auth) {
+          navigate("/login", { state: { from: location } });
+        }
+      }, [auth, navigate, location]);
+
+    return children;
+};
+
+export const login = async () => {
+    try {
+      //const navigate = useNavigate();
+      const response = await fetch(`${backendUrl}/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: "login attempt" }),
+      });
+
+      if (!response.ok) { throw new Error("Network response was not ok"); }
+
+      const data = await response.json();
+      console.log(data.token, "data.token");
+      if (data.token) {
+        setToken(data.token);
+        //navigate("/");
+      }
+    } catch (error) {
+      console.error("Error during login:", error);
+    }
+  };
+
+  
+export const logout = async () => {
+    try {
+      //const navigate = useNavigate();
+      const response = await fetch(`${backendUrl}/auth/logout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" }
+      });
+
+      if (!response.ok) { throw new Error("Network response was not ok"); }
+
+      const data = await response.json();
+      console.log(data.message);
+      clearToken();
+      //navigate("/");
+    } catch (error) {
+      console.error("Error during logout:", error);
+    }
+  };
+
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -8,6 +8,6 @@ createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
       <App />
-    </BrowserRouter>,
-  </StrictMode>,
+    </BrowserRouter>
+  </StrictMode>
 )
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -1,59 +1,64 @@
 import { useState, useEffect } from 'react'
-import reactLogo from '../assets/react.svg'
-import { Link } from 'react-router-dom' 
+import logo from '../assets/logo.png'
+import { Link, useNavigate } from 'react-router-dom' 
 import './Home.css'
+import { apiHello } from '../components/api'
+import { fetchToken, logout, login } from "../components/auth";
 
 function Home() {
-  const [count, setCount] = useState(0)
-  const [hello, setHello] = useState(null)
+  const [count, setCount] = useState(0);
+  const [data, setData] = useState(null);
+  const navigate = useNavigate();
+  
   const setCountFunc = () => {
     setCount(count + 1);
   }
 
-  const apiHost= import.meta.env.MODE === 'production' ? '': 'http://localhost:8000';
+  const logoutFunc = async () => {
+      await logout();
+      navigate('/');
+  }
+
+  const fetchData = async () => {
+    const data = await apiHello()
+    setData(data)
+  }
 
   useEffect(() => {
-    // Fetch JSON data from the API endpoint
-    fetch(`${apiHost}/api/hello`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      })
-      .then(data => setHello(data))
-      .catch(error => console.error('Error fetching data:', error));
-  }, []); // Empty dependency array runs this effect once on mount
+    fetchData();
+  }, []);
 
   return (
     <>
       <div>
-        {/* <a href="https://vite.dev" target="_blank">W
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a> */}
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
+          <a href="https://github.com/kstrassheim/fastapi-reference" target="_blank">
+            <img src={logo} className="logo " alt="logo" />
+          </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>FastAPI-Reference</h1>
       <div className="login-link">
-        <Link to="/login">Go to Login</Link>
+        {
+                fetchToken() ? (<>
+                <p>you are logged in</p>
+                <button onClick={logoutFunc}>Logout</button>
+                </>
+              ) 
+              : 
+              <></>
+          }
       </div>
       <div className="card">
         <button onClick={setCountFunc}>
           count is {count}
         </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
+        <p className="read-the-docs">
+          Click on the Logo to learn more
         </p>
+        <p>{import.meta.env.MODE}</p>
+        <h2>
+          {data ? data.message : 'Loading...'}
+        </h2>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-      <p>{import.meta.env.MODE}</p>
-      <h2>
-        {hello ? hello.message : 'Loading...'}
-      </h2>
     </>
   )
 }
