Acutally implement a login in the demo app

package.json

@@ -23,10 +23,14 @@
     "license": "MIT",
     "keywords": [],
     "dependencies": {
+        "evt": "^2.4.1",
+        "jwt-decode": "^3.1.2",
+        "keycloak-js": "^21.0.1",
         "keycloakify": "^6.12.1",
+        "powerhooks": "^0.26.2",
         "react": "18.1.0",
         "react-dom": "18.1.0",
-        "evt": "^2.4.1"
+        "tsafe": "^1.4.3"
     },
     "devDependencies": {
         "@types/node": "^15.3.1",
@@ -41,7 +45,9 @@
             "react-app/jest"
         ],
         "rules": {
-            "react-hooks/exhaustive-deps": "off"
+            "react-hooks/exhaustive-deps": "off",
+            "@typescript-eslint/no-redeclare": "off",
+            "no-labels": "off"
         }
     },
     "browserslist": {

public/silent-sso.html

@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <script>
+      parent.postMessage(location.href, location.origin);
+    </script>
+  </body>
+</html>

src/App/App.tsx

@@ -1,11 +1,63 @@
 import "./App.css";
 import logo from "./logo.svg";
 import myimg from "./myimg.png";
+import { createOidcClientProvider, useOidcClient } from "./oidc";
+import { addFooToQueryParams, addBarToQueryParams } from "../keycloak-theme/valuesTransferredOverUrl";
+import { Evt } from "evt";
+import { id } from "tsafe/id";
+import jwt_decode from "jwt-decode";
+
+const { OidcClientProvider } = createOidcClientProvider({
+    url: "https://auth.code.gouv.fr/auth",
+    realm: "keycloakify",
+    clientId: "starter",
+    log: console.log,
+    //The login pages will be in english.
+    getUiLocales: () => "en",
+    transformUrlBeforeRedirect: url =>
+        [url]
+            //Instead of foo and bar you could have isDark for example or any other state that you wish to 
+            //transfer from the main app to the login pages.
+            .map(url => addFooToQueryParams({ url, value: { foo: 42 } }))
+            .map(url => addBarToQueryParams({ url, "value": "value of bar transferred to login page" }))
+        [0],
+    // An event emitter that posts whenever the user interacts with the app
+    // This is to tell if we should allow the token to expires.  
+    evtUserActivity:
+        Evt.merge([
+            Evt.from(document, "mousemove"),
+            Evt.from(document, "keydown")
+        ]).pipe(() => [id<void>(undefined)]),
+});
 
 export default function App() {
+    return (
+        <OidcClientProvider>
+            <ContextualizedApp />
+        </OidcClientProvider>
+    );
+
+}
+
+function ContextualizedApp() {
+
+    const { oidcClient } = useOidcClient();
+
     return (
         <div className="App">
             <header className="App-header">
+            {
+                oidcClient.isUserLoggedIn ?
+                    <>
+                        <h1>You are authenticated</h1>
+                        <pre>{JSON.stringify(jwt_decode(oidcClient.accessToken))}</pre>
+                        <button onClick={() => oidcClient.logout({ redirectTo: "home" })}>Logout</button>
+                    </>
+                    :
+                    <>
+                        <button onClick={() => oidcClient.login({ doesCurrentHrefRequiresAuth: false })}>Login</button>
+                    </>
+            }
                 <img src={logo} className="App-logo" alt="logo" />
                 <img src={myimg} alt="test_image" />
                 <p style={{ "fontFamily": '"Work Sans"' }}>Hello world</p>