This example app shows how to build a Photo Gallery with Spring Boot, React, and JHipster.
Please read Build a Photo Gallery PWA with React, Spring Boot, and JHipster to see how this app was created. You can also watch a screencast on YouTube.
Prerequisites: Java 8, Node.js, and Yarn.
Okta 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.
To install this example application, run the following commands:
git clone https://github.com/oktadeveloper/okta-react-photo-gallery-example.git photo-gallery
cd photo-gallery
This will get a copy of the project installed locally. To install all of its dependencies and start the app, run the commands below.
yarn
yarn webpack:build
./mvnw
To log in to your app, you'll need to have Keycloak up and running. JHipster ships with a Docker container that has the default users and roles. Start Keycloak using the following command.
docker-compose -f src/main/docker/keycloak.yml up
The security settings in src/main/resources/config/application.yml
are configured for this image.
security:
basic:
enabled: false
oauth2:
client:
accessTokenUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/token
userAuthorizationUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/auth
clientId: web_app
clientSecret: web_app
scope: openid profile email
resource:
userInfoUri: http://localhost:9080/auth/realms/jhipster/protocol/openid-connect/userinfo
To use Okta, you'll need to change a few things. First, you'll need to create a free developer account at https://developer.okta.com/signup/. After doing so, you'll get your own Okta domain, that has a name like https://dev-123456.oktapreview.com
.
Modify src/main/resources/application.yml
to use your Okta settings.
security:
basic:
enabled: false
oauth2:
client:
accessTokenUri: https://{yourOktaDomain}/oauth2/default/v1/token
userAuthorizationUri: https://{yourOktaDomain}/oauth2/default/v1/authorize
clientId: {clientId}
clientSecret: {clientSecret}
scope: openid profile email
resource:
userInfoUri: https://{yourOktaDomain}/oauth2/default/v1/userinfo
Create 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 > 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.
Create a ROLE_ADMIN
and ROLE_USER
group and add users into them. Create a user (e.g., "[email protected]" 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
.
Navigate to API > 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 .*
.
After making these changes, you should be good to go!
This example uses the following open source libraries:
Please post any questions as comments on the blog post, or visit our Okta Developer Forums. You can also email [email protected] if would like to create a support ticket.
This application was generated using JHipster 5.0.1, you can find documentation and help at https://www.jhipster.tech/documentation-archive/v5.0.1.
Apache 2.0, see LICENSE.