Migrate to oidc-spa v3
This commit is contained in:
Joseph Garrone
parent
19a4287827
commit
fc4f32ae13
|
|
@ -220,4 +220,4 @@ jobs:
|
||||||
EOF
|
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.
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,13 @@
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"evt": "^2.4.15",
|
"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",
|
"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",
|
||||||
|
"zod": "^3.22.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^15.3.1",
|
"@types/node": "^15.3.1",
|
||||||
|
|
|
||||||
140
src/App/App.tsx
140
src/App/App.tsx
|
|
@ -1,44 +1,7 @@
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import logo from "./logo.svg";
|
import logo from "./logo.svg";
|
||||||
import myimg from "./myimg.png";
|
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() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -48,25 +11,44 @@ export default function App() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function ContextualizedApp() {
|
function ContextualizedApp() {
|
||||||
|
|
||||||
const { oidc } = useOidc();
|
const { isUserLoggedIn, login, logout, oidcTokens } = useOidc();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header className="App-header">
|
<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={() => logout({ redirectTo: "home" })}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
<pre style={{ textAlign: "left" }}>
|
||||||
|
{JSON.stringify(oidcTokens.decodedIdToken, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
:
|
||||||
|
(
|
||||||
<button
|
<button
|
||||||
onClick={() => oidc.login({
|
onClick={() => login({
|
||||||
doesCurrentHrefRequiresAuth: false,
|
doesCurrentHrefRequiresAuth: false,
|
||||||
//extraQueryParams: { kc_idp_hint: "google" }
|
//extraQueryParams: { kc_idp_hint: "google" }
|
||||||
})}>
|
})}
|
||||||
Login
|
>
|
||||||
|
Login
|
||||||
</button>
|
</button>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
<img src={myimg} alt="test_image" />
|
<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();
|
|
||||||
}
|
|
||||||
63
src/App/oidc.ts
Normal file
63
src/App/oidc.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
// See documentation of oidc-spa for more details:
|
||||||
|
// https://docs.oidc-spa.dev
|
||||||
|
|
||||||
|
import { createOidcProvider, createUseOidc } from "oidc-spa/react";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
//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";
|
||||||
|
|
||||||
|
export 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"
|
||||||
|
}),
|
||||||
|
publicUrl: process.env.PUBLIC_URL
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { useOidc } = createUseOidc({
|
||||||
|
decodedIdTokenSchema: z.object({
|
||||||
|
// 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: z.string(),
|
||||||
|
name: z.string(),
|
||||||
|
preferred_username: z.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: z.union([z.literal("cat"), z.literal("dog"), z.literal("bird")])
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
export function getKeycloakAccountUrl(
|
||||||
|
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();
|
||||||
|
}
|
||||||
21
yarn.lock
21
yarn.lock
|
|
@ -9760,10 +9760,10 @@ jwt-decode@^3.1.2:
|
||||||
resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
|
resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
|
||||||
integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
|
integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
|
||||||
|
|
||||||
keycloakify@^9.1.4:
|
keycloakify@^9.1.6:
|
||||||
version "9.1.4"
|
version "9.1.6"
|
||||||
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-9.1.4.tgz#87c864e3ca12e3b0872cbd7ca1b8a0cebbab622d"
|
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-9.1.6.tgz#2d7a633e7727c44afaeec6b2ef98956540097db4"
|
||||||
integrity sha512-jb8r2pkAk2gyhieS106ytQbz8ygSRA1uETYE3s5uHYRF08ERMvDgwSbIDMFvleWYnd5saXXhEjL/4wPFXBUDLQ==
|
integrity sha512-OXmW47gGtrtBVolYi/VqMOAxHEAl0tnm1sWaVxFBJQHxAMgX7soV8tTF/fvPwEQpi+BshBQe+wgCXCVfqzKgkA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/generator" "^7.22.9"
|
"@babel/generator" "^7.22.9"
|
||||||
"@babel/parser" "^7.22.7"
|
"@babel/parser" "^7.22.7"
|
||||||
|
|
@ -10917,10 +10917,10 @@ oidc-client-ts@^2.3.0:
|
||||||
crypto-js "^4.1.1"
|
crypto-js "^4.1.1"
|
||||||
jwt-decode "^3.1.2"
|
jwt-decode "^3.1.2"
|
||||||
|
|
||||||
oidc-spa@^2.2.0:
|
oidc-spa@^3.0.3:
|
||||||
version "2.2.0"
|
version "3.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-2.2.0.tgz#7b8f6a149e5320d6a5275183a2026266916cbf9a"
|
resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-3.0.3.tgz#01e524064e91615e3f2c6d6c906234fc13351787"
|
||||||
integrity sha512-aOVMktCS2gQC+5T2OIu446dRHgzz69Ezec0MfxYS3G1uP21wSr/1z3a5r3fFDcoxNAc3fOKesETbztKezFDd5w==
|
integrity sha512-yoAQHaTPw0Eb3AYLQ1ODuCfO0iboUv3agnz45QSm0LWG9o6+9mtN6g71XljrSIPR/G5g4rLria4Ke+Rq/LoJZg==
|
||||||
dependencies:
|
dependencies:
|
||||||
jwt-decode "^3.1.2"
|
jwt-decode "^3.1.2"
|
||||||
oidc-client-ts "^2.3.0"
|
oidc-client-ts "^2.3.0"
|
||||||
|
|
@ -15555,6 +15555,11 @@ zod@^3.17.10:
|
||||||
resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
|
resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
|
||||||
integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
|
integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
|
||||||
|
|
||||||
|
zod@^3.22.4:
|
||||||
|
version "3.22.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
|
||||||
|
integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
|
||||||
|
|
||||||
zwitch@^1.0.0:
|
zwitch@^1.0.0:
|
||||||
version "1.0.5"
|
version "1.0.5"
|
||||||
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
|
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue