A Quick Guide to Security with Vaadin Fusion and Spring Boot

<dependency>
    <groupId>com.okta.spring</groupId>
    <artifactId>okta-spring-boot-starter</artifactId>
    <version>1.4.0</version>
</dependency>

<!-- Only for convenience, not required for using Vaadin or Okta -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

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

package com.example.application;

import com.okta.spring.boot.oauth.Okta;

import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(WebSecurity web) throws Exception {
        // @formatter:off
        web.ignoring()
          .antMatchers(HttpMethod.OPTIONS, "/**")
          .antMatchers("/**/*.{js,html,css,webmanifest}");
        // @formatter:on
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // @formatter:off
        // Vaadin handles CSRF for its endpoints

        http.csrf().ignoringAntMatchers("/connect/**")
            .and()
            .authorizeRequests()
            // allow access to everything, Vaadin will handle security
            .antMatchers("/**").permitAll()
            .and()
            .oauth2ResourceServer().jwt();
        // @formatter:on

        Okta.configureResourceServer401ResponseBody(http);
    }
}

package com.example.application.views.people;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Person {
    private String firstName;
    private String lastName;
}

package com.example.application.views.people;

import com.vaadin.flow.server.connect.Endpoint;

import java.util.ArrayList;
import java.util.List;

@Endpoint
public class PeopleEndpoint {

    // We'll use a simple list to hold data
    private List<Person> people = new ArrayList<>();

    public PeopleEndpoint() {
        // Add one person so we can see that everything works
        people.add(new Person("Jane", "Doe"));
    }

    public List<Person> getPeople() {
        return people;
    }

    public Person adEclipsedPerson(Person person) {
        people.add(person);
        return person;
    }
}

import {
  LitElement,
  html,
  css,
  customElement,
  internalProperty,
} from 'lit-element';
import Person from '../../generated/com/example/application/views/people/Person';

import '@vaadin/vaadin-text-field';
import '@vaadin/vaadin-button';
import { Binder, field } from '@vaadin/form';
import PersonModel from '../../generated/com/example/application/views/people/PersonModel';
import { addPerson, getPeople } from '../../generated/PeopleEndpoint';

@customElement('people-view')
export class PeopleView extends LitElement {
  @internalProperty()
  private people: Person[] = [];
  @internalProperty()
  private message = '';

  // Manages form state, binds inputs to the model
  private binder = new Binder(this, PersonModel);

  render() {
    const { model } = this.binder;

    return html`
     <h1>People</h1>

     <div class="message">${this.message}</div>

     <ul>
       ${this.people.map(
      (person) => html`<li>${person.firstName} ${person.lastName}</li>`
    )}
     </ul>

     <h2>Add new person</h2>
     <div class="form">
       <vaadin-text-field
         label="First Name"
         ...=${field(model.firstName)}
       ></vaadin-text-field>
       <vaadin-text-field
         label="Last Name"
         ...=${field(model.lastName)}
       ></vaadin-text-field>
       <vaadin-button @click=${this.add}>Add</vaadin-button>
     </div>
   `;
  }

  async connectedCallback() {
    super.connectedCallback();
    try {
      this.people = await getPeople();
    } catch (e) {
      this.message = `Failed to get people: ${e.message}.`;
    }
  }

  async add() {
    try {
      const saved = await this.binder.submitTo(addPerson);
      if (saved) {
        this.people = [...this.people, saved];
        this.binder.clear();
      }
    } catch (e) {
      this.message = `Failed to save: ${e.message}.`;
    }
  }

  static styles = css`
   :host {
     display: block;
     padding: var(--lumo-space-m) var(--lumo-space-l);
   }
 `;
}

mvn

npm i @okta/okta-auth-js@4.0.3

import { AccessToken, OktaAuth } from '@okta/okta-auth-js';

const authClient = new OktaAuth({
  issuer: 'https://{yourOktadomain}/oauth2/default', // use your own
  clientId: '{frontend app client id}', // use your own
  redirectUri: window.location.origin + '/callback',
  pkce: true
});

const isAuthenticated = async () => {
  // Checks if there is a current accessToken in the TokenManger.
  return !!(await authClient.tokenManager.get('accessToken'));
};

const signIn = async (username: string, password: string) => {
  const authResult = await authClient.signIn({
    username,
    password,
    scopes: ['openid', 'email', 'profile'],
  });

  if (authResult.status === 'SUCCESS') {
    authClient.token.getWithRedirect({
      sessionToken: authResult.sessionToken,
      responseType: 'id_token',
    });
  }
};

const signOut = () => authClient.signOut();

const handleAuthentication = async () => {
  if (authClient.token.isLoginRedirect()) {
    try {
      const tokenResponse = await authClient.token.parseFromUrl();
      const {accessToken, idToken} = tokenResponse.tokens;
      if (!accessToken || !idToken) return false;

      authClient.tokenManager.add('accessToken', accessToken);
      authClient.tokenManager.add('idToken', idToken);
      return true;
    } catch (err) {
      console.warn(`authClient.token.parseFromUrl() errored: ${err}`);
      return false;
    }
  }
  return false;
};

const getAccessToken = async () => {
  const token = (await authClient.tokenManager.get(
    'accessToken'
  )) as AccessToken;

  return token;
};

export {
  isAuthenticated,
  signIn,
  signOut,
  handleAuthentication,
  getAccessToken,
};

import { Commands, Context, Route, Router } from '@vaadin/router';

import './views/main/main-view';
import './views/login/login-view';
import './views/helloworld/hello-world-view';
import { handleAuthentication, isAuthenticated, signOut } from './auth';

const authGuard = async (context: Context, commands: Commands) => {
  if (!(await isAuthenticated())) {
    // Save requested path
    sessionStorage.setItem('login-redirect-path', context.pathname);
    return commands.redirect('/login');
  }
  return undefined;
};

const routes: Route[] = [
  { path: '/login', component: 'login-view' },
  {
    path: '/callback',
    action: async (_: Context, commands: Commands) => {
      if (await handleAuthentication()) {
        return commands.redirect(
          sessionStorage.getItem('login-redirect-path') || '/'
        );
      } else {
        return commands.redirect('/login?error');
      }
    },
  },
  {
    path: '/logout',
    action: async (_: Context, commands: Commands) => {
      signOut();
      location.reload();
      return commands.prevent();
    },
  },
  {
    path: '',
    component: 'main-view',
    action: authGuard, // Require a logged in user to access
    children: [
      { path: '', component: 'hello-world-view' },
      { path: 'hello', component: 'hello-world-view' },
      {
        path: 'people',
        component: 'people-view',
        action: async () => {
          await import('./views/people/people-view');
        },
      },
    ],
  },
];

export const router = new Router(document.querySelector('#outlet'));
router.setRoutes(routes);

import {
  ConnectClient,
  MiddlewareContext,
  MiddlewareNext,
} from '@vaadin/flow-frontend/Connect';
import { getAccessToken } from './auth';

const client = new ConnectClient({
  prefix: 'connect',
  middlewares: [
    async function addAuthHeaderMiddleware(
      context: MiddlewareContext,
      next: MiddlewareNext
    ) {
      const token = await getAccessToken();
      if (token) {
        context.request.headers.set(
          'Authorization',
          `Bearer ${token.accessToken}`
        );
      }
      return next(context);
    },
  ],
});

export default client;

mvn

<header slot="navbar" theme="dark">
  <vaadin-drawer-toggle></vaadin-drawer-toggle>
  <h1>${this.getSelectedTabName(this.menuTabs)}</h1>
  <img src="images/user.svg" alt="Avatar" />
  <a href="logout" class="logout">Log out</a>
</header>

...
header h1 {
  font-size: var(--lumo-font-size-l);
  margin: 0;
}

header .logout {
  margin-right: 12px;
}
...