A CRUD Example App with Angular 9.0 and Spring Boot 2.2

This example app shows how to build a basic CRUD app with Spring Boot 2.2, Kotlin, Spring Data, and Angular 9.0. Please read Build a CRUD App with Angular 9 and Spring Boot to see how this app was created. This blog post is part of a series. Other blog posts in this series include:

• Build Beautiful Angular Apps with Bootstrap
• Angular Deployment with a Side of Spring Boot
• Angular + Docker with a Big Hug from Spring Boot

Prerequisites:

• Node 12+
• Java 11+
• An Okta Developer Account

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
• Links
• Help
• License

Getting Started

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/okta-spring-boot-2-angular-9-example.git
cd okta-spring-boot-2-angular-9-example

This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.

Spring Boot Configuration

To create a new OIDC app for Spring Boot on Okta:

1. Log in to your developer account, navigate to Applications, and click on Add Application.
2. Select Web and click Next.
3. Give the application a name and add http://localhost:8080/login/oauth2/code/okta as a login redirect URI.
4. Click Done.

Create an okta.env file and copy your settings into it.

export OKTA_OAUTH2_ISSUER=https://{yourOktaDomain}/oauth2/default
export OKTA_OAUTH2_CLIENT_ID={yourClientId}
export OKTA_OAUTH2_CLIENT_SECRET={yourClientSecret}

NOTE: The value of {yourOktaDomain} should be something like dev-123456.okta.com. Make sure you don't include -admin in the value!

Start your Spring Boot app by navigating to the notes-api directory, sourcing this file, and starting your app.

cd notes-api
source okta.env
./gradlew bootRun

Angular Configuration

To create a new OIDC app for Angular on Okta:

1. Log in to your developer account, navigate to Applications, and click on Add Application.
2. Select Single-Page App and click Next.
3. Give the application a name, set the login redirect URI to http://localhost:4200/callback, and click Done.

Copy the issuer and clientId into notes/src/app/auth-routing.module.ts.

const oktaConfig = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin + '/callback',
  clientId: '{yourClientId}',
  pkce: true
};

Navigate into the notes folder and run:

npm install && npm start

Open your browser to http://localhost:4200, log in, and create notes to your hearts content!

Links

This example uses the following open source libraries from Okta:

• Okta Spring Boot Starter
• Okta Angular SDK

Help

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

License

Apache 2.0, see LICENSE.