Skip to content

Latest commit

 

History

History
99 lines (67 loc) · 3.79 KB

README.md

File metadata and controls

99 lines (67 loc) · 3.79 KB
Raw

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:

Prerequisites:

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

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:

Help

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

License

Apache 2.0, see LICENSE.