diff options
| author | 2023-03-04 22:35:19 +0100 | |
|---|---|---|
| committer | 2023-03-04 22:35:19 +0100 | |
| commit | 0169d54eb744fcffabc1a27702e69463389e522f (patch) | |
| tree | bcb0ed787cb201e8ba3b476fc63c00f2addb571d | |
| parent | Better formating (diff) | |
Add more insight
| -rw-r--r-- | src/App/App.tsx | 2 | ||||
| -rw-r--r-- | src/App/oidc.tsx | 32 |
2 files changed, 18 insertions, 16 deletions
diff --git a/src/App/App.tsx b/src/App/App.tsx index a89eb9e..c0f9222 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -43,7 +43,7 @@ function ContextualizedApp() { oidcClient.isUserLoggedIn ? <> <h1>You are authenticated !</h1> - <pre style={{ textAlign: "left" }}>{JSON.stringify(jwt_decode(oidcClient.accessToken), null, 2)}</pre> + <pre style={{ textAlign: "left" }}>{JSON.stringify(jwt_decode(oidcClient.getAccessToken()), null, 2)}</pre> <button onClick={() => oidcClient.logout({ redirectTo: "home" })}>Logout</button> </> : diff --git a/src/App/oidc.tsx b/src/App/oidc.tsx index cedd98a..428acd3 100644 --- a/src/App/oidc.tsx +++ b/src/App/oidc.tsx @@ -1,5 +1,5 @@ import { useState, useContext, createContext, useEffect } from "react"; -import keycloak_js from "keycloak-js"; +import Keycloak_js from "keycloak-js"; import { id } from "tsafe/id"; import { addParamToUrl } from "powerhooks/tools/urlSearchParams"; import type { ReturnType } from "tsafe/ReturnType"; @@ -22,10 +22,12 @@ export declare namespace OidcClient { export type LoggedIn = { isUserLoggedIn: true; - //NOTE: It changes when renewed, don't store it. - accessToken: string; + getAccessToken: ()=> string; logout: (params: { redirectTo: "home" | "current page" }) => Promise<never>; - updateTokenInfo: () => Promise<void>; + //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<void>; }; } @@ -48,7 +50,7 @@ async function createKeycloakOidcClient(params: Params): Promise<OidcClient> { log } = params; - const keycloakInstance = keycloak_js({ url, realm, clientId }); + const keycloakInstance = new Keycloak_js({ url, realm, clientId }); let redirectMethod: ReturnType< Param0<typeof createKeycloakAdapter>["getRedirectMethod"] @@ -100,9 +102,11 @@ async function createKeycloakOidcClient(params: Params): Promise<OidcClient> { }); } + let currentAccessToken= keycloakInstance.token!; + const oidcClient = id<OidcClient.LoggedIn>({ "isUserLoggedIn": true, - "accessToken": keycloakInstance.token!, + "getAccessToken": ()=> currentAccessToken, "logout": async ({ redirectTo }) => { await keycloakInstance.logout({ "redirectUri": (() => { @@ -117,21 +121,19 @@ async function createKeycloakOidcClient(params: Params): Promise<OidcClient> { return new Promise<never>(() => { }); }, - "updateTokenInfo": async () => { + "updateTokenInfos": async () => { await keycloakInstance.updateToken(-1); - oidcClient.accessToken = keycloakInstance.token!; + currentAccessToken = keycloakInstance.token!; } }); (function callee() { - const msBeforeExpiration = - jwt_decode<{ exp: number }>(oidcClient.accessToken)["exp"] * 1000 - Date.now(); + 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` - ); + + log?.(`OIDC access token will expire in ${minValiditySecond} seconds, waiting for user activity before renewing`); await Evt.merge([ Evt.from(document, "mousemove"), @@ -151,9 +153,10 @@ async function createKeycloakOidcClient(params: Params): Promise<OidcClient> { await login({ "doesCurrentHrefRequiresAuth": true }); } - oidcClient.accessToken = keycloakInstance.token!; + currentAccessToken = keycloakInstance.token!; callee(); + }, msBeforeExpiration - minValiditySecond * 1000); })(); @@ -162,7 +165,6 @@ async function createKeycloakOidcClient(params: Params): Promise<OidcClient> { const minValiditySecond = 25; - const oidcClientContext = createContext<OidcClient | undefined>(undefined); export function createOidcClientProvider(params: Params) { |