{"id":15371130,"url":"https://github.com/mraible/jhipster-oidc-example","last_synced_at":"2025-04-15T14:03:10.431Z","repository":{"id":136718602,"uuid":"102912072","full_name":"mraible/jhipster-oidc-example","owner":"mraible","description":"Example of doing OIDC Login with Keycloak and Okta","archived":false,"fork":false,"pushed_at":"2018-04-30T18:07:56.000Z","size":759,"stargazers_count":6,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T20:51:18.665Z","etag":null,"topics":["angular","docker","java","jhipster","keycloak","oauth","oidc","okta","webpack"],"latest_commit_sha":null,"homepage":"https://developer.okta.com/blog/2017/10/20/oidc-with-jhipster","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mraible.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-09-08T23:17:30.000Z","updated_at":"2024-10-08T06:28:19.000Z","dependencies_parsed_at":"2023-07-03T09:01:05.350Z","dependency_job_id":null,"html_url":"https://github.com/mraible/jhipster-oidc-example","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"93eca5c01d369979119f2eebb34fcae1674545b0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mraible%2Fjhipster-oidc-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mraible%2Fjhipster-oidc-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mraible%2Fjhipster-oidc-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mraible%2Fjhipster-oidc-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mraible","download_url":"https://codeload.github.com/mraible/jhipster-oidc-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249085456,"owners_count":21210267,"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":["angular","docker","java","jhipster","keycloak","oauth","oidc","okta","webpack"],"created_at":"2024-10-01T13:45:33.056Z","updated_at":"2025-04-15T14:03:10.410Z","avatar_url":"https://github.com/mraible.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Use OpenID Connect Support with JHipster\n\nSee [Use OpenID Connect Support with JHipster](https://developer.okta.com/blog/2017/10/20/oidc-with-jhipster) to see how this application was created. You can also [watch a screencast](https://www.youtube.com/watch?v=MaqIsQB1yeQ).\n\nThis application was generated using JHipster 4.10.0, you can find documentation and help at [http://www.jhipster.tech/documentation-archive/v4.10.0](http://www.jhipster.tech/documentation-archive/v4.10.0).\n\n## Development\n\nBefore you can build this project, you must install and configure the following dependencies on your machine:\n\n1. [Node.js][]: We use Node to run a development web server and build the project.\n   Depending on your system, you can install Node either from source or as a pre-packaged bundle.\n2. [Yarn][]: We use Yarn to manage Node dependencies.\n   Depending on your system, you can install Yarn either from source or as a pre-packaged bundle.\n\nAfter installing Node, you should be able to run the following command to install development tools.\nYou will only need to run this command when dependencies change in [package.json](package.json).\n\n    yarn install\n\nWe use yarn scripts and [Webpack][] as our build system.\n\n\nRun the following commands in two separate terminals to create a blissful development experience where your browser\nauto-refreshes when files change on your hard drive.\n\n    ./mvnw\n    yarn start\n\n[Yarn][] is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by\nspecifying a newer version in [package.json](package.json). You can also run `yarn update` and `yarn install` to manage dependencies.\nAdd the `help` flag on any command to see how you can use it. For example, `yarn help update`.\n\nThe `yarn run` command will list all of the scripts available to run for this project.\n\n## OAuth 2.0 / OpenID Connect\n\nCongratulations! You've selected an excellent way to secure your JHipster application. If you're not sure what OAuth and OpenID Connect (OIDC) are, please see [What the Heck is OAuth?](https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth)\n\nTo log in to your app, you'll need to have [Keycloak](https://keycloak.org) up and running. The JHipster Team has created a Docker container for you that has the default users and roles. Start Keycloak using the following command.\n\n```\ndocker-compose -f src/main/docker/keycloak.yml up\n```\n\nThe security settings in `src/main/resources/application.yml` are configured for this image.\n\n```yaml\nsecurity:\n    basic:\n        enabled: false\n    oauth2:\n        client:\n            accessTokenUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/token\n            userAuthorizationUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/auth\n            clientId: web_app\n            clientSecret: web_app\n            clientAuthenticationScheme: form\n            scope: openid profile email\n        resource:\n            userInfoUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/userinfo\n            tokenInfoUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/token/introspect\n            preferTokenInfo: false\n```\n\n### Okta\n\nIf you'd like to use Okta instead of Keycloak, you'll need to change a few things. First, you'll need to create a free developer account at \u003chttps://developer.okta.com/signup/\u003e. After doing so, you'll get your own Okta domain, that has a name like `https://dev-123456.oktapreview.com`.\n\nModify `src/main/resources/application.yml` to use your Okta settings.\n\n```yaml\nsecurity:\n    basic:\n        enabled: false\n    oauth2:\n        client:\n            accessTokenUri: https://{yourOktaDomain}.com/oauth2/default/v1/token\n            userAuthorizationUri: https://{yourOktaDomain}.com/oauth2/default/v1/authorize\n            clientId: {clientId}\n            clientSecret: {clientSecret}\n            clientAuthenticationScheme: form\n            scope: openid profile email\n        resource:\n            userInfoUri: https://{yourOktaDomain}.com/oauth2/default/v1/userinfo\n            tokenInfoUri: https://{yourOktaDomain}.com/oauth2/default/v1/introspect\n            preferTokenInfo: false\n```\n\nCreate an OIDC App in Okta to get a `{clientId}` and `{clientSecret}`. To do this, log in to your Okta Developer account and navigate to **Applications** \u003e **Add Application**. Click **Web** and click the **Next** button. Give the app a name you’ll remember, specify \"http://localhost:8080\" as a Base URI, and \"http://localhost:8080/login\" as a Login Redirect URI. Click **Done** and copy the client ID and secret into your `application.yml` file.\n\nCreate a `ROLE_ADMIN` and `ROLE_USER` group and add users into them. Create a user (e.g., \"admin@jhipster.org\" with password \"Java is hip in 2017!\"). Modify e2e tests to use this account when running integration tests. You'll need to change credentials in `src/test/javascript/e2e/account/account.spec.ts` and `src/test/javascript/e2e/admin/administration.spec.ts`.\n\nNavigate to **API** \u003e **Authorization Servers**, click the **Authorization Servers** tab and edit the default one. Click the **Claims** tab and **Add Claim**. Name it \"groups\" or \"roles\", and include it in the ID Token. Set the value type to \"Groups\" and set the filter to be a Regex of `.*`.\n\nAfter making these changes, you should be good to go! If you have any issues, please post them to [Stack Overflow](https://stackoverflow.com/questions/tagged/jhipster). Make sure to tag your question with \"jhipster\" and \"okta\".\n\n### Service workers\n\nService workers are commented by default, to enable them please uncomment the following code.\n\n* The service worker registering script in index.html\n```\n\u003cscript\u003e\n    if ('serviceWorker' in navigator) {\n        navigator.serviceWorker\n        .register('./sw.js')\n        .then(function() { console.log('Service Worker Registered'); });\n    }\n\u003c/script\u003e\n```\n* The copy file option in webpack-common.js\n```js\n{ from: './src/main/webapp/sw.js', to: 'sw.js' },\n```\nNote: Add the respective scripts/assets in `sw.js` that is needed to be cached.\n\n### Managing dependencies\n\nFor example, to add [Leaflet][] library as a runtime dependency of your application, you would run following command:\n\n    yarn add --exact leaflet\n\nTo benefit from TypeScript type definitions from [DefinitelyTyped][] repository in development, you would run following command:\n\n    yarn add --dev --exact @types/leaflet\n\nThen you would import the JS and CSS files specified in library's installation instructions so that [Webpack][] knows about them:\n\nEdit [src/main/webapp/app/vendor.ts](src/main/webapp/app/vendor.ts) file:\n~~~\nimport 'leaflet/dist/leaflet.js';\n~~~\n\nEdit [src/main/webapp/content/css/vendor.css](src/main/webapp/content/css/vendor.css) file:\n~~~\n@import '~leaflet/dist/leaflet.css';\n~~~\n\nNote: there are still few other things remaining to do for Leaflet that we won't detail here.\n\nFor further instructions on how to develop with JHipster, have a look at [Using JHipster in development][].\n\n### Using angular-cli\n\nYou can also use [Angular CLI][] to generate some custom client code.\n\nFor example, the following command:\n\n    ng generate component my-component\n\nwill generate few files:\n\n    create src/main/webapp/app/my-component/my-component.component.html\n    create src/main/webapp/app/my-component/my-component.component.ts\n    update src/main/webapp/app/app.module.ts\n\n\n## Building for production\n\nTo optimize the oidc application for production, run:\n\n    ./mvnw -Pprod clean package\n\nThis will concatenate and minify the client CSS and JavaScript files. It will also modify `index.html` so it references these new files.\nTo ensure everything worked, run:\n\n    java -jar target/*.war\n\nThen navigate to [http://localhost:8080](http://localhost:8080) in your browser.\n\nRefer to [Using JHipster in production][] for more details.\n\n## Testing\n\nTo launch your application's tests, run:\n\n    ./mvnw clean test\n\n### Client tests\n\nUnit tests are run by [Karma][] and written with [Jasmine][]. They're located in [src/test/javascript/](src/test/javascript/) and can be run with:\n\n    yarn test\n\nUI end-to-end tests are powered by [Protractor][], which is built on top of WebDriverJS. They're located in [src/test/javascript/e2e](src/test/javascript/e2e)\nand can be run by starting Spring Boot in one terminal (`./mvnw spring-boot:run`) and running the tests (`yarn run e2e`) in a second one.\n\nFor more information, refer to the [Running tests page][].\n\n## Using Docker to simplify development (optional)\n\nYou can use Docker to improve your JHipster development experience. A number of docker-compose configuration are available in the [src/main/docker](src/main/docker) folder to launch required third party services.\nFor example, to start a postgresql database in a docker container, run:\n\n    docker-compose -f src/main/docker/postgresql.yml up -d\n\nTo stop it and remove the container, run:\n\n    docker-compose -f src/main/docker/postgresql.yml down\n\nYou can also fully dockerize your application and all the services that it depends on.\nTo achieve this, first build a docker image of your app by running:\n\n    ./mvnw package -Pprod dockerfile:build\n\nThen run:\n\n    docker-compose -f src/main/docker/app.yml up -d\n\nFor more information refer to [Using Docker and Docker-Compose][], this page also contains information on the docker-compose sub-generator (`jhipster docker-compose`), which is able to generate docker configurations for one or several JHipster applications.\n\n## Continuous Integration (optional)\n\nTo configure CI for your project, run the ci-cd sub-generator (`jhipster ci-cd`), this will let you generate configuration files for a number of Continuous Integration systems. Consult the [Setting up Continuous Integration][] page for more information.\n\n[JHipster Homepage and latest documentation]: http://www.jhipster.tech\n[JHipster 4.10.0 archive]: http://www.jhipster.tech/documentation-archive/v4.10.0\n\n[Using JHipster in development]: http://www.jhipster.tech/documentation-archive/v4.10.0/development/\n[Using Docker and Docker-Compose]: http://www.jhipster.tech/documentation-archive/v4.10.0/docker-compose\n[Using JHipster in production]: http://www.jhipster.tech/documentation-archive/v4.10.0/production/\n[Running tests page]: http://www.jhipster.tech/documentation-archive/v4.10.0/running-tests/\n[Setting up Continuous Integration]: http://www.jhipster.tech/documentation-archive/v4.10.0/setting-up-ci/\n\n\n[Node.js]: https://nodejs.org/\n[Yarn]: https://yarnpkg.org/\n[Webpack]: https://webpack.github.io/\n[Angular CLI]: https://cli.angular.io/\n[BrowserSync]: http://www.browsersync.io/\n[Karma]: http://karma-runner.github.io/\n[Jasmine]: http://jasmine.github.io/2.0/introduction.html\n[Protractor]: https://angular.github.io/protractor/\n[Leaflet]: http://leafletjs.com/\n[DefinitelyTyped]: http://definitelytyped.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmraible%2Fjhipster-oidc-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmraible%2Fjhipster-oidc-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmraible%2Fjhipster-oidc-example/lists"}