init

.gitignore

@@ -0,0 +1,6 @@
+frontend/dist
+
+*/node_modules
+*/__pycache__
+*/.idea
+*/.venv

backend/Dockerfile

@@ -0,0 +1,5 @@
+FROM python:3.10
+WORKDIR /app
+COPY . /app
+RUN pip install -r /app/requirements.txt
+CMD ["python", "app/api.py"]

backend/app/api.py

@@ -0,0 +1,17 @@
+from fastapi import FastAPI, Depends
+from models import User
+from auth import get_user_info
+import uvicorn
+
+app = FastAPI()
+
+@app.get("/")
+async def root():
+    return {"message": "Hello World"}
+
+@app.get("/secure")
+async def root(user: User = Depends(get_user_info)):
+    return {"message": f"Hello {user.username} you have the following service: {user.realm_roles}"}
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=9000)

backend/app/auth.py

@@ -0,0 +1,70 @@
+from fastapi.security import OAuth2AuthorizationCodeBearer
+from keycloak import KeycloakOpenID  # pip require python-keycloak
+from config import settings
+from fastapi import Security, HTTPException, status, Depends
+from pydantic import Json
+from models import User
+
+# This is used for fastapi docs authentification
+oauth2_scheme = OAuth2AuthorizationCodeBearer(
+    authorizationUrl=settings.authorization_url,  # https://sso.example.com/auth/
+    tokenUrl=settings.token_url,  # https://sso.example.com/auth/realms/example-realm/protocol/openid-connect/token
+)
+
+# This actually does the auth checks
+# client_secret_key is not mandatory if the client is public on keycloak
+keycloak_openid = KeycloakOpenID(
+    server_url=settings.server_url,  # https://sso.example.com/auth/
+    client_id=settings.client_id,  # backend-client-id
+    realm_name=settings.realm,  # example-realm
+    client_secret_key=settings.client_secret,  # your backend client secret
+    verify=True
+)
+
+
+async def get_idp_public_key():
+    return (
+        "-----BEGIN PUBLIC KEY-----\n"
+        f"{keycloak_openid.public_key()}"
+        "\n-----END PUBLIC KEY-----"
+    )
+
+
+# Get the payload/token from keycloak
+async def get_payload(token: str = Security(oauth2_scheme)) -> dict:
+    try:
+        return keycloak_openid.decode_token(
+            token,
+            key=await get_idp_public_key(),
+            options={
+                "verify_signature": True,
+                "verify_aud": False,
+                "exp": True
+            }
+        )
+    except Exception as e:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=str(e),  # "Invalid authentication credentials",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+
+
+# Get user infos from the payload
+async def get_user_info(payload: dict = Depends(get_payload)) -> User:
+    try:
+        return User(
+            id=payload.get("sub"),
+            username=payload.get("preferred_username"),
+            email=payload.get("email"),
+            first_name=payload.get("given_name"),
+            last_name=payload.get("family_name"),
+            realm_roles=payload.get("realm_access", {}).get("roles", []),
+            client_roles=payload.get("realm_access", {}).get("roles", [])
+        )
+    except Exception as e:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=str(e),  # "Invalid authentication credentials",
+            headers={"WWW-Authenticate": "Bearer"},
+        )

backend/app/config.py

@@ -0,0 +1,11 @@
+from models import authConfiguration
+
+
+settings = authConfiguration(
+    server_url="http://localhost:3000/auth",
+    realm="realm",
+    client_id="backend",
+    client_secret="",
+    authorization_url="http://localhost:3000/realms/realm/protocol/openid-connect/auth",
+    token_url="http://localhost:3000/realms/realm/protocol/openid-connect/token",
+)

backend/app/models.py

@@ -0,0 +1,18 @@
+from pydantic import BaseModel, EmailStr
+
+class User(BaseModel):
+    id: str
+    username: str
+    email: str
+    first_name: str
+    last_name: str
+    realm_roles: list
+    client_roles: list
+
+class authConfiguration(BaseModel):
+    server_url: str
+    realm: str
+    client_id: str
+    client_secret: str
+    authorization_url: str
+    token_url: str

backend/requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn
+python-keycloak
+pydantic

compose.yml

@@ -0,0 +1,45 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+    ports:
+      - 80:80
+
+  backend:
+    build:
+      context: ./backend
+    ports:
+      - 9000:9000
+
+  keycloak:
+    image: quay.io/keycloak/keycloak:latest
+    container_name: keycloak
+    environment:
+      - KC_DB=postgres
+      - KC_DB_URL=jdbc:postgresql://db:5432/keycloak
+      - KC_DB_USERNAME=keycloak
+      - KC_DB_PASSWORD=keycloakpassword
+      - KEYCLOAK_ADMIN=admin
+      - KEYCLOAK_ADMIN_PASSWORD=adminpassword
+      - KEYCLOAK_FRONTEND_URL=http://localhost/auth
+    ports:
+      - "3000:8080"
+    command: start-dev
+    depends_on:
+      - db
+
+  db:
+    image: postgres:15
+    container_name: keycloak-db
+    environment:
+      POSTGRES_DB: keycloak
+      POSTGRES_USER: keycloak
+      POSTGRES_PASSWORD: keycloakpassword
+    volumes:
+      - keycloak-data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+
+volumes:
+  keycloak-data:
+    

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18 as build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npx webpack build
+FROM nginx:1.25
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,31 @@
+server {
+    listen 80;
+
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    error_page 404 /index.html;
+
+    # Does not work
+    location /auth/ {
+        proxy_pass http://keycloak:8080/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_buffering off;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:9000/;
+    }
+}

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@react-keycloak/web": "^3.4.0",
+    "keycloak-js": "^26.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import Keycloak from './keycloak.ts';
+
+const App: React.FC = () => {
+  const [keycloakInitialized, setKeycloakInitialized] = useState(false);
+
+  useEffect(() => {
+    Keycloak.init({ onLoad: 'login-required' })
+      .then(authenticated => {
+        if (authenticated) {
+          console.log('Authenticated', Keycloak.token);
+        }
+        setKeycloakInitialized(true);
+      })
+      .catch(err => {
+        console.error('Failed to initialize Keycloak', err);
+      });
+  }, []);
+
+  if (!keycloakInitialized) {
+    return <div>Loading...</div>;
+  }
+
+  return <div>Your App Content</div>;
+};
+
+export default App;

frontend/src/Secure.tsx

@@ -0,0 +1,8 @@
+const ProtectedComponent: React.FC = () => {
+    if (!Keycloak.tokenParsed?.realm_access?.roles.includes('admin')) {
+      return <div>Access Denied</div>;
+    }
+  
+    return <div>Admin Content</div>;
+  };
+  

frontend/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React App</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="bundle.js"></script>
+</body>
+</html>

frontend/src/index.tsx

@@ -0,0 +1,13 @@
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const container = document.getElementById('root');
+
+if (!container) {
+    throw new Error('#root element not found');
+}
+
+const root = createRoot(container);
+
+root.render(<App />);

frontend/src/keycloak.ts

@@ -0,0 +1,10 @@
+import Keycloak from 'keycloak-js';
+
+
+const keycloak = new Keycloak({
+  url: 'http://<keycloak-server>/auth',
+  realm: '<realm-name>',
+  clientId: '<client-id>',
+});
+
+export default keycloak;

frontend/tsconfig.json

@@ -0,0 +1,110 @@
+{
+    "compilerOptions": {
+      /* Visit https://aka.ms/tsconfig to read more about this file */
+  
+      /* Projects */
+      // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+      // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+      // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+      // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+      // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+      // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+  
+      /* Language and Environment */
+      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+      // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+      "jsx": "react-jsx",                                  /* Specify what JSX code is generated. */
+      // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+      // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+      // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+      // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+      // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+      // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+      // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+      // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+      // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+  
+      /* Modules */
+      "module": "Node16",                                /* Specify what module code is generated. */
+      // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+      "moduleResolution": "node16",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+      // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+      // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+      // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+      // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+      // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+      // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+      // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+      "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+      // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+      // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+      // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+      // "resolveJsonModule": true,                        /* Enable importing .json files. */
+      // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+      // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+  
+      /* JavaScript Support */
+      // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+      // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+      // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+  
+      /* Emit */
+      "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+      // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+      "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+      // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+      // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+      // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+      "outDir": "./dist",                                  /* Specify an output folder for all emitted files. */
+      // "removeComments": true,                           /* Disable emitting comments. */
+      // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+      // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+      // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+      // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+      // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+      // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+      // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+      // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+      // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+      // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+      // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+      // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+      // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+      // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+      // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+  
+      /* Interop Constraints */
+      // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+      // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+      // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+      "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+      // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+  
+      /* Type Checking */
+      "strict": true,                                      /* Enable all strict type-checking options. */
+      // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+      // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+      // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+      // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+      // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+      // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+      // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+      // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+      // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+      // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+      // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+      // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+      // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+      // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+      // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+      // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+      // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+      // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+  
+      /* Completeness */
+      // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+      "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    }
+  }
+  

frontend/webpack.config.js

@@ -0,0 +1,28 @@
+import * as path from 'path';
+import * as HtmlWebpackPlugin from 'html-webpack-plugin';
+
+module.exports = {
+    entry: './src/index.tsx',
+    mode: 'development',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/index.html',
+        }),
+    ],
+};