Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oktadev/okta-ionic-crypto-pwa-example
Josh Morony's cryptoPWA with Okta Authentication
https://github.com/oktadev/okta-ionic-crypto-pwa-example
authentication cryptocurrency ionic oidc okta pwa
Last synced: 3 months ago
JSON representation
Josh Morony's cryptoPWA with Okta Authentication
- Host: GitHub
- URL: https://github.com/oktadev/okta-ionic-crypto-pwa-example
- Owner: oktadev
- License: apache-2.0
- Created: 2018-01-12T06:00:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T18:55:32.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T15:55:13.078Z (10 months ago)
- Topics: authentication, cryptocurrency, ionic, oidc, okta, pwa
- Language: TypeScript
- Homepage: https://developer.okta.com/blog/2018/01/18/cryptocurrency-pwa-secured-by-okta
- Size: 587 KB
- Stars: 7
- Watchers: 4
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cryptocurrency PWA with Okta Authentication
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](https://twitter.com/joshuamorony) in [Building a Cryptocurrency Price Tracker PWA in Ionic](https://www.joshmorony.com/building-a-cryptocurrency-price-tracker-pwa-in-ionic/). You can see it online at .
Please read [Protect your Cryptocurrency Wealth Tracking PWA with Okta](https://developer.okta.com/blog/2018/01/18/cryptocurrency-pwa-secured-by-okta) to see how this application was created.
**Prerequisites:** [Node.js](https://nodejs.org/).
> [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-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](https://www.okta.com/developer/signup/) 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.
```typescript
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:
## Links
This example uses the following library provided by [Manfred Steyer](https://github.com/manfredsteyer):
* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)
This example leverages the following app provided by [Josh Morony](https://github.com/joshuamorony):
* [ionic-crypto-pwa](https://github.com/joshuamorony/ionic-crypto-pwa)
## Help
Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2018/01/18/cryptocurrency-pwa-secured-by-okta), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email [email protected] if would like to create a support ticket.
## License
Apache 2.0, see [LICENSE](LICENSE).