{"id":25371188,"url":"https://github.com/nucleuscloud/keycloakify","last_synced_at":"2026-04-15T16:02:29.736Z","repository":{"id":224824701,"uuid":"764308270","full_name":"nucleuscloud/keycloakify","owner":"nucleuscloud","description":"Neosync's Keycloak Auth Template","archived":false,"fork":false,"pushed_at":"2025-03-28T16:16:50.000Z","size":1048,"stargazers_count":1,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T17:36:04.584Z","etag":null,"topics":["keycloak","neosync","react","templates"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nucleuscloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-27T21:04:29.000Z","updated_at":"2025-03-28T16:13:49.000Z","dependencies_parsed_at":"2024-06-24T23:52:30.361Z","dependency_job_id":"71bfdd3d-9eec-4eac-9f80-50a038e2b826","html_url":"https://github.com/nucleuscloud/keycloakify","commit_stats":null,"previous_names":["nucleuscloud/keycloakify"],"tags_count":14,"template":false,"template_full_name":"keycloakify/keycloakify-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fkeycloakify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fkeycloakify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fkeycloakify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fkeycloakify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucleuscloud","download_url":"https://codeload.github.com/nucleuscloud/keycloakify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248001320,"owners_count":21031385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["keycloak","neosync","react","templates"],"created_at":"2025-02-15T02:32:47.007Z","updated_at":"2026-04-15T16:02:29.684Z","avatar_url":"https://github.com/nucleuscloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ci\u003eNeosync Cloud Auth Templates based on Keycloakify v9\u003c/i\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003cimg src=\"https://github.com/nucleuscloud/keycloakify/actions/workflows/ci.yaml/badge.svg\"\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n\u003c/p\u003e\n\n# Introduction\n\nThis repo constitutes an easily reusable setup for a Keycloak theme project OR for a Vite SPA React App that generates a\nKeycloak theme that goes along with it.\nIf you are only looking to create a Keycloak theme (and not a Keycloak theme and an App that share the same codebase) there are a lot of things that you can remove from this starter: [Please read this section of the README](#standalone-keycloak-theme).\n\nThis starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-cra).\n\n# Quick start\n\n```bash\ngit clone https://github.com/keycloakify/keycloakify-starter\n\ncd keycloakify-starter\n\nnpm run # install dependencies (it's like npm install)\n\nnpm run storybook # Start Storybook\n               # This is by far the best way to develop your theme\n               # This enable to quickly see your pages in isolation and in different states.\n               # You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx\n               # See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories\n\nnpm run dev # See the Hello World app\n           # Uncomment line 97 of src/keycloak-theme/login/kcContext where it reads: `mockPageId: \"login.ftl\"`, reload https://localhost:3000\n           # You can now see the login.ftl page with the mock data. (Don't forget to comment it back when you're done)\n\n# Install mvn (Maven) if not already done. On mac it's 'brew install maven', on Ubuntu/Debian it's 'sudo apt-get install maven'\n\nnpm run build-keycloak-theme # Actually build the theme (generates the .jar to be imported in Keycloak)\n                          # Read the instruction printed on the console to see how to test\n                          # your theme on a real Keycloak instance.\n\nnpx eject-keycloak-page # Prompt that let you select the pages you want to customize\n                        # This CLI tools is not guaranty to work, you can always copy pase pages\n                        # from the Keycloakify repo.\n                        # After you ejected a page you need to edit the src/keycloak-theme/login(or admin)/KcApp.tsx file\n                        # You need to add a case in the switch for the page you just imported in your project.\n                        # Look how it's done for the Login page and replicate for your new page.\n\nnpx initialize-email-theme # For initializing your email theme\n                           # Note that Keycloakify does not feature React integration for email yet.\n\nnpx download-builtin-keycloak-theme # For downloading the default theme (as a reference)\n                                    # Look for the files in dist_keycloak/src/main/resources/theme/{base,keycloak}\n```\n\n# Theme variant\n\nKeycloakify enables you to create different variant for a single theme.\nThis enable you to have a single jar that embed two or more theme variant.\n\n![Theme variant](https://content.gitbook.com/content/FcBKODbZbNDgm0rc6a9K/blobs/9iKgs2rv2Kfb2pbs4dRz/image.png)\n\nYou can enable this feature by providing multiple theme name in the Keycloakify build option.\n[See documentation](https://docs.keycloakify.dev/build-options#themename)\n\n# The CI workflow\n\n- To release **don't create a tag manually**, the CI do it for you. Just update the `package.json`'s version field and push.\n- The `.jar` files that bundle the Keycloak theme will be attached as an asset with every GitHub release. [Example](https://github.com/InseeFrLab/keycloakify-starter/releases/tag/v0.1.0). The permalink to download the latest version is: `https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme.jar`.\n  For this demo repo it's [here](https://github.com/codegouvfr/keycloakify-starter/releases/latest/download/keycloak-theme.jar)\n- This CI is configured to publish [the app](https://starter.keycloakify.dev) on [GitHub Pages](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L51-L76) and on [DockerHub](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L78-L123) (as a Ngnix based docker image). In practice you probably want one or the other but not both... or neither if you are just building a theme (and not a theme + an app).\n  If you want to enable the CI to publish on DockerHub on your behalf go to repository `Settings` tab, then `Secrets` you will need to add two new secrets:\n  `DOCKERHUB_TOKEN`, you Dockerhub authorization token.\n  `DOCKERHUB_USERNAME`, Your Dockerhub username.\n  We deploy the demo app at [starter.keycloakify.dev](https://starter.keycloakify.dev) using GitHub page on the branch `gh-pages` (you have to enable it).\n  To configure your own domain name update the homepage field of the `package.json` and potentially the `base` option in the `vite.config.ts`.\n  Regarding DNS configuration you can refer to [this documentation](https://docs.gitlanding.dev/using-a-custom-domain-name).\n- The CI publishes the app docker image on DockerHub. `\u003corg\u003e/\u003crepo\u003e:main` for each **commit** on `main`, `\u003corg\u003e/\u003crepo\u003e:\u003cfeature-branch-name\u003e` for each **pull-request** on `main`\n  and when **releasing a new version**: `\u003corg\u003e/\u003crepo\u003e:latest` and `\u003corg\u003e/\u003crepo\u003e:X.Y.Z`\n  [See on DockerHub](https://hub.docker.com/r/codegouvfr/keycloakify-starter)\n\n![image](https://user-images.githubusercontent.com/6702424/229296422-9d522707-114e-4282-93f7-01ca38c3a1e0.png)\n\n![image](https://user-images.githubusercontent.com/6702424/229296556-a69f2dc9-4653-475c-9c89-d53cf33dc05a.png)\n\n# The storybook\n\n![image](https://github.com/keycloakify/keycloakify/assets/6702424/a18ac1ff-dcfd-4b8c-baed-dcda5aa1d762)\n\n```bash\nnpm run\nnpm run storybook\n```\n\n# Docker\n\nInstructions for building and running the react app (`src/App`) that is collocated with our Keycloak theme.\n\n```bash\ndocker build -f Dockerfile -t keycloakify/keycloakify-starter:main .\ndocker run -it -dp 8083:80 keycloakify/keycloakify-starter:main\n# You can access the app at http://localhost:8083\n```\n\n# I only want a Keycloak theme\n\nIf you are only looking to create a Keycloak theme and not a Theme + a React app, you can run theses few commands to refactor the template\nand remove unnecessary files.\n\n```bash\ncd path/to/keycloakify-starter\nrm -r src/App\nmv src/keycloak-theme/* src/\nrm -r src/keycloak-theme\n\ncat \u003c\u003c EOF \u003e src/main.tsx\nimport { createRoot } from \"react-dom/client\";\nimport { StrictMode, lazy, Suspense } from \"react\";\nimport { kcContext as kcLoginThemeContext } from \"./login/kcContext\";\nimport { kcContext as kcAccountThemeContext } from \"./account/kcContext\";\n\nconst KcLoginThemeApp = lazy(() =\u003e import(\"./login/KcApp\"));\nconst KcAccountThemeApp = lazy(() =\u003e import(\"./account/KcApp\"));\n\ncreateRoot(document.getElementById(\"root\")!).render(\n    \u003cStrictMode\u003e\n        \u003cSuspense\u003e\n            {(()=\u003e{\n\n                if( kcLoginThemeContext !== undefined ){\n                    return \u003cKcLoginThemeApp kcContext={kcLoginThemeContext} /\u003e;\n                }\n\n                if( kcAccountThemeContext !== undefined ){\n                    return \u003cKcAccountThemeApp kcContext={kcAccountThemeContext} /\u003e;\n                }\n\n                throw new Error(\n                  \"This app is a Keycloak theme\" +\n                  \"It isn't meant to be deployed outside of Keycloak\"\n                );\n\n            })()}\n        \u003c/Suspense\u003e\n    \u003c/StrictMode\u003e\n);\n\nEOF\n\nrm .dockerignore Dockerfile nginx.conf\n\ncat \u003c\u003c EOF \u003e .github/workflows/ci.yaml\nname: ci\non:\n  push:\n    branches:\n      - main\n  pull_request:\n    branches:\n      - main\n\njobs:\n\n  test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v2\n    - uses: actions/setup-node@v2\n    - uses: bahmutov/npm-install@v1\n    - run: npm run build\n    - run: npx keycloakify\n\n  check_if_version_upgraded:\n    name: Check if version upgrade\n    if: github.event_name == 'push'\n    runs-on: ubuntu-latest\n    needs: test\n    outputs:\n      from_version: \\${{ steps.step1.outputs.from_version }}\n      to_version: \\${{ steps.step1.outputs.to_version }}\n      is_upgraded_version: \\${{ steps.step1.outputs.is_upgraded_version }}\n    steps:\n    - uses: garronej/ts-ci@v2.1.0\n      id: step1\n      with:\n        action_name: is_package_json_version_upgraded\n        branch: \\${{ github.head_ref || github.ref }}\n\n  create_github_release:\n    runs-on: ubuntu-latest\n    needs: check_if_version_upgraded\n    # We create a release only if the version have been upgraded and we are on a default branch\n    if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' \u0026\u0026 github.event_name == 'push'\n    steps:\n    - uses: actions/checkout@v2\n    - uses: actions/setup-node@v2\n    - uses: bahmutov/npm-install@v1\n    - run: npm run build\n    - run: npx keycloakify\n    - run: mv dist_keycloak/target/retrocompat-*.jar retrocompat-keycloak-theme.jar\n    - run: mv dist_keycloak/target/*.jar keycloak-theme.jar\n    - uses: softprops/action-gh-release@v1\n      with:\n        name: Release v\\${{ needs.check_if_version_upgraded.outputs.to_version }}\n        tag_name: v\\${{ needs.check_if_version_upgraded.outputs.to_version }}\n        target_commitish: \\${{ github.head_ref || github.ref }}\n        generate_release_notes: true\n        draft: false\n        files: |\n          retrocompat-keycloak-theme.jar\n          keycloak-theme.jar\n      env:\n        GITHUB_TOKEN: \\${{ secrets.GITHUB_TOKEN }}\n\nEOF\n```\n\nYou can also remove `oidc-spa`, `powerhooks`, `zod` and `tsafe` from your dependencies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleuscloud%2Fkeycloakify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucleuscloud%2Fkeycloakify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleuscloud%2Fkeycloakify/lists"}