platosha / okta-vaadin-fusion-spring-boot-example

Vaadin + Spring Boot Example

Hilla + Okta Example

This example app shows you how to build a Hilla app and add Okta for authentication. Please read A Quick Guide to Security with Vaadin Fusion and Spring Boot to see how it was created.

Prerequisites: Java 11+ and Maven 3.6+.

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.

• Getting Started
• Help
• Links
• License

Getting Started

If you don't have one, create an Okta Developer account. After you've completed the setup process, log in to your account and navigate to Applications > Add Application. Click SPA and Next. On the next page, enter the following values and click Done.

• Name: Hilla Application
• Base URIs: http://localhost:8080
• Login redirect URIs: http://localhost:8080/callback
• Logout redirect URIs: http://localhost:8080
• Grant type allowed: Authorization Code

Copy your issuer into src/main/application.properties:

okta.oauth2.issuer=https://{yourOktaDomain}/oauth2/default

Copy your issuer and client ID into frontend/auth.ts:

const authClient = new OktaAuth({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{yourClientID}',
  redirectUri: 'http://localhost:8080/callback',
  pkce: true,
});

Start the app by running Maven:

mvn

How it works

Back end

pom.xml Hilla Spring Boot starter with the following added dependencies:

• okta-spring-boot-starter
• lombok

SecurityConfiguration.java Enables Spring Security and lets Hilla endpoints handle the authorization.

PeopleEndpoint.java is a Hilla endpoint that exposes a REST endpoint and generates TS interfaces for accessing it in a type-safe manner. Note: Hilla endpoints require authentication by default unless you opt-out by adding a @AnonymousAllowed annotation to the class or metod.

Front end

auth.ts contains the Okta Auth JS configuration. It exposes an API for:

• checking if a user is authenticated
• signing in/out
• handling login redirects
• providing an access token for HTTP requests

index.ts defines the application routes and authentication handling.

• an authGuard action is used to check if the user is authenticated. If not, the path is saved and the user is redirected to /login
• the /callback route has an action that parses the response from the auth server and either redirects to the initially requested route or back to login.

connect-client.ts defines a middleware that adds the access token to all server requests.

login-view.ts has a login form and calls the signIn API that auth.ts exposes.

Links

This example uses the following libraries:

• Spring Boot
• Hilla
• TypeScript-based LitElement views
• Okta Auth JS SDK
• Okta Spring Boot Starter

Help

Please post any questions as comments on the blog post or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.