Getting started with User Profile

This guide explains the minimal steps to integrate User Profile in a new application.

Prepare the Application

A new application created on start.vaadin.com can be used as a starting point for this tutorial. Open the site, select an empty project, choose Spring Boot as the framework, and download the generated archive. Extract it, import it into your IDE of choice, and verify the application starts correctly by running the main class.

Add the AppJars Repository

AppJars artifacts are published to the public AppJars Maven repository. Add it to your pom.xml so that Maven can resolve the AppJars dependencies:

<repositories>
    <repository>
        <id>appjars</id>
        <name>AppJars Public Repository</name>
        <url>https://maven.appjars.com</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>

Add the Dependencies

Given that it is a monolithic application, the following dependencies representing the three layers of the appjar must be added:

<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-flow</artifactId>
</dependency>
<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-data-impl</artifactId>
</dependency>
<dependency>
    <groupId>com.appjars</groupId>
    <artifactId>appjars-user-profile-business-impl</artifactId>
</dependency>

After adding them, build the application to confirm that the dependencies are resolved correctly.

Modifying the Main Application Class

The following annotation must be added to the main application class to include the User Profile auto-configuration and its Spring components:

@ComponentScan(basePackageClasses = {UserProfileAutoConfiguration.class, AppJarsAutoConfiguration.class, Application.class})

• @ComponentScan: Instructs Spring to load the beans provided by the appjar as well as the beans of the application itself.

Then inject the RouteConfigurer provided by User Profile and configure the router layout in a @PostConstruct method so that the appjar views share the same layout as the rest of the application:

@Autowired
RouteConfigurer routeConfigurer;

@PostConstruct
public void configure() {
    routeConfigurer.setViewsRouterLayout(MainLayout.class);
}

The import for RouteConfigurer is com.appjars.userprofile.flow.util.RouteConfigurer.

Add the Views to the Navigation

Add the User Profile views to the application's navigation menu. Insert the following snippet at the end of the method createNavigation() in MainLayout, before returning nav:

if (accessChecker.hasAccess(UserProfileView.class)) {
    nav.addItem(new SideNavItem("My Profile", UserProfileView.class, LineAwesomeIcon.USER_CIRCLE.create()));
}
if (accessChecker.hasAccess(ListProfilesView.class)) {
    nav.addItem(new SideNavItem("Profiles", ListProfilesView.class, LineAwesomeIcon.ADDRESS_CARD_SOLID.create()));
}

The imports for the view classes are:

• com.appjars.userprofile.flow.view.UserProfileView
• com.appjars.userprofile.flow.view.ListProfilesView

Configure Application Properties

Add the following properties to application.properties:

spring.jpa.hibernate.ddl-auto=update
spring.jpa.generate-ddl=true
spring.aop.proxy-target-class=false
vaadin.i18n.provider=com.appjars.utils.i18n.AppjarsI18nProvider

The spring.aop.proxy-target-class=false property is required for the appjar to function correctly.

User Profile supports avatar image uploads. To allow images of a reasonable size, also add:

spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=100MB

Finally, add com.flowingcode to the list of whitelisted packages in application.properties:

vaadin.allowed-packages = com.vaadin,org.vaadin,dev.hilla,com.example.application,com.flowingcode,com.appjars

Testing the Application

Start the application by running the main Spring Boot class. After it starts, log in and navigate to My Profile in the menu to view and edit your own profile.

The Profiles menu item provides access to the full profile management view. Both views are annotated with @PermitAll, so the appjar makes them available to any authenticated user: restricting the management view to administrators is a decision of the application. Add the corresponding rule to the application security configuration, and guard the menu item accordingly.