Build Mobile Apps with Ionic 4 and JHipster 6

This example shows how to create an Ionic 4 application that talks to a JHipster 6 backend.

Please read Build Mobile Apps with Angular, Ionic 4, and Spring Boot to see how this example was created.

Prerequisites: Java 8+ and Node.js 10+.

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-ionic4-jhipster-example.git ionic4-jhipster
cd ionic4-jhipster

This will get a copy of the project installed locally.

Create an OIDC App on Okta

To begin, sign up for a forever-free Okta developer account.

Once you're signed in to Okta, register your JHipster application.

• In the top menu, click on Applications
• Click on Add Application
• Select Web and click Next
• Enter JHipster FTW! for the Name (this value doesn't matter, so feel free to change it)
• Change the Login redirect URI to be http://localhost:8080/login/oauth2/code/oidc
• Click Done, then Edit and add http://localhost:8080 as a Logout redirect URI
• Click Save

Add a Groups Claim to the ID Token

In order to login to your JHipster app, you'll need to adjust your Okta authorization server to include a groups claim.

On Okta, navigate to Users > Groups. Create ROLE_ADMIN and ROLE_USER groups and add your account to them.

Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it "groups" or "roles" and include it in the ID Token. Set the value type to "Groups" and set the filter to be a Regex of .*. Click Create.

Run the JHipster API

Open a terminal, navigate to the app directory and run the following command:

SPRING_SECURITY_OAUTH2_CLIENT_PROVIDER_OIDC_ISSUER_URI=https://{yourOktaDomain}/oauth2/default \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_ID=$clientId \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_SECRET=$clientSecret ./gradlew

Add a Native App for Ionic

You'll also need to create a Native app for Ionic.

• In the Okta developer console, click on Applications
• Click on Add Application
• Select Native and click Next
• Enter Ionic FTW! for the Name
• Add Login redirect URIs: http://localhost:8100/callback and dev.localhost.ionic:/callback
• Click Done, then Edit and add Logout redirect URIs: http://localhost:8100/logout and dev.localhost.ionic:/logout
• Click Save

After performing these steps, copy your clientId into src/app/auth/auth.service.ts.

this.requestor.xhr({method: 'GET', url: AUTH_CONFIG_URI}).then(async (data: any) => {
  this.authConfig = {
    identity_client: '{yourClientId}',
    identity_server: data.issuer,
    redirect_url: redirectUri,
    end_session_redirect_url: logoutRedirectUri,
    scopes,
    usePkce: true
  };
  await this.storage.setItem(AUTH_CONFIG_URI, JSON.stringify(this.authConfig));
}

Add Claims to Access Token

In order to authentication successfully with your Ionic app, you have to do a bit more configuration in Okta. Since the Ionic client will only send an access token to JHipster, you need to 1) add a groups claim to the access token and 2) add a couple more claims so the user's name will be available in JHipster.

Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it "groups" and include it in the Access Token. Set the value type to "Groups" and set the filter to be a Regex of .*. Click Create.

Add another claim, name it given_name, include it in the access token, use Expression in the value type, and set the value to user.firstName. Optionally, include it in the profile scope. Perform the same actions to create a family_name claim and use expression user.lastName.

Run Your Ionic App

Now you should be able to open another terminal window, navigate to the mobile directory, and run the Ionic app.

ionic serve

Links

This example uses the following libraries provided by Okta:

• Ionic for JHipster

Help

Please post any questions on the associated blog post or on the Okta Developer Forums.

License

Apache 2.0, see LICENSE.