diff --git a/README.md b/README.md
index 60ed840..8b8cf65 100644
--- a/README.md
+++ b/README.md
@@ -220,4 +220,4 @@ jobs:
EOF
```
-You can also remove `jwt-decode`, `keycloak-js`, `powerhooks` and `tsafe` from your dependencies.
+You can also remove `oidc-spa`, `powerhooks` and `tsafe` from your dependencies.
diff --git a/package.json b/package.json
index c3969c3..2419387 100755
--- a/package.json
+++ b/package.json
@@ -27,8 +27,7 @@
"keywords": [],
"dependencies": {
"evt": "^2.4.15",
- "jwt-decode": "^3.1.2",
- "keycloak-js": "^21.0.1",
+ "oidc-spa": "^1.0.1",
"keycloakify": "^8.1.3",
"powerhooks": "^0.26.8",
"react": "18.1.0",
diff --git a/src/App/App.tsx b/src/App/App.tsx
index b6146dc..8fd8a10 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,86 +1,69 @@
import "./App.css";
import logo from "./logo.svg";
import myimg from "./myimg.png";
-import { createOidcClientProvider, useOidcClient } from "./oidc";
-import { addFooToQueryParams, addBarToQueryParams } from "../keycloak-theme/login/valuesTransferredOverUrl";
-import jwt_decode from "jwt-decode";
-import { addParamToUrl } from "powerhooks/tools/urlSearchParams";
+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";
//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 keycloakClient= "starter";
+const keycloakClientId= "starter";
-const { OidcClientProvider } = createOidcClientProvider({
- url: keycloakUrl,
- realm: keycloakRealm,
- clientId: keycloakClient,
- //This function will be called just before redirecting,
- //it should return the current langue.
- //kcContext.locale.currentLanguageTag will be what this function returned just before redirecting.
- 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],
- log: console.log
+const { OidcProvider } = createOidcProvider({
+ issuerUri: `${keycloakUrl}/realms/${keycloakRealm}`,
+ clientId: keycloakClientId,
+ transformUrlBeforeRedirect: url => {
+
+ // 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({
+ url,
+ "name": "ui_locales",
+ "value": "en",
+ }).newUrl;
+
+ // If you want to pass some custom state to the login pages...
+ // See in src/keycloak-theme/pages/Login.tsx how it's retrieved.
+ url = addQueryParamToUrl({
+ url,
+ "name": "my_custom_param",
+ "value": "value of foo transferred to login page",
+ }).newUrl;
+
+ return 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() {
return (
-
+
+
);
}
+
function ContextualizedApp() {
- const { oidcClient } = useOidcClient();
-
- let accountUrl = `${keycloakUrl}/realms/${keycloakRealm}/account`;
-
- // Set the language the user will get on the account page
- accountUrl = addParamToUrl({
- url: accountUrl,
- name: "kc_locale",
- value: "en"
- }).newUrl;
-
- // Enable to redirect to the app from the account page we'll get the referrer_uri under kcContext.referrer.url
- // It's useful to avoid hard coding the app url in the keycloak config
- accountUrl = addParamToUrl({
- url: accountUrl,
- name: "referrer",
- value: keycloakClient
- }).newUrl;
-
- accountUrl = addParamToUrl({
- url: accountUrl,
- name: "referrer_uri",
- value: window.location.href
- }).newUrl;
+ const { oidc } = useOidc();
return (
);
+
+}
+
+function AuthenticatedRoute(props: { logout: () => void; }) {
+
+ const { logout } = props;
+
+ const { user } = useUser();
+
+ return (
+ <>
+ Hello {user.name} !
+ Link to your Keycloak account
+ Logout
+ {JSON.stringify(user, null, 2)}
+
+ );
+
+}
+
+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;
+
+ let accountUrl = `${keycloakUrl}/realms/${keycloakRealm}/account`;
+
+ // Set the language the user will get on the account page
+ 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
+ // It's useful to avoid hard coding the app url in the keycloak config
+ accountUrl = addQueryParamToUrl({
+ url: accountUrl,
+ name: "referrer",
+ value: keycloakClientId
+ }).newUrl;
+
+ accountUrl = addQueryParamToUrl({
+ url: accountUrl,
+ name: "referrer_uri",
+ value: window.location.href
+ }).newUrl;
+
+ return accountUrl;
+
}
diff --git a/src/App/oidc.tsx b/src/App/oidc.tsx
deleted file mode 100644
index 44eb9e1..0000000
--- a/src/App/oidc.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { useState, useContext, createContext, useEffect } from "react";
-import Keycloak_js from "keycloak-js";
-import { id } from "tsafe/id";
-import { addParamToUrl } from "powerhooks/tools/urlSearchParams";
-import type { ReturnType } from "tsafe/ReturnType";
-import type { Param0 } from "tsafe/Param0";
-import { assert } from "tsafe/assert";
-import { createKeycloakAdapter } from "keycloakify";
-import jwt_decode from "jwt-decode";
-import { Evt } from "evt";
-
-export declare type OidcClient = OidcClient.LoggedIn | OidcClient.NotLoggedIn;
-
-export declare namespace OidcClient {
- export type NotLoggedIn = {
- isUserLoggedIn: false;
- login: (params: {
- //To prevent infinite loop if the user access a page that requires to
- //be authenticated but cancel (clicks back).
- doesCurrentHrefRequiresAuth: boolean;
- }) => Promise;
- };
-
- export type LoggedIn = {
- isUserLoggedIn: true;
- getAccessToken: () => string;
- logout: (params: { redirectTo: "home" | "current page" }) => Promise;
- //If we have sent a API request to change user's email for example
- //and we want that jwt_decode(oidcClient.getAccessToken()).email be the new email
- //in this case we would call this method...
- updateTokenInfos: () => Promise;
- };
-}
-
-type Params = {
- url: string;
- realm: string;
- clientId: string;
- transformUrlBeforeRedirect?: (url: string) => string;
- getUiLocales?: () => string;
- log?: typeof console.log;
-};
-
-async function createKeycloakOidcClient(params: Params): Promise {
- const {
- url,
- realm,
- clientId,
- transformUrlBeforeRedirect,
- getUiLocales,
- log
- } = params;
-
- const keycloakInstance = new Keycloak_js({ url, realm, clientId });
-
- let redirectMethod: ReturnType<
- Param0["getRedirectMethod"]
- > = "overwrite location.href";
-
- const isAuthenticated = await keycloakInstance
- .init({
- onLoad: "check-sso",
- silentCheckSsoRedirectUri: `${window.location.origin}/silent-sso.html`,
- responseMode: "query",
- checkLoginIframe: false,
- adapter: createKeycloakAdapter({
- transformUrlBeforeRedirect: url =>
- [url]
- .map(transformUrlBeforeRedirect ?? (url => url))
- .map(
- getUiLocales === undefined ?
- (url => url) :
- url =>
- addParamToUrl({
- url,
- "name": "ui_locales",
- "value": getUiLocales()
- }).newUrl
- )
- [0],
- keycloakInstance,
- getRedirectMethod: () => redirectMethod
- })
- })
- .catch((error: Error) => error);
-
- //TODO: Make sure that result is always an object.
- if (isAuthenticated instanceof Error) {
- throw isAuthenticated;
- }
-
- const login: OidcClient.NotLoggedIn["login"] = async ({
- doesCurrentHrefRequiresAuth
- }) => {
- if (doesCurrentHrefRequiresAuth) {
- redirectMethod = "location.replace";
- }
-
- await keycloakInstance.login({ "redirectUri": window.location.href });
-
- return new Promise(() => { });
- };
-
- if (!isAuthenticated) {
- return id({
- "isUserLoggedIn": false,
- login
- });
- }
-
- let currentAccessToken = keycloakInstance.token!;
-
- const oidcClient = id({
- "isUserLoggedIn": true,
- "getAccessToken": () => currentAccessToken,
- "logout": async ({ redirectTo }) => {
- await keycloakInstance.logout({
- "redirectUri": (() => {
- switch (redirectTo) {
- case "current page":
- return window.location.href;
- case "home":
- return window.location.origin;
- }
- })()
- });
-
- return new Promise(() => { });
- },
- "updateTokenInfos": async () => {
- await keycloakInstance.updateToken(-1);
-
- currentAccessToken = keycloakInstance.token!;
- }
- });
-
- (function callee() {
- const msBeforeExpiration = jwt_decode<{ exp: number }>(currentAccessToken)["exp"] * 1000 - Date.now();
-
- setTimeout(async () => {
-
- log?.(`OIDC access token will expire in ${minValiditySecond} seconds, waiting for user activity before renewing`);
-
- await Evt.merge([
- Evt.from(document, "mousemove"),
- Evt.from(document, "keydown")
- ]).waitFor();
-
- log?.("User activity detected. Refreshing access token now");
-
- const error = await keycloakInstance.updateToken(-1).then(
- () => undefined,
- (error: Error) => error
- );
-
- if (error) {
- log?.("Can't refresh OIDC access token, getting a new one");
- //NOTE: Never resolves
- await login({ "doesCurrentHrefRequiresAuth": true });
- }
-
- currentAccessToken = keycloakInstance.token!;
-
- callee();
-
- }, msBeforeExpiration - minValiditySecond * 1000);
- })();
-
- return oidcClient;
-}
-
-const minValiditySecond = 25;
-
-const oidcClientContext = createContext(undefined);
-
-export function createOidcClientProvider(params: Params) {
-
-
- const prOidcClient = createKeycloakOidcClient(params);
-
- function OidcClientProvider(props: { children: React.ReactNode; }) {
-
- const { children } = props;
-
- const [oidcClient, setOidcClient] = useState(undefined);
-
- useEffect(() => {
-
- prOidcClient.then(setOidcClient);
-
- }, []);
-
- if (oidcClient === undefined) {
- return null;
- }
-
- return (
-
- {children}
-
- );
-
- }
-
- return { OidcClientProvider };
-
-}
-
-export function useOidcClient() {
- const oidcClient = useContext(oidcClientContext);
- assert(oidcClient !== undefined);
- return { oidcClient };
-}
diff --git a/src/keycloak-theme/login/KcApp.tsx b/src/keycloak-theme/login/KcApp.tsx
index 120ec1d..683a7c2 100644
--- a/src/keycloak-theme/login/KcApp.tsx
+++ b/src/keycloak-theme/login/KcApp.tsx
@@ -7,10 +7,6 @@ import { useI18n } from "./i18n";
const Template = lazy(() => import("./Template"));
const DefaultTemplate = lazy(() => import("keycloakify/login/Template"));
-// You can uncomment this to see the values passed by the main app before redirecting.
-//import { foo, bar } from "./valuesTransferredOverUrl";
-//console.log(`Values passed by the main app in the URL parameter:`, { foo, bar });
-
const Login = lazy(() => import("./pages/Login"));
// If you can, favor register-user-profile.ftl over register.ftl, see: https://docs.keycloakify.dev/realtime-input-validation
const Register = lazy(() => import("./pages/Register"));
diff --git a/src/keycloak-theme/login/pages/Login.tsx b/src/keycloak-theme/login/pages/Login.tsx
index 1de3f27..abc250b 100644
--- a/src/keycloak-theme/login/pages/Login.tsx
+++ b/src/keycloak-theme/login/pages/Login.tsx
@@ -5,6 +5,17 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n";
+import { retrieveQueryParamFromUrl } from "oidc-spa/tools/urlQueryParams";
+
+const result = retrieveQueryParamFromUrl({
+ "url": window.location.href,
+ "name": "my_custom_param",
+});
+
+if (result.wasPresent) {
+ console.log("my_custom_param", result.value);
+}
+
export default function Login(props: PageProps, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -60,7 +71,7 @@ export default function Login(props: PageProps
{realm.password && (
@@ -71,8 +82,8 @@ export default function Login(props: PageProps