https://github.com/oktadev/okta-ionic4-jhipster-example
Ionic 4 JHipster Example App
https://github.com/oktadev/okta-ionic4-jhipster-example
angular ionic ionic4 jhipster spring-boot
Last synced: 7 months ago
JSON representation
Ionic 4 JHipster Example App
- Host: GitHub
- URL: https://github.com/oktadev/okta-ionic4-jhipster-example
- Owner: oktadev
- License: apache-2.0
- Created: 2019-06-21T18:37:33.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-20T18:15:01.000Z (almost 6 years ago)
- Last Synced: 2025-08-23T11:14:35.546Z (8 months ago)
- Topics: angular, ionic, ionic4, jhipster, spring-boot
- Language: TypeScript
- Homepage: https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
- Size: 7.23 MB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster) to see how this example was created.
**Prerequisites:** Java 8+ and [Node.js](https://nodejs.org/) 10+.
> [Okta](https://developer.okta.com/) 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](#getting-started)
* [Links](#links)
* [Help](#help)
* [License](#license)
## Getting Started
To install this example application, run the following commands:
```bash
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](https://developer.okta.com/signup/).
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`](https://github.com/oktadeveloper/okta-ionic4-jhipster-example/blob/master/mobile/src/app/auth/auth.service.ts#L59).
```typescript
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](https://github.com/oktadeveloper/generator-jhipster-ionic#readme)
## Help
Please post any questions on the [associated blog post](https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster) or on the [Okta Developer Forums](https://devforum.okta.com/).
## License
Apache 2.0, see [LICENSE](LICENSE).