Skip to main content
Version: 3.x

Okta Configuration

Configuration Details​

Okta Configuration​

Before integrating Auth Connect into your Ionic app, you’ll need to get Okta up and running.

note

For complete information on configuring Okta, consult the official documentation which includes tutorials on creating users and applications.

We recommend following the guide for Single Page Applications. This will enable your application to use the PKCE authentication flow and will work for both browser and app authentication.

Install Auth Connect​

Run the following command to install the Auth Connect plugin. For the AUTH_URL_SCHEME variable, use the globally unique App Id (ex: com.company.app) you decided on when configuring the Azure AD app above.

Installation​

If you have not already setup Ionic Enterprise in your app, follow the one-time setup steps.

Next, install the plugin:

npm install @ionic-enterprise/auth 
npx cap sync

Configure Auth Connect​

It's recommended to create an AuthenticationService class that encapsulates Okta and Ionic Auth Connect’s login functionality.

Generate this class using the ionic generate command:


_10
ionic generate service services/authentication

Extend the IonicAuth class, then configure all Okta details in the IonicAuthOptions object:


_37
import { IonicAuth, IonicAuthOptions } from '@ionic-enterprise/auth';
_37
_37
export class AuthenticationService extends IonicAuth {
_37
_37
constructor() {
_37
const oktaConfig: IonicAuthOptions = {
_37
// The auth provider.
_37
authConfig: 'okta',
_37
// The platform which the app is running on
_37
platform: 'cordova',
_37
// client or application id for provider
_37
clientID: 'FILL_IN',
_37
// the discovery url for the provider
_37
// OpenID configuration
_37
discoveryUrl: 'FILL_IN',
_37
// the URI to redirect to after log in
_37
redirectUri: 'FILL_IN',
_37
// requested scopes from provider
_37
scope: 'FILL_IN',
_37
// the audience, if applicable
_37
audience: 'FILL_IN',
_37
// the URL to redirect to after log out
_37
logoutUrl: 'FILL_IN',
_37
// The type of iOS webview to use. 'shared' will use a webview that can
_37
// share session/cookies on iOS to provide SSO across multiple apps but
_37
// will cause a prompt for the user which asks them to confirm they want
_37
// to share site data with the app. 'private' uses a webview which will
_37
// not prompt the user but will not be able to share session/cookie data
_37
// either for true SSO across multiple apps.
_37
iosWebView: 'private',
_37
// Use the newer PKCE Authentication Flow
_37
webAuthFlow: 'PKCE'
_37
};
_37
_37
super(oktaConfig);
_37
}
_37
}

Some of these IonicAuthOptions values are unique, and must be set based on your Okta details:

  • platform: Use “cordova” or “capacitor” accordingly.
  • clientID: Your app’s Client ID, found under Applications -> [Your Application] -> General.
  • redirectUri: The URI to redirect to after the user has logged in. Use the same AUTH_URL_SCHEME variable value (App Id) from when the Auth Connect plugin was installed. Example: com.company.app://callback. Find this under Applications -> [Your Application] -> General.
  • logoutUrl: The URI to redirect to after the user has logged out. Example: com.company.app://login?logout=true. Find this under Applications -> [Your Application] -> General.

The discoveryUrl formula is:

https://ORGANIZATION_DOMAIN.okta.com/.well-known/openid-configuration

Where ORGANIZATION_DOMAIN is the domain you created when setting up your Okta account. You can find a reference to this under Applications -> [Your Application] -> Sign On -> OpenID Connect ID Token -> Issuer

What's Next?​

Check out the full list of configuration options available, then implement the other steps in the Auth Connect workflow.

Contents