Migrate to oidc-spa v3

README.md

@@ -220,4 +220,4 @@ jobs:
 EOF
 ```
 
-You can also remove `oidc-spa`, `powerhooks` and `tsafe` from your dependencies.  
+You can also remove `oidc-spa`, `powerhooks`, `zod` and `tsafe` from your dependencies.  

package.json

@@ -25,12 +25,13 @@
     "keywords": [],
     "dependencies": {
         "evt": "^2.4.15",
-        "oidc-spa": "^2.2.0",
+        "oidc-spa": "^3.0.3",
-        "keycloakify": "^9.1.4",
+        "keycloakify": "^9.1.6",
         "powerhooks": "^0.26.8",
         "react": "18.1.0",
         "react-dom": "18.1.0",
-        "tsafe": "^1.6.0"
+        "tsafe": "^1.6.0",
+        "zod": "^3.22.4"
     },
     "devDependencies": {
         "@types/node": "^15.3.1",

src/App/App.tsx

@@ -1,44 +1,7 @@
 import "./App.css";
 import logo from "./logo.svg";
 import myimg from "./myimg.png";
-import { useMemo } from "react";
+import { OidcProvider, useOidc, getKeycloakAccountUrl } from "./oidc";
-import { createOidcProvider, useOidc } from "oidc-spa/react";
-import { decodeJwt } from "oidc-spa";
-import { assert } from "tsafe/assert";
-
-//On older Keycloak version you need the /auth (e.g: http://localhost:8080/auth)
-//On newer version you must remove it (e.g: http://localhost:8080 )
-const keycloakUrl = "https://auth.code.gouv.fr/auth";
-const keycloakRealm = "keycloakify";
-const keycloakClientId= "starter";
-
-const { OidcProvider } = createOidcProvider({
-    issuerUri: `${keycloakUrl}/realms/${keycloakRealm}`,
-    clientId: keycloakClientId,
-    // NOTE: You can also pass queries params when calling oidc.login()
-    getExtraQueryParams: () => ({
-        // This adding ui_locales to the url will ensure the consistency of the language between the app and the login pages
-        // If your app implements a i18n system (like i18nifty.dev for example) you should use this and replace "en" by the 
-        // current language of the app.
-        // On the other side you will find kcContext.locale.currentLanguageTag to be whatever you set here.  
-        "ui_locales": "en",
-        "my_custom_param": "value of foo transferred to login page"
-    }),
-    /*
-     * This parameter have to be provided provide if your App is not hosted at the origin of the subdomain.
-     * For example if your site is hosted by navigating to `https://www.example.com`
-     * you don't have to provide this parameter.
-     * On the other end if your site is hosted by navigating to `https://www.example.com/my-app`
-     * Then you want to set publicUrl to `/my-app`
-     *
-     * Be mindful that `${window.location.origin}${publicUrl}/silent-sso.html` must return the `silent-sso.html` that
-     * you are supposed to have created in your `public/` directory.
-     *
-     * If your are still using `create-react-app` (like we are for now) you can just set
-     * publicUrl to `process.env.PUBLIC_URL` and don't have to think about it further.
-     */
-    publicUrl: process.env.PUBLIC_URL
-});
 
 export default function App() {
     return (
@@ -48,25 +11,44 @@ export default function App() {
     );
 }
 
-
 function ContextualizedApp() {
 
-    const { oidc } = useOidc();
+    const { isUserLoggedIn, login, logout, oidcTokens } = useOidc();
 
     return (
         <div className="App">
             <header className="App-header">
-                {
+                {isUserLoggedIn ?
-                    oidc.isUserLoggedIn ?
+                    (
-                        <AuthenticatedRoute logout={() => oidc.logout({ redirectTo: "home" })} />
+                        <>
-                        :
+
+                            <h1>Hello {oidcTokens.decodedIdToken.name} !</h1>
+                            <a
+                                href={getKeycloakAccountUrl({ locale: "en" })}
+                            >
+                                Link to your Keycloak account
+                            </a>
                             <button
-                            onClick={() => oidc.login({ 
+                                onClick={() => logout({ redirectTo: "home" })}
+                            >
+                                Logout
+                            </button>
+                            <pre style={{ textAlign: "left" }}>
+                                {JSON.stringify(oidcTokens.decodedIdToken, null, 2)}
+                            </pre>
+                        </>
+                    )
+                    :
+                    (
+                        <button
+                            onClick={() => login({
                                 doesCurrentHrefRequiresAuth: false,
                                 //extraQueryParams: { kc_idp_hint: "google" }
-                            })}>
+                            })}
+                        >
                             Login
                         </button>
+                    )
                 }
                 <img src={logo} className="App-logo" alt="logo" />
                 <img src={myimg} alt="test_image" />
@@ -79,67 +61,3 @@ function ContextualizedApp() {
 
 }
 
-function AuthenticatedRoute(props: { logout: () => void; }) {
-
-    const { logout } = props;
-
-    const { user } = useUser();
-
-    return (
-        <>
-            <h1>Hello {user.name} !</h1>
-            <a href={buildAccountUrl({ locale: "en" })}>Link to your Keycloak account</a>
-            <button onClick={logout}>Logout</button>
-            <pre style={{ textAlign: "left" }}>{JSON.stringify(user, null, 2)}</pre>
-        </>
-    );
-
-}
-
-function useUser() {
-    const { oidc } = useOidc();
-
-    assert(oidc.isUserLoggedIn, "This hook can only be used when the user is logged in");
-
-    const { idToken } = oidc.getTokens();
-
-    const user = useMemo(
-        () =>
-            decodeJwt<{
-                // Use https://jwt.io/ to tell what's in your idToken
-                // It will depend of your Keycloak configuration.
-                // Here I declare only two field on the type but actually there are
-                // Many more things available. 
-                sub: string;
-                name: string;
-                preferred_username: string;
-                // This is a custom attribute set up in our Keycloak configuration
-                // it's not present by default. 
-                // See https://docs.keycloakify.dev/realtime-input-validation#getting-your-custom-user-attribute-to-be-included-in-the-jwt
-                favorite_pet: "cat" | "dog" | "bird";
-            }>(idToken),
-        [idToken]
-    );
-
-    return { user };
-}
-
-function buildAccountUrl(
-    params: {
-        locale: string;
-    }
-){
-    const { locale } = params;
-
-    const accountUrl = new URL(`${keycloakUrl}/realms/${keycloakRealm}/account`);
-
-    const searchParams = new URLSearchParams();
-
-    searchParams.append("kc_locale", locale);
-    searchParams.append("referrer", keycloakClientId);
-    searchParams.append("referrer_uri", window.location.href);
-
-    accountUrl.search = searchParams.toString();
-
-    return accountUrl.toString();
-}