This example shows to create an cryptocurrency application in Ionic that uses Okta for authentication. The cryptoPWA app used in this example was originally by Josh Morony in Building a Cryptocurrency Price Tracker PWA in Ionic. You can see it online at https://cryptopwa.com.
Please read Protect your Cryptocurrency Wealth Tracking PWA with Okta 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.
To install this example application, run the following commands:
git clone https://github.com/oktadeveloper/okta-ionic-crypto-pwa-example.git
cd okta-ionic-crypto-pwa
This will get a copy of the project installed locally. Then run the following command to install Ionic.
npm install -g 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. "Crypto PWA")
- Change the Base URI, Login redirect URI, and Logout 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 oauthService: OAuthService, private app: App) {
if (this.oauthService.hasValidIdToken()) {
this.app.getRootNavs()[0].setRoot('HomePage');
}
oauthService.redirectUri = window.location.origin;
oauthService.clientId = '{clientId}';
oauthService.scope = 'openid profile email';
oauthService.issuer = 'https://{yourOktaDomain}/oauth2/default';
oauthService.tokenValidationHandler = new JwksValidationHandler();
oauthService.loadDiscoveryDocumentAndTryLogin();
}
Your OIDC app should have settings like the following:
This example uses the following library provided by Manfred Steyer:
This example leverages the following app provided by Josh Morony:
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.
Apache 2.0, see LICENSE.