Last fall, I wrote about how to get started with AngularJS, Spring Boot, and Stormpath. Since then, AngularJS has become a legacy technology, verified by ThoughWorks Radar and their “hold” recommendation in November 2016. This article shows how to get started with the latest release of Angular, and how to add authentication to it, a necessary feature in most applications.

In this tutorial, you’ll be using Angular and Stormpath’s Angular SDK for the UI. Along the way, you’ll learn how to create REST endpoints with Spring Data REST, use Stormpath to make authentication easy, and configure Stormpath’s Spring Boot support to allow CORS.

Spring Boot has greatly simplified how to develop applications with Spring. Its auto-configuration and many starters has fostered a Spring renaissance that makes developing Spring apps fun again! Stormpath’s Spring Boot starter is one of the most sophisticated in the ecosystem. It works with and without Spring Security, providing standard authentication flows as well as sophisticated standards compliant authorization flows (e.g. OAuth2 and OpenID Connect).

This article will show you how to build an application that serves up a REST API and an application that consumes that API. It’ll have a Spring Boot backend and an Angular frontend. It’ll use Stormpath to secure everything with an OAuth workflow and JWTs for tokens. This app will display a list of beers from the API, then fetch a GIF from http://giphy.com/ that matches the beer’s name. In a future article, I’ll show you how to turn this application into an PWA (Progressive Web Application) that works offline.

Build an API with Spring Boot

To build an API with Spring Boot, the easiest way to begin is to navigate to start.spring.io. In the “Search for dependencies” box, select the following:

  • JPA
  • H2
  • Rest Repositories
  • Web
  • Security
  • Stormpath
  • DevTools

start.spring.io

If you like the command-line better, you can use the following command to download a demo.zip file with HTTPie.

The app you’ll create with have a client and a server. The client can be deployed anywhere that supports static sites, (like AWS), while the server will need to live somewhere that supports Java.

Create a directory called stormpath-spring-boot-angular-pwa, with a server directory in it. Expand the contents of demo.zip into the server directory. If you don’t have a Stormpath account, you’ll need to create one.

Stormpath Setup

The Stormpath Spring Boot Quickstart shows how to create an API key; here’s the abridged version:

From the Home tab of the Admin Console select Manage API Keys under the Developer Tools heading. Click the Create API Key button to trigger a download of a apiKey-{API_KEY}.properties file. Move the file to ~/.stormpath/apiKey.properties.

Open the “server” project in your favorite IDE and run DemoApplication or start it from the command line using ./mvnw spring-boot:run.

Create a com.example.beer package and a Beer.java file in it. This will be the entity that holds your data.

Add a BeerRepository class that leverages Spring Data to do CRUD on this entity.

Add a BeerCommandLineRunner that uses this repository and creates a default set of data.

Rebuild your project and you should see a list of beers printed in your terminal.

Beers printed in terminal

Add a @RepositoryRestResource annotation to BeerRepository to expose all its CRUD operations as REST endpoints.

Add a BeerController class to create an endpoint that filters out less-than-great beers.

Re-build your application and navigate to http://localhost:8080/good-beers. You should be prompted to login.

Stormpath Login page

After entering valid credentials, you should see the list of good beers in your browser.

Good Beers JSON

You should also see this same result in your terminal window when using basic authentication and HTTPie.

Create a project with Angular CLI

It’s cool that you created an API to display a list of beers, but APIs aren’t that cool without a UI. In this section, you’ll create a new Angular app, integration Stormpath for authentication, build services to fetch beers/images, and create components to display this data.

To create an Angular project, make sure you have Node.js and the Angular CLI installed.

Run ng --version to confirm you’re using version 1.0.0-beta.32.3 (or later). From a terminal window, cd into the root of the stormpath-spring-boot-angular-pwa directory and run the following command.

This will create a new client directory and run npm install to install all the necessary dependencies. To verify everything works, run ng e2e in a terminal window. If everything works, you should see output like the following in your terminal.

TIP: If you’re just getting started with Angular, you might want to watch a video of my resent Getting Started with Angular webinar.

If you’d rather not use the command line and have IntelliJ IDEA (or WebStorm) installed, you can create a new Static Web Project and select Angular CLI.

IntelliJ new Static Web project

Open the client project in your favorite editor.

Secure your Angular Application with Stormpath

Install Stormpath’s Angular SDK to make it possible to communicate with the secured server.

Modify app.module.ts to import StormpathConfiguration and StormpathModule. Then create a function to configure the endpointPrefix to point to http://localhost:8080.

Add StormpathModule to the imports in @NgModule and use the stormpathConfig function to override the default StormpathConfiguration in the providers list.

Modify app.component.html to add the Stormpath <sp-authport></sp-authport> component and a section to show the user’s name and a logout link.

You’ll notice the user$ variable in the HTML. In order to resolve this, you need to change your AppComponent so it extends AuthPortComponent.

You can also inject the Stormpath service into your component, subscribe to stormpath.user$ and implement logout() yourself.

Make sure your server is started (with mvn spring-boot:run in the server directory, and ng serve in the client directory) and navigate to http://localhost:4200. You should see an error in your console that you means you have to configure cross-origin resource sharing (CORS) on the server.

To fix this issue, you’ll need to configure Spring Boot to allow cross-domain access from http://localhost:4200.

Configure CORS for Spring Boot

In the server project, add a property to application.properties that allows cross-origin resource sharing (CORS) from the client (http://localhost:4200).

After making these changes, you should be able to start the client and server apps and see a login screen on the Angular app.

Angular login

After logging in with valid credentials, you should see the user’s first name and a logout link.

Angular post login

Add Bootstrap

The Stormpath Angular SDK’s default HTML templates useBootstrap CSS classes. If you add Bootstrap to your project, the login form will look much better. You can easily integrate Bootstrap by adding the following HTML to the <head> of index.html.

If you’d rather integrate Bootstrap using the Angular CLI way, install it using npm.

Then modify .angular-cli.json to add it to the styles array:

Both techniques will result in a more stylish login form.

Angular login with Bootstrap

Create a BeerListComponent and BeerService

Thus far, you’ve integrated Stormpath’s Angular SDK for authentication, but you haven’t created the UI to display the list of beers from your API. To do this, create a <beer-list> component by running Angular CLI’s generate component command.

TIP: There is a g alias for generate and a c alias for component, so you can type ng g c beer-list too.

Create a beer service:

Create a src/app/shared/beer directory and move beer.service.* into it.

Create a src/app/shared/index.ts file and export the BeerService.

Modify beer.service.ts to call the “good-beers” API service.

TIP: If you don’t want to pass in withCredentials: true, you can add the API URI as an autoAuthorizeUri in StormpathConfiguration.

Modify beer-list.component.ts to use the BeerService and store the results in a local variable. Notice that you need to add the service as a provider in the @Component definition or you will see an error.

Modify beer-list.component.html so it renders the list of beers.

Update app.component.html to have the BeerListComponent rendered when you’re logged in. Note that I changed the generated selector from app-beer-list to beer-list.

Now when you login, you should see a list of beers from your Spring Boot API.

Beer List in Angular

To make it look a little better, add a Giphy service to fetch images based on the beer’s name.

Add an export for this class in src/app/shared/index.ts.

Then add it to BeerListComponent to set a giphyUrl on each beer object.

Then update beer-list.component.html to include a reference to this image.

The result should look something like the following list of beer names with images.

Beer list with Giphy images

You’ve created an Angular app that talks to a Spring Boot API that is secured with Stormpath for authentication. Congratulations! Protecting both apps with Stormpath didn’t require much code and it was much easier than building the authentication yourself. If you’d like to learn more, see our Build vs. Buy whitepaper.

Source Code

You can find the source code associated with this article on GitHub. If you find any bugs, please file an issue, or leave a comment on this post. Of course, you can always ping me on Twitter too.

What’s Next?

This article showed you how to develop a Spring Boot backend, and lock it down with Stormpath. You learned how to develop an Angular front end and use Stormpath’s Angular SDK to communicate with the secure backend. In a future article, I’ll show you how to create a progressive web application and deploy it to the cloud.

To learn more about Angular, our Java SDK, or Stormpath, check out the following resources: