Display auth data, fix login container

docker-compose.yml

@@ -21,8 +21,9 @@ services:
     working_dir: /app
     volumes:
       - ./webui:/app
-    expose:
+      - /app/node_modules
-      - "3000"
+    ports:
+      - "3000:3000"
     environment:
       - NODE_ENV=development
       - AUTH0_SECRET=${AUTH0_SECRET}
@@ -35,10 +36,11 @@ services:
       - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
       - NEXT_PUBLIC_AUTH0_CLIENT_ID=${NEXT_PUBLIC_AUTH0_CLIENT_ID}
       - NEXT_PUBLIC_AUTH0_DOMAIN=${NEXT_PUBLIC_AUTH0_DOMAIN}
-    command: "sh -c 'npm install && npm run dev'"
+    command: sh -c "npm install && npm run dev"
     networks:
       - app-network
 
+
   mssql:
     image: mcr.microsoft.com/mssql/server:2022-latest
     container_name: sqlserver

webui/auth0-templates/login.html

@@ -61,7 +61,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      animation: slideLeft 1s ease-out;
+      animation: slideLeft 0.5s cubic-bezier(0.77, 0, 0.175, 1);
       position: relative;
       z-index: 0;
     }
@@ -76,7 +76,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      animation: slideRight 1s ease-out;
+      animation: slideRight 0.5s cubic-bezier(0.77, 0, 0.175, 1);
       position: relative;
       z-index: 1;
     }

webui/src/app/page.js

@@ -1,9 +1,180 @@
-import Image from "next/image";
+'use client';
+
+import { useUser } from "@auth0/nextjs-auth0";
+import {useEffect, useState} from "react";
 
 export default function Home() {
-  return (
+    const { user, error, isLoading } = useUser();
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    const [accessToken, setAccessToken] = useState(null);
-      <a href="/auth/login">Login</a>
+
-    </div>
+    useEffect(() => {
-  );
+        const fetchAccessToken = async () => {
-}
+            if (user) {
+                try {
+                    const response = await fetch('/auth/access-token');
+                    if (response.ok) {
+                        const tokenData = await response.text();
+                        setAccessToken(tokenData);
+                    } else {
+                        setAccessToken('Token not available');
+                    }
+                } catch (error) {
+                    setAccessToken('Error fetching token');
+                }
+            }
+        };
+
+        fetchAccessToken().then(r => console.log(r));
+    }, [user]);
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+                <div className="relative">
+                    <div className="w-16 h-16 border-4 border-white/20 border-t-white rounded-full animate-spin"></div>
+                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <div className="w-10 h-10 border-4 border-transparent border-t-purple-400 rounded-full animate-spin"></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-red-900 via-pink-900 to-purple-900 flex items-center justify-center p-4">
+                <div className="bg-white/10 backdrop-blur-xl rounded-2xl p-6 border border-white/20 shadow-2xl">
+                    <div className="text-white/80 mb-4">{error.message}</div>
+                    <div className="text-center">
+                        <a
+                            href="/auth/login"
+                            className="group relative inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl font-bold text-white shadow-2xl hover:shadow-purple-500/25 transition-all duration-300 hover:scale-105 active:scale-95"
+                        >
+                            <div
+                                className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                            <span className="relative flex items-center gap-2">
+                                Sign In
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
+            <div className="relative z-10 min-h-screen flex items-center justify-center p-4">
+                {user ? (
+                    <div className="w-full max-w-5xl">
+                        <div className="text-center mb-6">
+                            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full mb-3 shadow-2xl">
+                                {user.picture ? (
+                                    <img
+                                        src={user.picture}
+                                        alt="Profile"
+                                        className="w-full h-full rounded-full object-cover border-3 border-white/20"
+                                    />
+                                ) : (
+                                    <div className="text-white text-xl font-bold">
+                                        {user.name?.charAt(0) || user.email?.charAt(0) || '👤'}
+                                    </div>
+                                )}
+                            </div>
+                            <h1 className="text-2xl pb-1 font-bold bg-gradient-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+                                Just testing :P
+                            </h1>
+                        </div>
+
+                        <div className="bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20 shadow-2xl overflow-hidden mb-4">
+                            <div className="bg-gradient-to-r from-purple-500/20 to-blue-500/20 p-4 border-b border-white/10">
+                                <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                                    Auth Details
+                                </h2>
+                            </div>
+                            <div className="p-5">
+                                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                                    <div className="space-y-4">
+                                        <div>
+                                            <label
+                                                className="text-purple-300 text-xs font-semibold uppercase tracking-wider">Name</label>
+                                            <div
+                                                className="text-white text-base mt-1 p-2 bg-white/5 rounded-lg border border-white/10">
+                                                {user.name || 'Not provided'}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <label
+                                                className="text-purple-300 text-xs font-semibold uppercase tracking-wider">Email</label>
+                                            <div
+                                                className="text-white text-base mt-1 p-2 bg-white/5 rounded-lg border border-white/10">
+                                                {user.email || 'Not provided'}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <label
+                                                className="text-purple-300 text-xs font-semibold uppercase tracking-wider">User
+                                                ID</label>
+                                            <div
+                                                className="text-white/80 text-xs mt-1 p-2 bg-white/5 rounded-lg border border-white/10 font-mono break-all">
+                                                {user.sub || 'Not available'}
+                                            </div>
+                                        </div>
+                                        {user.nickname && (
+                                            <div>
+                                                <label
+                                                    className="text-purple-300 text-xs font-semibold uppercase tracking-wider">Nickname</label>
+                                                <div
+                                                    className="text-white text-base mt-1 p-2 bg-white/5 rounded-lg border border-white/10">
+                                                    {user.nickname}
+                                                </div>
+                                            </div>
+                                        )}
+                                        <div>
+                                            <label
+                                                className="text-purple-300 text-xs font-semibold uppercase tracking-wider">Access
+                                                Token</label>
+                                            <div
+                                                className="text-white/80 text-xs mt-1 p-2 bg-black/30 rounded-lg border border-white/10 font-mono break-all max-h-24 overflow-auto">
+                                                {accessToken}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label
+                                            className="text-purple-300 text-xs font-semibold uppercase tracking-wider mb-2 block">
+                                            Raw User Data
+                                        </label>
+                                        <div
+                                            className="bg-black/30 rounded-lg p-3 border border-white/10 h-64 overflow-auto">
+                                            <pre
+                                                className="text-green-300 text-xs font-mono leading-tight whitespace-pre-wrap">
+                                                {JSON.stringify(user, null, 2)}
+                                            </pre>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex justify-center">
+                            <a
+                                href="/auth/logout"
+                                className="group relative px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 rounded-xl font-bold text-white shadow-2xl hover:shadow-red-500/25 transition-all duration-300 hover:scale-105 active:scale-95"
+                            >
+                                <div className="absolute inset-0 bg-gradient-to-r from-red-600 to-pink-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                                <span className="relative flex items-center gap-2">
+                                    Sign Out
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                ) : (
+                    <div></div>
+                )}
+            </div>
+        </div>
+    );
+}

webui/src/lib/auth0.js

@@ -2,7 +2,7 @@ import { Auth0Client } from "@auth0/nextjs-auth0/server";
 
 export const auth0 = new Auth0Client({
     authorizationParameters: {
-        scope: 'openid profile email read:shows',
+        scope: 'openid profile email',
         audience: 'imprink-front'
     }
 });