diff --git a/index.html b/index.html index c836a3d..fc452ec 100644 --- a/index.html +++ b/index.html @@ -9,17 +9,17 @@ It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%/favicon.ico" will + Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%favicon.ico" will work correctly both with client-side routing and a non-root public URL. --> - + Keycloakify starter - - - - + + + + diff --git a/package.json b/package.json index 69a3a99..0f0a2d6 100755 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "type": "git", "url": "git://github.com/codegouvfr/keycloakify-starter.git" }, + "type": "module", "scripts": { "postinstall": "copy-keycloak-resources-to-public", "dev": "vite", @@ -43,6 +44,7 @@ "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.0.8", - "vite-plugin-commonjs": "^0.10.1" + "vite-plugin-commonjs": "^0.10.1", + "@storybook/react": "^7.6.10" } } diff --git a/src/App/oidc.ts b/src/App/oidc.ts index 97cb66b..dcfdc16 100644 --- a/src/App/oidc.ts +++ b/src/App/oidc.ts @@ -22,7 +22,7 @@ export const { OidcProvider, useOidc } = createReactOidc({ "ui_locales": "en", "my_custom_param": "value of foo transferred to login page" }), - publicUrl: process.env.PUBLIC_URL, + publicUrl: import.meta.env.BASE_URL, decodedIdTokenSchema: z.object({ // Use https://jwt.io/ to tell what's in your idToken // It will depend of your Keycloak configuration. diff --git a/src/BASE_URL.ts b/src/BASE_URL.ts index b03cbb9..35e99f9 100644 --- a/src/BASE_URL.ts +++ b/src/BASE_URL.ts @@ -1,6 +1,6 @@ -import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext"; -import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext"; +import { kcContext as kcLoginThemeContext } from "./keycloak-theme/login/kcContext"; +import { kcContext as kcAccountThemeContext } from "./keycloak-theme/login/kcContext"; /** * If you need to use import.meta.env.BASE_URL, use this variable instead. @@ -24,7 +24,7 @@ export const BASE_URL = (()=>{ })(); - return (kcContext === undefined || process.env.NODE_ENV === "development") + return (kcContext === undefined || import.meta.env.MODE === 'development') ? import.meta.env.BASE_URL : `${kcContext.url.resourcesPath}/build`; diff --git a/src/keycloak-theme/login/Template.tsx b/src/keycloak-theme/login/Template.tsx index 7af5ad4..1548461 100644 --- a/src/keycloak-theme/login/Template.tsx +++ b/src/keycloak-theme/login/Template.tsx @@ -9,7 +9,7 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import type { KcContext } from "./kcContext"; import type { I18n } from "./i18n"; import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png"; -import { PUBLIC_URL } from "../../PUBLIC_URL"; +import { BASE_URL } from "../../BASE_URL"; export default function Template(props: TemplateProps) { const { @@ -64,7 +64,7 @@ export default function Template(props: TemplateProps) { This is just to show you how it can be done but this is not the best option for importing assets. See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets */} - Keycloakify logo + Keycloakify logo {msg("loginTitleHtml", realm.displayNameHtml)}!!! {/* This is the preferred way to use assets */} Keycloakify logo @@ -77,14 +77,12 @@ export default function Template(props: TemplateProps) {
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} {labelBySupportedLanguageTag[currentLanguageTag]}