Update to oidc-spa v5

keycloakify · Aug 9, 2024 · 7150dc9 · 7150dc9
1 parent bb5ccc0
commit 7150dc9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -21,12 +21,6 @@
 
     <meta name="theme-color" content="#000000">
 
-    <style id="root-color-scheme">
-      :root {
-        color-scheme: dark
-      }
-    </style>
-
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.16.6",
     "@mui/material": "^5.15.18",
-    "oidc-spa": "^4.14.3",
+    "oidc-spa": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsafe": "^1.6.6",

diff --git a/public/silent-sso.html → public/silent-sso.htm b/public/silent-sso.html → public/silent-sso.htm
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import { useOidc, keycloakAccountUrl } from "oidc";
-import { GlobalStyles } from "tss-react";
 import { tss } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
@@ -40,7 +39,7 @@ export function App() {
                                             You've modified the configuration of the Keycloak server in a way that is incompatible with
                                             <Link target="_blank" href="https://github.com/keycloakify/my-theme.keycloakify.dev">
                                                 this test application
-                                            </Link>.<br/>
+                                            </Link>.<br />
                                             You can open the console to see the error message.
                                         </>
                                     );
@@ -92,20 +91,10 @@ export function ContextualizedApp() {
     };
     */
 
-
-    const { theme, classes } = useStyles();
+    const { classes } = useStyles();
 
     return (
         <>
-            <GlobalStyles styles={{
-                "html, body": {
-                    margin: 0,
-                    padding: 0,
-                },
-                body: {
-                    backgroundColor: theme.palette.background.default
-                }
-            }} />
             <main className={classes.root}>
                 <div className={classes.content}>
                     <Typography variant="h2">

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,15 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App.tsx";
 import { ThemeProvider } from "@mui/material/styles";
 import { createTheme } from "@mui/material/styles";
 import { getIsSafari } from "./tools/getIsSafari";
 import { NoSafari } from "./NoSafari";
+import { GlobalStyles } from "tss-react";
+import { useStyles } from "tss-react/mui";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<Root />);
 
 const theme = createTheme({
     palette: {
@@ -23,9 +28,36 @@ const theme = createTheme({
     }
 });
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.StrictMode>
-        <ThemeProvider theme={theme}>
+function Root() {
+    return (
+        <React.StrictMode>
+            <ThemeProvider theme={theme}>
+                <RootContextualized />
+            </ThemeProvider>
+        </React.StrictMode>
+    );
+}
+
+function RootContextualized() {
+
+    const { theme } = useStyles();
+
+    return (
+        <>
+            <GlobalStyles styles={{
+                html: {
+                    ":root": {
+                        colorScheme: "dark"
+                    }
+                },
+                "html, body": {
+                    margin: 0,
+                    padding: 0,
+                },
+                body: {
+                    backgroundColor: theme.palette.background.default
+                }
+            }} />
             {(() => {
 
                 if (getIsSafari()) {
@@ -35,6 +67,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
                 return <App />;
 
             })()}
-        </ThemeProvider>
-    </React.StrictMode>
-);
+
+        </>
+    );
+
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1681,10 +1681,10 @@ object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-oidc-spa@^4.14.3:
-  version "4.14.3"
-  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-4.14.3.tgz#274756861c52ad32995469cceee5be00c6d4b77b"
-  integrity sha512-NZYsIMjnVknZcXVTk2hv68Xbqpv8xnNJU7R9Wm3qgeziZw1GIqxBqBXYhIQyexoVmPIAmGpzRnGr76ALGeI07A==
+oidc-spa@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-5.0.1.tgz#6e149b6e54a4ddbe84a3296ec4d139e6786face3"
+  integrity sha512-Nq0zyk7YlXSFebuhfPIK/P7toUk+NoMxgLPeWTCciIyWC7s+/kvqSznWTI9VMors4FgGpJ86oGnaystj5/6nYA==
 
 once@^1.3.0:
   version "1.4.0"