Ionic 4 + Authorization Code Flow + PKCE Demo

This demo shows how to use Ionic AppAuth and authenticate using Okta. The majority of its code comes from @wi3land/ionic-appauth-ng-demo.

Prerequisites: Node 11 and Ionic 4. After installing Node, install Ionic's CLI:

npm i -g ionic

• Getting Started
• Configure for Mobile
  • iOS
  • Android
• Links
• Help
• License

Getting Started

To install this example, run the following commands:

git clone -b okta git@github.com:mraible/ionic-4-oidc-demo.git
cd ionic-4-oidc-demo
npm i

Create an Application in Okta

Log in to your Okta Developer account (or sign up if you don’t have an account).

From the Applications page, choose Add Application. On the Create New Application page, select SPA. Give your app a memorable name, and configure it as follows:

• Login redirect URIs:
  • http://localhost:8100/implicit/callback
  • com.okta.dev-737523:/callback (where dev-737523.okta.com is your Okta URL)
• Grant type allowed: Authorization Code
• Click Done
• Click Edit and add Logout redirect URIs:
  • http://localhost:8100/implicit/logout
  • com.okta.dev-737523:/logout
• Click Save

Copy your issuer (found under API > Authorization Servers), and client ID into src/app/core/auth.service.ts as follows:

private addConfig() {
  const clientId = '{yourClientId}';
  const issuer = 'https://{yourOktaDomain}/oauth2/default';
  const scopes = 'openid profile offline_access';

  if (this.platform.is('cordova')) {
    this.authConfig = {
      identity_client: clientId,
      identity_server: issuer,
      redirect_url: '{yourReversedOktaDomain}:/callback',
      scopes: scopes,
      usePkce: true,
      end_session_redirect_url: '{yourReversedOktaDomain}:/logout',
    };
  }
  ...
}

NOTE: The value of {yourOktaDomain} should be something like dev-123456.okta.com. Make sure you don't include -admin in the value!

After modifying this file, start the app and you should be able to authenticate with Okta.

ionic serve

Mobile

If you'd like to run this app on a mobile emulator or device, you'll need to modify package.json to use your reversed Okta domain.

"cordova": {
  "plugins": {
    ...
    "cordova-plugin-customurlscheme": {
      "URL_SCHEME": "com.oktapreview.dev-737523",
      ...
    },
  }
}

This configures the Custom URL scheme Cordova plugin so redirects back to your app will work.

iOS

You can deploy this app to iOS Simulator using:

ionic cordova run ios -l

Then, in another terminal:

open platforms/ios/MyApp.xcworkspace

Configure signing in Xcode, then run the app.

See https://ionicframework.com/docs/building/ios for more information.

Android

You can deploy this app to an AVD (Android Virtual Device) using:

ionic cordova run android -l

NOTE: You will need to create an AVD using Android Studio first.

Links

This example uses the following open source libraries:

• Ionic AppAuth
• Ionic

Help

Please post any questions as issues in this repository, or on the Okta Developer Forums.

License

Apache 2.0, see LICENSE.