isabella232 / okta-ionic-auth-example

Example showing Ionic Authentication with Okta

Ionic App with Okta Authentication

This is an old example. Please see Ionic + Sign in with Apple and Google for an updated version.

This example shows how to create an Ionic application that uses Cordova's in-app browser to log in with Okta.

Please read Build an Ionic App with User Authentication to see how this application was created.

Prerequisites: Node.js.

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-ionic-auth-example.git
cd okta-ionic-auth-example

This will get a copy of the project installed locally. Then run the following command to install Ionic and Cordova.

npm install -g cordova ionic

Then run the application:

npm install
ionic serve

To integrate Okta's Identity Platform for user authentication, you'll first need to:

• Register and create an OIDC application
• Log in to your Okta account and navigate to Applications > Add Application
• Select SPA and click Next
• Give your application a name (e.g. "Ionic OIDC")
• Change the Base URI and Login redirect URI to http://localhost:8100 and click Done.

After performing these steps, copy the clientId into src/pages/login/login.ts and change {yourOktaDomain} to match your account's id.

constructor(private navCtrl: NavController, private oauthService: OAuthService) {
  oauthService.redirectUri = 'http://localhost:8100';
  oauthService.clientId = '{clientId}';
  oauthService.scope = 'openid profile email';
  oauthService.issuer = 'https://{youtOktaDomain}.com/oauth2/default';
  oauthService.tokenValidationHandler = new JwksValidationHandler();
  ...
}

Your OIDC app should have settings like the following:

Links

This example uses the following libraries provided by Okta:

• Okta Auth SDK

It also uses the following library provided by Manfred Steyer:

• angular-oauth2-oidc

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums. You can also email [email protected] if would like to create a support ticket.

License

Apache 2.0, see LICENSE.