Ionic for JHipster 💥
A JHipster Module that generates an Ionic Client
This is a JHipster module. You can use it to generate an Ionic app that talks to a JHipster backend. It uses the Ionic JHipster Starter as a base template, then applies functionality (e.g. entity generation) on top of it.
To learn more about this module, see Build Mobile Apps with Angular, Ionic 4, and Spring Boot.
As this is a JHipster module, we expect you to have an existing JHipster, Ionic, and Angular CLI already installed.
Or just run:
npm i -g generator-jhipster @ionic/cli @angular/cli
To install this module:
npm install -g generator-jhipster-ionic yo
To update this module:
npm update -g generator-jhipster-ionic
Create a JHipster app using
jhipster, or a backend-only with
yo jhipster:server. Choose
OAuth 2.0as the authentication type.
In a directory alongside your JHipster app, run this module.
- jhipster-app - ionic-app
The following command will create an Ionic app (and its directory) for you and install the necessary code for it to communicate with your JHipster backend.
This module also ships with an
ionic4jCLI that you can use as a shortcut.
ionic4jto generate a new app
ionic4j entitygenerates entities
ionic4j import-jdlimports JDL and generates entities
To add PWA support to your Ionic app, run:
ng add @angular/pwa
Watch use the Angular CLI to transform your Ionic app into a PWA to learn more.
Choosing OAuth 2.0 / OIDC for authentication will allow you to use Keycloak or Okta for identity. In theory, you should be able to use any OIDC-compliant identity provider, and these are the only ones we've tested against. JHipster ships with Keycloak configured and ready to go by default. You simply have to start it in your JHipster backend.
docker-compose -f src/main/docker/keycloak up -d
See JHipster's security docs to see how to configure JHipster for Okta.
NEW: You can use the Okta CLI to add JHipster integration in seconds! After running
okta register, run
okta apps create jhipster. Then, source the created
.okta.envfile and start your app.
source .okta.env ./gradlew # or ./mvnw
In addition to having a OIDC app for your JHipster backend, you'll need to create a Native app on Okta too.
okta apps create. Select the default app name, or change it as you see fit. Choose Native and press Enter.
Change the Redirect URI to
[http://localhost:8100/callback,dev.localhost.ionic:/callback]and the Logout Redirect URI to
dev.localhost.ionicis the default scheme, but you can also use something more traditional like
dev-133337.okta.comis your Okta Org URL). If you change it, be sure to update the
src/environments/environment.tsand the redirect URLs in
The Okta CLI will create an OIDC App in your Okta Org. It will add the redirect URIs you specified and grant access to the Everyone group.
Okta application configuration: Issuer: https://dev-133337.okta.com/oauth2/default Client ID: 0oab8eb55Kb9jdMIr5d6
NOTE: You can also use the Okta Admin Console to create your app. See Create a Native App for more information.
ionic/src/app/auth/auth-config.service.tsand add the client ID from your Native app. For example:
environment.oidcConfig.server_host = this.authConfig.issuer; environment.oidcConfig.client_id = '';
You'll also need to add a trusted origin for
http://localhost:8100. In your Okta Admin Console, go to Security > API > Trusted Origins > Add Origin. Use the following values:
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
groupsclaim to the access token and 2) add a couple more claims so the user's name will be available in JHipster.
NOTE: These steps are not necessary if you're using a version of JHipster with a
Navigate to Security > 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
Expressionin the value type, and set the value to
user.firstName. Optionally, include it in the
profilescope. Perform the same actions to create a
family_nameclaim and use expression
Generate a native project with the following commands:
ionic build ionic capacitor add ios
Add your custom scheme to
CFBundleURLTypes CFBundleURLName com.getcapacitor.capacitor CFBundleURLSchemes capacitor dev.localhost.ionic com.okta.dev-737523
Open your project in Xcode and configure code signing.
npx cap open ios
Then, run your app from Xcode.
Generate a native project with the following commands:
ionic build ionic capacitor add android
Change the custom scheme in
dev.localhost.ionicor your reverse domain name:
The SafariViewController Cordova Plugin is installed as part of this project. Capacitor uses AndroidX dependencies, but the SafariViewController plugin uses an older non-AndroidX dependency. Use jetifier to patch usages of old support libraries with the following commands:
npm install jetifier npx jetify npx cap sync android
Then, open your project in Android Studio and run your app.
npx cap open android
You'll need to run a couple commands to allow the emulator to communicate with your API and Keycloak.
adb reverse tcp:8080 tcp:8080 adb reverse tcp:9080 tcp:9080
If you see
java.io.IOException: Cleartext HTTP traffic to localhost not permittedin your Android Studio console, enable clear text traffic in
See this Stack Overflow Q&A for more information.
If that doesn't work, just use Okta (and its HTTPS-by-default feature 😉).
To generate entities, run
To import JDL, run
You can run unit tests with:
See the testing section of the Ionic JHipster Starter for more information.
Apache-2.0 © Okta, Inc