feat: Implement authentication and basic navigation

Author: spuxx-dev

apps/spuxx-client/.env.local

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080

apps/spuxx-client/.nginx/nginx.conf

@@ -0,0 +1,40 @@
+
+worker_processes 4;
+
+events { worker_connections 1024; }
+
+error_log         stderr;
+pid               /tmp/nginx.pid;
+
+http {
+    server {
+        listen 8080;
+        root  /usr/share/nginx/html;
+        include /etc/nginx/mime.types;
+
+        location / {
+            root   /usr/share/nginx/html;
+            try_files $uri $uri/ /index.html;
+            index  index.html index.htm;
+        }
+
+        location /alive {
+            default_type application/json;
+            return 200 '{ "status": "ok" }';
+        }
+
+        location /status {
+            stub_status on;
+        }
+
+        location /injected-config.js {
+            alias /usr/share/nginx/html/config/injected-config.js;
+            expires -1;
+        }
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}

apps/spuxx-client/package.json

@@ -11,11 +11,13 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@modyfi/vite-plugin-yaml": "1.1.0",
     "@tailwindcss/vite": "^4.1.5",
     "tailwindcss": "^4.1.5",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
-    "vite-plugin-solid": "^2.11.6"
+    "vite-plugin-solid": "^2.11.6",
+    "vite-tsconfig-paths": "5.1.4"
   },
   "dependencies": {
     "@solidjs/router": "^0.15.3",

apps/spuxx-client/src/assets/locales/de.yaml

@@ -0,0 +1,5 @@
+---
+main:
+  page:
+    login:
+      login-via-oidc: Anmelden via auth.spuxx.dev

apps/spuxx-client/src/config/app.config.ts

@@ -0,0 +1,27 @@
+import type { LogLevel } from '@spuxx/js-utils';
+
+export interface AppConfig {
+  /**
+   * The URL of the api service.
+   */
+  API_URL: string;
+  /**
+   * The URL of the IDP's account service page.
+   */
+  ACCOUNT_SERVICE_URL: string;
+  /**
+   * The default locale of the application.
+   */
+  DEFAULT_LOCALE: string;
+  /**
+   * The log level of the application.
+   */
+  LOG_LEVEL: LogLevel;
+}
+
+export const appConfig: AppConfig = {
+  API_URL: 'https://api.spuxx.dev',
+  ACCOUNT_SERVICE_URL: 'https://auth.spuxx.dev/realms/main/account',
+  DEFAULT_LOCALE: 'de',
+  LOG_LEVEL: 'debug',
+};

apps/spuxx-client/src/features/main/pages/login.page.tsx

@@ -1,11 +1,28 @@
 import { Button, Container } from '@spuxx/solid';
 import { Component } from 'solid-js';
+import { SessionService } from '../../../services/session';
+import { useNavigate } from '@solidjs/router';
+import { intl } from '@spuxx/js-utils';
 
 export const LoginPage: Component = () => {
+  const navigate = useNavigate();
+
+  async function checkAuthentication() {
+    const isAuthenticated = await SessionService.isAuthenticated();
+    if (isAuthenticated) navigate('/', { replace: true });
+  }
+  checkAuthentication();
+
+  async function handleLogin() {
+    SessionService.login();
+  }
+
   return (
     <Container class="relative text-center justify-center top-1/2 -translate-y-1/2">
       <h1>my.spuxx.dev</h1>
-      <Button icon="mdi:login">Anmelden via auth.spuxx.dev</Button>
+      <Button icon="mdi:login" onClick={handleLogin}>
+        {intl('main.page.login.login-via-oidc')}
+      </Button>
     </Container>
   );
 };

apps/spuxx-client/src/features/main/pages/root.page.tsx

@@ -1,6 +1,9 @@
+import { SessionService } from '@/services/session';
 import { Component } from 'solid-js';
 
 export const RootPage: Component = () => {
+  SessionService.protectRoute();
+
   return (
     <div>
       <h1>Root Page</h1>

apps/spuxx-client/src/index.tsx

@@ -3,6 +3,26 @@ import { render } from 'solid-js/web';
 
 import './styles/index.css';
 import App from './App';
+import { Config } from '@spuxx/browser-utils';
+import { appConfig, AppConfig } from './config/app.config';
+import { Intl, Logger } from '@spuxx/js-utils';
+import de from '@/assets/locales/de.yaml';
+
+Config.setup<AppConfig>({
+  defaultConfig: appConfig,
+  importMetaEnv: import.meta.env,
+});
+Logger.setLevel(Config.getConfig<AppConfig>().LOG_LEVEL);
+
+Intl.setup({
+  fallbackLocale: Config.getConfig<AppConfig>().DEFAULT_LOCALE,
+  dictionaries: [
+    {
+      locale: 'de',
+      values: de,
+    },
+  ],
+});
 
 const root = document.getElementById('root');
 

apps/spuxx-client/src/layout/side-nav/side-nav.component.tsx

@@ -24,6 +24,14 @@ export const SideNav = () => {
           color="text-default"
           onClick={Layout.closeSidebarOnMobile}
         />
+        <ButtonLink
+          icon="mdi:login"
+          title="Login"
+          href="/login"
+          variant="colored"
+          color="text-default"
+          onClick={Layout.closeSidebarOnMobile}
+        />
         <Button
           icon="mdi:account"
           title="Account"

apps/spuxx-client/src/router/routes.tsx

@@ -1,4 +1,4 @@
 import { RouteProps } from '@solidjs/router';
-import { mainRoutes } from '../features/main/main.routes';
+import { mainRoutes } from '@/features/main/main.routes';
 
 export const routes: RouteProps<string, never>[] = [...mainRoutes];