{"id":20307286,"url":"https://github.com/oktadev/okta-react-photo-gallery-example","last_synced_at":"2025-04-11T15:10:45.781Z","repository":{"id":40950351,"uuid":"137120156","full_name":"oktadev/okta-react-photo-gallery-example","owner":"oktadev","description":"A Photo Gallery Example with React, Spring Boot, and JHipster 5 + Auth by Okta","archived":false,"fork":false,"pushed_at":"2023-04-10T21:54:23.000Z","size":1850,"stargazers_count":24,"open_issues_count":6,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-25T11:11:35.776Z","etag":null,"topics":["java","jhipster","reactjs","spring-boot","typescript"],"latest_commit_sha":null,"homepage":"https://developer.okta.com/blog/2018/06/25/react-spring-boot-photo-gallery-pwa","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oktadev.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}},"created_at":"2018-06-12T19:48:04.000Z","updated_at":"2024-10-25T13:00:23.000Z","dependencies_parsed_at":"2023-01-25T15:00:56.845Z","dependency_job_id":null,"html_url":"https://github.com/oktadev/okta-react-photo-gallery-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-react-photo-gallery-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-react-photo-gallery-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-react-photo-gallery-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oktadev%2Fokta-react-photo-gallery-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oktadev","download_url":"https://codeload.github.com/oktadev/okta-react-photo-gallery-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429107,"owners_count":21101783,"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":["java","jhipster","reactjs","spring-boot","typescript"],"created_at":"2024-11-14T17:17:04.210Z","updated_at":"2025-04-11T15:10:45.762Z","avatar_url":"https://github.com/oktadev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Photo Gallery with React, Spring Boot, and JHipster\n \nThis example app shows how to build a Photo Gallery with [Spring Boot](https://spring.io/projects/spring-boot), [React](https://reactjs.org/), and [JHipster](https://www.jhipster.tech).\n\nPlease read [Build a Photo Gallery PWA with React, Spring Boot, and JHipster](https://developer.okta.com/blog/2018/06/25/react-spring-boot-photo-gallery-pwa) to see how this app was created. You can also [watch a screencast on YouTube](https://youtu.be/GlJWUqy1SJM).\n\n**Prerequisites:** [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html), [Node.js](https://nodejs.org/), and [Yarn](https://yarnpkg.org/).\n\n\u003e [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage, and secure users and roles in any application.\n\n* [Getting Started](#getting-started)\n* [Links](#links)\n* [Help](#help)\n* [License](#license)\n\n## Getting Started\n\nTo install this example application, run the following commands:\n\n```bash\ngit clone https://github.com/oktadeveloper/okta-react-photo-gallery-example.git photo-gallery\ncd photo-gallery\n```\n\nThis will get a copy of the project installed locally. To install all of its dependencies and start the app, run the commands below.\n\n```\nyarn\nyarn webpack:build\n./mvnw\n```\n\nTo log in to your app, you'll need to have [Keycloak](https://keycloak.org) up and running. JHipster ships with a Docker container 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/config/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            scope: openid profile email\n        resource:\n            userInfoUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/userinfo\n```\n\n### Setup Okta\n\nTo use Okta, 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}/oauth2/default/v1/token\n            userAuthorizationUri: https://{yourOktaDomain}/oauth2/default/v1/authorize\n            clientId: {clientId}\n            clientSecret: {clientSecret}\n            scope: openid profile email\n        resource:\n            userInfoUri: https://{yourOktaDomain}/oauth2/default/v1/userinfo\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 2018!\"). 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 \"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!\n\n## Links\n\nThis example uses the following open source libraries:\n\n* [JHipster](https://www.jhipster.tech/)\n* [Metadata Extractor](https://github.com/drewnoakes/metadata-extractor)\n* [React](https://reactjs.org/)\n* [React Photo Gallery](https://github.com/neptunian/react-photo-gallery)\n* [Spring Boot](https://spring.io/projects/spring-boot)\n\n## Help\n\nPlease post any questions as comments on the [blog post](https://developer.okta.com/blog/2018/06/25/react-spring-boot-photo-gallery-pwa), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email developers@okta.com if would like to create a support ticket.\n\nThis application was generated using JHipster 5.0.1, you can find documentation and help at [https://www.jhipster.tech/documentation-archive/v5.0.1](https://www.jhipster.tech/documentation-archive/v5.0.1).\n\n## License\n\nApache 2.0, see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-react-photo-gallery-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foktadev%2Fokta-react-photo-gallery-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foktadev%2Fokta-react-photo-gallery-example/lists"}