Update Keycloakify and setup referrerURI for account

This commit is contained in:
garronej 2023-04-20 04:41:29 +02:00
parent aaaaed6c00
commit a4276bfd68
2 changed files with 29 additions and 4 deletions

View file

@ -37,8 +37,8 @@
"evt": "^2.4.15", "evt": "^2.4.15",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"keycloak-js": "^21.0.1", "keycloak-js": "^21.0.1",
"keycloakify": "7.9.0-rc.0", "keycloakify": "^7.9.2",
"powerhooks": "^0.26.7", "powerhooks": "^0.26.8",
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"tsafe": "^1.6.0" "tsafe": "^1.6.0"

View file

@ -4,16 +4,18 @@ import myimg from "./myimg.png";
import { createOidcClientProvider, useOidcClient } from "./oidc"; import { createOidcClientProvider, useOidcClient } from "./oidc";
import { addFooToQueryParams, addBarToQueryParams } from "../keycloak-theme/login/valuesTransferredOverUrl"; import { addFooToQueryParams, addBarToQueryParams } from "../keycloak-theme/login/valuesTransferredOverUrl";
import jwt_decode from "jwt-decode"; import jwt_decode from "jwt-decode";
import { addParamToUrl } from "powerhooks/tools/urlSearchParams";
//On older Keycloak version you need the /auth (e.g: http://localhost:8080/auth) //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 ) //On newer version you must remove it (e.g: http://localhost:8080 )
const keycloakUrl = "https://auth.code.gouv.fr/auth"; const keycloakUrl = "https://auth.code.gouv.fr/auth";
const keycloakRealm = "keycloakify"; const keycloakRealm = "keycloakify";
const keycloakClient= "starter";
const { OidcClientProvider } = createOidcClientProvider({ const { OidcClientProvider } = createOidcClientProvider({
url: keycloakUrl, url: keycloakUrl,
realm: keycloakRealm, realm: keycloakRealm,
clientId: "starter", clientId: keycloakClient,
//This function will be called just before redirecting, //This function will be called just before redirecting,
//it should return the current langue. //it should return the current langue.
//kcContext.locale.currentLanguageTag will be what this function returned just before redirecting. //kcContext.locale.currentLanguageTag will be what this function returned just before redirecting.
@ -40,6 +42,29 @@ function ContextualizedApp() {
const { oidcClient } = useOidcClient(); 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.url.referrerUri
// see: https://technology.first8.nl/add-manage-account-link-keycloak-redhat-sso/
accountUrl = addParamToUrl({
"url": accountUrl,
"name": "referrer",
"value": keycloakClient
}).newUrl;
accountUrl = addParamToUrl({
"url": accountUrl,
"name": "referrer_uri",
"value": window.location.href
}).newUrl;
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
@ -48,7 +73,7 @@ function ContextualizedApp() {
<> <>
<h1>You are authenticated !</h1> <h1>You are authenticated !</h1>
{/* On older Keycloak version its /auth/realms instead of /realms */} {/* On older Keycloak version its /auth/realms instead of /realms */}
<a href={`${keycloakUrl}/realms/${keycloakRealm}/account`} target="_blank" rel="noreferrer">Link to your Keycloak account</a> <a href={accountUrl} target="_blank" rel="noreferrer">Link to your Keycloak account</a>
<pre style={{ textAlign: "left" }}>{JSON.stringify(jwt_decode(oidcClient.getAccessToken()), null, 2)}</pre> <pre style={{ textAlign: "left" }}>{JSON.stringify(jwt_decode(oidcClient.getAccessToken()), null, 2)}</pre>
<button onClick={() => oidcClient.logout({ redirectTo: "home" })}>Logout</button> <button onClick={() => oidcClient.logout({ redirectTo: "home" })}>Logout</button>
</> </>