Update oidc-spa

package.json

@@ -27,7 +27,7 @@
     "keywords": [],
     "dependencies": {
         "evt": "^2.4.15",
-        "oidc-spa": "^1.0.1",
+        "oidc-spa": "^2.0.2",
         "keycloakify": "^8.2.1",
         "powerhooks": "^0.26.8",
         "react": "18.1.0",

src/App/App.tsx

@@ -3,7 +3,6 @@ import logo from "./logo.svg";
 import myimg from "./myimg.png";
 import { useMemo } from "react";
 import { createOidcProvider, useOidc } from "oidc-spa/react";
-import { addQueryParamToUrl } from "oidc-spa/tools/urlQueryParams";
 import { decodeJwt } from "oidc-spa";
 import { assert } from "tsafe/assert";
 
@@ -16,31 +15,29 @@ const keycloakClientId= "starter";
 const { OidcProvider } = createOidcProvider({
     issuerUri: `${keycloakUrl}/realms/${keycloakRealm}`,
     clientId: keycloakClientId,
-    transformUrlBeforeRedirect: url => {
+    // 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.  
-        url = addQueryParamToUrl({
+        "ui_locales": "en",
-            url,
+        "my_custom_param": "value of foo transferred to login page"
-            "name": "ui_locales",
+    }),
-            "value": "en",
+    /*
-        }).newUrl;
+     * 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`
-        // If you want to pass some custom state to the login pages...
+     * you don't have to provide this parameter.
-        // See in src/keycloak-theme/pages/Login.tsx how it's retrieved.
+     * On the other end if your site is hosted by navigating to `https://www.example.com/my-app`
-        url = addQueryParamToUrl({
+     * Then you want to set publicUrl to `/my-app`
-            url,
+     *
-            "name": "my_custom_param",
+     * Be mindful that `${window.location.origin}${publicUrl}/silent-sso.html` must return the `silent-sso.html` that
-            "value": "value of foo transferred to login page",
+     * you are supposed to have created in your `public/` directory.
-        }).newUrl;
+     *
-
+     * If your are still using `create-react-app` (like we are for now) you can just set
-        return url;
+     * publicUrl to `process.env.PUBLIC_URL` and don't have to think about it further.
-
+     */
-    },
+    publicUrl: process.env.PUBLIC_URL
-    // Uncomment if your app is not hosted at the origin and update /foo/bar/baz.
-    //silentSsoUrl: `${window.location.origin}/foo/bar/baz/silent-sso.html`,
 });
 
 export default function App() {
@@ -63,7 +60,13 @@ function ContextualizedApp() {
                     oidc.isUserLoggedIn ?
                         <AuthenticatedRoute logout={() => oidc.logout({ redirectTo: "home" })} />
                         :
-                        <button onClick={() => oidc.login({ doesCurrentHrefRequiresAuth: false })}>Login</button>
+                        <button 
+                            onClick={() => oidc.login({ 
+                                doesCurrentHrefRequiresAuth: false,
+                                //extraQueryParams: { kc_idp_hint: "google" }
+                            })}>
+                                Login
+                        </button>
                 }
                 <img src={logo} className="App-logo" alt="logo" />
                 <img src={myimg} alt="test_image" />
@@ -126,32 +129,17 @@ function buildAccountUrl(
         locale: string;
     }
 ){
-
     const { locale } = params;
 
-    let accountUrl = `${keycloakUrl}/realms/${keycloakRealm}/account`;
+    const accountUrl = new URL(`${keycloakUrl}/realms/${keycloakRealm}/account`);
 
-    // Set the language the user will get on the account page
+    const searchParams = new URLSearchParams();
-    accountUrl = addQueryParamToUrl({
-        url: accountUrl,
-        name: "kc_locale",
-        value: locale
-    }).newUrl;
 
-    // Enable to redirect to the app from the account page we'll get the referrer_uri under kcContext.referrer.url
+    searchParams.append("kc_locale", locale);
-    // It's useful to avoid hard coding the app url in the keycloak config
+    searchParams.append("referrer", keycloakClientId);
-    accountUrl = addQueryParamToUrl({
+    searchParams.append("referrer_uri", window.location.href);
-        url: accountUrl,
-        name: "referrer",
-        value: keycloakClientId
-    }).newUrl;
 
-    accountUrl = addQueryParamToUrl({
+    accountUrl.search = searchParams.toString();
-        url: accountUrl,
-        name: "referrer_uri",
-        value: window.location.href
-    }).newUrl;
-
-    return accountUrl;
 
+    return accountUrl.toString();
 }

yarn.lock

@@ -10917,10 +10917,10 @@ oidc-client-ts@^2.3.0:
     crypto-js "^4.1.1"
     jwt-decode "^3.1.2"
 
-oidc-spa@^1.0.1:
+oidc-spa@^2.0.2:
-  version "1.0.1"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-1.0.1.tgz#205a7613def6b7aea9b4c2ad71e952180f8c3dcb"
+  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-2.0.2.tgz#7a6c64f0e92c0f9349742974648627a85865a8b8"
-  integrity sha512-vrd0peFSSHphVNEvS1s76ZR21fQr1tPBuwQLK6MyReMN9r9HA+BfDOFEiYs1Q9nixrecMQVDQsF7nBxQfwSscA==
+  integrity sha512-PILedvHPxy5U1Kwkpukdw5DW3adST/Bo6vZz70o7hwe59kwBVmVATBlAikZlscZn4x5pAeOyWuD1fir0N1WrJg==
   dependencies:
     jwt-decode "^3.1.2"
     oidc-client-ts "^2.3.0"