Authenticating Web Users With OpenID and JWT

as some of my readers will know, i’m working on a cloud-native-starter repo that demonstrates how to start building cloud-native applications with java ee and istio. one of the required core features for most applications is authentication and authorization.

openid connect and jwt

in order to authenticate and authorize users, i’ve chosen the standard openid connect 1.0 and oauth 2.0, which can be used with many existing identify providers. in the context of enterprise applications, you want to leverage existing organization directories. ibm app id , for example, acts as an identity provider or identity provider proxy. for simple tests, you can define test users in a cloud directory. for production usage, app id can be configured to work against third-party providers such as active directory federation services via saml.

identify providers also come with their own login pages, which means that you, as a developer, don’t have to implement yet another login page with both username and password fields, and enterprise users get a consistent way to log in. with app id, this login page can easily be customized.

the other nice thing about openid connect for developers is that you don’t have to understand the internals of the different identity providers but can use standardized and easy apis. as a response of successful oauth dances, you get access tokens and user tokens as json web token (jwt).

sample implementation

in order to authenticate users, i use ibm app id with a test user in a cloud directory. i’ve implemented another service, called ‘authentication’, via node.js and the npm module ‘ openid-client ‘. the vue.js application invokes a ‘login’ endpoint of this service. the authentication service triggers the oauth dance and returns the tokens to the web application.

here is my sample application. the three components that are run for authentication are:

1. app id

2. authentication

3. web app

after successful logins, the vue.js web application retrieves the access token and stores it together with the username and email address in the vuex store.

this animated gif shows the authentication flow.

run the sample yourself

if you want to run this sample, follow the instructions in the repo.

essentially, when you have an ibm cloud account, and when you have minikube with istio running locally, all you need to do is to invoke the following commands:

$ git clone https://github.com/nheidloff/cloud-native-starter.git
$ ibm-scripts/create-app-id.sh
$ scripts/deploy-web-api-java-jee.sh
$ scripts/deploy-authentication-nodejs.sh
$ scripts/deploy-web-app-vuejs-authentication.sh
$ scripts/deploy-istio-ingress-v1.sh
$ scripts/show-urls.sh

note: since this is a starter repo, i’m using http only at this point. for production usage, you should leverage secure connections.

over the next days, i’ll blog about how to use these tokens to invoke protected endpoints of the ‘web-api’ service and how to access the tokens in java applications to authorize users.

stay tuned!