Silent login

src/App.css

@@ -10,11 +10,11 @@ body {
 
 #root {
     margin: 0 auto;
-    display: flex;
+    /*display: flex;*/
     flex-direction: column;
     place-items: flex-start;
     min-width: 320px;
-    max-width: 1100px;
+    max-width: 1280px;
     min-height: 100vh;
 }
 
@@ -23,25 +23,8 @@ body {
     margin: 0 auto;
     padding: 2rem;
     text-align: center;
-}
-
-/*.xlogo:hover {*/
-/*  filter: drop-shadow(0 0 2em #f5c600);*/
-/*}*/
-
-@keyframes logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    a:nth-of-type(2) .logo {
-        animation: logo-spin infinite 20s linear;
-    }
+    /* only horizontal scroll */
+    overflow-x: auto;
 }
 
 .card {

src/App.tsx

@@ -3,13 +3,26 @@ import Login from "./Login.tsx";
 import {Navigate, Route, Routes} from "react-router-dom";
 import Home from "./Home.tsx";
 import NavBar from "./NavBar.tsx";
-import {useAuth} from "react-oidc-context";
+import {hasAuthParams, useAuth} from "react-oidc-context";
 
 import NotFound from "./NotFound.tsx";
+import {useEffect, useState} from "react";
+import Spinner from "./Spinner.tsx";
 
 function App() {
 
-    const {user} = useAuth();
+    const auth = useAuth();
+    const [hasTriedSignin, setHasTriedSignin] = useState(false);
+
+    useEffect(() => {
+        if (!hasAuthParams() &&
+            !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading &&
+            !hasTriedSignin && auth.user
+        ) {
+            auth.signinSilent();
+            setHasTriedSignin(true);
+        }
+    }, [auth, hasTriedSignin]);
 
     const AnonRoutes = <>
         <Route path="/" element={<Navigate to="/login"/>}/>
@@ -22,13 +35,13 @@ function App() {
     return <>
         <NavBar/>
         <div id="content">
-            <Routes>
+            {auth.isLoading ? <Spinner size="lg"></Spinner> : <Routes>
                 <>
-                    {user === undefined ? null : user ? LoggedInRoutes : AnonRoutes}
+                    {auth.user === undefined ? null : auth.user ? LoggedInRoutes : AnonRoutes}
                 </>
                 <Route path="/login" element={<Login/>}/>
                 <Route path="*" element={<NotFound/>}/>
-            </Routes>
+            </Routes>}
         </div>
     </>
 

src/NavBar.tsx

@@ -30,7 +30,7 @@ function NavBar() {
     const alignedSpinner = <span style={{
         textAlign: "right",
     }}><Spinner/></span>
-    const rightItem = auth.user === undefined ? alignedSpinner : auth.user ? userMenu : loginButton;
+    const rightItem = auth.isLoading ? alignedSpinner : auth.user ? userMenu : loginButton;
     return (
         <nav className="navbar">
             <Link to="/" className="logo"><img src={fdLogo} alt="fd" onError={

src/main.tsx

@@ -21,7 +21,7 @@ const oidcConfig = {
     authority: "https://login.flipdot.org/realms/flipdot",
     client_id: "flipdot-app-dashboard",
     redirect_uri: window.location.origin + "/login",
-    post_logout_redirect_uri: window.location.origin + "/login",
+    post_logout_redirect_uri: window.location.origin + "/login/callback",
     response_type: "code",
     userStore: new WebStorageStateStore({store: window.localStorage}),
 } satisfies AuthProviderProps;