A JHipster App with Ionic + OIDC can't render its own Angular client

[mraible]

I added OIDC Support to the Ionic module in #20. Along the way, I discovered that I wasn't able to use a cookie-based solution for storing the access token. With a basic JHipster monolith, cookies work because the Angular client is either embedded in the Spring Boot app (when running on 8080), or webpack proxies the request to the server (when using yarn start), carrying the cookies with it along the way.

Ionic runs on port 8100 when developing locally. We could configure its server to proxy as well, but in production, Ionic will most likely be deployed on a phone and it won't be able to leverage the cookies. Or, in other words, I was unable to make it work.

The solution I came up with is to add two classes to the backend JHipster app:

• ResourceServerConfiguration: This class has an EnableResourceServer annotation that makes JHipster capable of receiving and parsing access tokens for authentication. Unfortunately, this also seems to override the EnableOAuth2Sso annotation in SecurityConfiguration, so the JHipster app will no longer be able to serve up its Angular client.
• AuthInfoResource: This class exposes the OAuth settings for Spring Security at an api/auth-info endpoint, which allows the angular-oauth2-oidc library to configure its settings from the server's settings.

In Ionic, I added angular-oauth2-oidc to handle authentication with OAuth's implicit flow (when running in a browser). Since you can't redirect to a website when running in Cordova, I used its Inappbrowser plugin.

I made some updates to the default realm in Keycloak to add Ionic's URI (http://localhost:8100) as an allowed redirect uri, and to enable implicit flow in the web_app client.

To fix this bug, I think one of the following needs to happen:

1. At a minimum, this project should document the steps needed to configure the Angular client in JHipster to use angular-oauth2-oidc. Currently, I'm printing the following message after installation:

if (this.jhipsterAppConfig.authenticationType === 'oauth2') {
    let resourceServerWarning = `${chalk.yellow('NOTE:')} To integrate OIDC into Ionic, I added a ResourceServerConfiguration class `;
    resourceServerWarning += `to your ${this.directoryPath} project. This will cause the Angular client on your server to stop `;
    resourceServerWarning += 'functioning. Please check this project\'s documentation to learn more: ';
    resourceServerWarning += `${chalk.bold('https://github.com/oktadeveloper/generator-jhipster-ionic\n')}`;
    this.log(resourceServerWarning);
}

2. A better solution would be to automatically update the Angular client in the backend app to use angular-oauth2-oidc.
3. The ideal solution would be to figure out how to use EnableOAuth2Sso and EnableResourceServer in the same project. I tried this solution, but was unable to make it work. I also thought it might be possible to enable the resource server on /mobile endpoints and then proxy those requests to /api, but I'm guessing Spring Security would still intercept those requests; causing it to fail.

/cc @bdemers @jhipster/developers @danielpetisme @deepu105 @jdubois @xetys @ruddell

[bdemers]

For serving the angular client is it basically just static pages and the new AuthInfoResource controller? I like the AuthInfoResource idea!

I have had ordering issues with the SSO Filter and the CORS filter before. Instead of setting the order directly, IIRC I used the http.addFilterBefore() method. The result is basically the same though.

[mraible]

Fixed by #21.