This example app shows how to create a Spring Boot API and CRUD (create, read, update, and delete) its data with a React app.
Please read Use React and Spring Boot to Build a Simple CRUD App to see how this app was created.
Prerequisites: Java 17 and Node.js 16+
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/oktadev/okta-spring-boot-react-crud-example.git spring-react
cd spring-react
This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.
To run the server, run:
./mvnw spring-boot:run
To run the client, cd into the app
folder and run:
npm i && npm start
Before you begin, you'll need a free Okta developer account. Install the Okta CLI and run okta register
to sign up for a new account. If you already have an account, run okta login
.
Then, run okta apps create
. Select the default app name, or change it as you see fit. Choose Web and press Enter.
Select Okta Spring Boot Starter. Accept the default Redirect URI of http://localhost:8080/login/oauth2/code/okta
and use http://localhost:3000,http://localhost:8080
for the Logout Redirect URI.
The Okta CLI will create an OIDC Web App in your Okta Org. It will add the redirect URIs you specified and grant access to the Everyone
group. You will see output like the following when it's finished:
Okta application configuration has been written to:
/path/to/app/src/main/resources/application.properties
Open src/main/resources/application.properties
to see the issuer and credentials for your app.
okta.oauth2.issuer=https://dev-133337.okta.com/oauth2/default
okta.oauth2.client-id=0oab8eb55Kb9jdMIr5d6
okta.oauth2.client-secret=NEVER-SHOW-SECRETS
NOTE: You can also use the Okta Admin Console to create your app. See Create a Spring Boot App for more information.
Run ./mvnw spring-boot:run -Pprod
and log in to your app at http://localhost:8080
.
If you'd rather use Auth0, that's possible too! First, you'll need to checkout the auth0
branch of this repository.
git clone -b auth0 https://github.com/oktadev/okta-spring-boot-react-crud-example.git spring-react
cd spring-react
Then, install the Auth0 CLI and run auth0 login
in a terminal.
Next, run auth0 apps create
, provide a memorable name, and select Regular Web Application. Specify http://localhost:8080/login/oauth2/code/auth0
for the Callback URLs and http://localhost:3000,http://localhost:8080
for the Allowed Logout URLs.
Modify your src/main/resources/application.properties
to include your Auth0 issuer, client ID, and client secret. You will have run auth0 apps open
and select the app you created to copy your client secret.
# make sure to include the trailing slash for the Auth0 issuer
spring.security.oauth2.client.provider.auth0.issuer-uri=https://<your-auth0-domain>/
spring.security.oauth2.client.registration.auth0.client-id=<your-client-id>
spring.security.oauth2.client.registration.auth0.client-secret=<your-client-secret>
spring.security.oauth2.client.registration.auth0.scope=openid,profile,email
NOTE: You can also use your Auth0 dashboard to configure your application. Just make sure to use the same URLs specified above.
Run ./mvnw spring-boot:run -Pprod
and log in to your app at http://localhost:8080
.
This example uses the following open source libraries:
Please post any questions as comments on the blog post, or visit our Okta Developer Forums.
Apache 2.0, see LICENSE.