This example app shows you how to build a Vaadin Fusion and Spring Boot 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.
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: Vaadin Fusion
- 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
pom.xml
Vaadin Spring Boot starter with the following added dependencies:
- okta-spring-boot-starter
- lombok
SecurityConfiguration.java
Enables Spring Security and lets Vaadin endpoints handle the authorization.
PeopleEndpoint.java
is a Vaadin endpoint that exposes a REST endpoint and generates TS interfaces for accessing it in a type-safe manner.
Note: Vaadin endpoints require authentication by default unless you opt-out by adding a @AnonymousAllowed
annotation to the class or metod.
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.
This example uses the following libraries:
- Spring Boot
- Vaadin 17
- TypeScript-based LitElement views
- Okta Auth JS SDK
- Okta Spring Boot Starter
Please post any questions as comments on the blog post or visit our Okta Developer Forums.
Apache 2.0, see LICENSE.