This example app shows you how to create a slick-looking, full-stack, secure application using React, Spring Boot, and JHipster.

Please read the following blog posts to learn more:

• Full Stack Java with React, Spring Boot, and JHipster to see how this app was created.
• Introducing Spring Native for JHipster: Serverless Full-Stack Made Easy to convert this app to an executable with Spring Native.
• Use GitHub Actions to Build GraalVM Native Images to automate your GraalVM builds.

Prerequisites:

• Node.js 14+
• Java 11+
• Docker Compose
• An Auth0 Account

Auth0 is an easy to implement, adaptable authentication and authorization platform. Basically, we make your login box awesome.

• Getting Started
• Links
• Help
• License

To install this example, clone it.

git clone https://github.com/oktadev/auth0-full-stack-java-example.git
cd auth0-full-stack-java-example

Create a .auth0.env file in the root of the project, and fill it with the code below to override the default OIDC settings:

export SPRING_SECURITY_OAUTH2_CLIENT_PROVIDER_OIDC_ISSUER_URI=https://<your-auth0-domain>/
export SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_ID=<your-client-id>
export SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_SECRET=<your-client-secret>
export JHIPSTER_SECURITY_OAUTH2_AUDIENCE=https://<your-auth0-domain>/api/v2/

You'll need to create a new web application in Auth0 and fill in the <...> placeholders before this works.

Log in to your Auth0 account (or sign up if you don't have an account). You should have a unique domain like dev-xxx.eu.auth0.com.

Press the Create Application button in Applications section. Use a name like JHipster Baby!, select Regular Web Applications, and click Create.

Switch to the Settings tab and configure your application settings:

• Allowed Callback URLs: http://localhost:8080/login/oauth2/code/oidc
• Allowed Logout URLs: http://localhost:8080/

Scroll to the bottom and click Save Changes.

In the roles section, create new roles named ROLE_ADMIN and ROLE_USER.

Create a new user account in the users section. Click on the Role tab to assign the roles you just created to the new account.

Make sure your new user's email is verified before attempting to log in!

Next, head to Auth Pipeline > Rules > Create. Select the Empty rule template. Provide a meaningful name like Group claims and replace the Script content with the following.

function(user, context, callback) {
  user.preferred_username = user.email;
  const roles = (context.authorization || {}).roles;

  function prepareCustomClaimKey(claim) {
    return `https://www.jhipster.tech/${claim}`;
  }

  const rolesClaim = prepareCustomClaimKey('roles');

  if (context.idToken) {
    context.idToken[rolesClaim] = roles;
  }

  if (context.accessToken) {
    context.accessToken[rolesClaim] = roles;
  }

  callback(null, user, context);
}

This code is adding the user's roles to a custom claim (prefixed with https://www.jhipster.tech/roles). This claim is mapped to Spring Security authorities in SecurityUtils.java.

Click Save changes to continue.

NOTE: Want to have all these steps automated for you? Vote for this issue in the Auth0 CLI project.

Set your Auth0 properties in .auth0.env, and start the app.

source .auth0.env
./mvnw

Voilà - your full stack app is using Auth0! Open your favorite browser to http://localhost:8080 and sign-in.

This example uses the following open source libraries:

• JHipster
• Spring Boot
• Spring Security

Please post any questions as comments on the blog post.

Apache 2.0, see LICENSE.