Who isn't getting into Bitcoin these days? In the past year, the value of Bitcoin alone is creating huge FOMO, and driving increasing investments into cryptocurrencies. With this massive influx of new cash in cryptocurrencies like Bitcoin, Ethereum, Monero, and Ripple — blockchain technology (which is the foundation of all cryptocurrency) has become an area of intense technical study. At its core, blockchain technology simply maintains a decentralized log of transactions that can be easily shared across many nodes (miners).

In this post, I’ll show you how to add authentication to an Ionic progressive web app (PWA). PWAs are more developer-friendly to distribute than mobile apps. Not only that, but I’ll show you how to use cloud services like Okta and Firebase to make things even simpler.

Josh Morony is someone I’ve followed ever since I got into Ionic. After developing my first app using Ionic, I bought and read his book on Building Mobile Apps with Ionic. He’s a good marketer, and I’ve been receiving his newsletter ever since. As a developer, I get a lot of emails, and I usually delete the newsletter emails because most don’t provide value. I’ve never deleted Josh’s, and I started receiving it years ago. He does a great job of providing valuable information to developers!

You can also see his finished app at https://cryptopwa.com and find it on GitHub. I thought it’d be fun to add authentication to Josh’s app and show you how I did it. It wasn’t too hard thanks to the fact that Ionic uses Angular and it has excellent OIDC support — thanks to Manfred Steyer’s awesome angular-oauth2-oidc library.

Run the app so you can see its basic functionality before adding authentication.

You can verify it works offline — like a PWA should — by toggling offline mode in your browser (in Chrome: Developer Tools > Network > Offline).

NOTE: This application is designed specifically to be a PWA, not for packaging as a native app and deploying to a phone. For this reason, I don’t account for developing and deploying it as a mobile app in this post. If you’re interested in that, please see the other articles at the end of this post.

Add Okta for Authentication

Happily, the hardest part of using Okta is creating a developer account, so you’ll need to start there. Within 2-3 minutes, you should be able to log in to our developer console and create new applications. Follow the steps below to create an OpenID Connect (OIDC) application that allows you to authenticate with your Okta accounts.

Log in to your Okta account and navigate to Applications > Add Application

Add Angular OIDC Support

At this point, I tried adding Okta’s Angular SDK using npm install --save @okta/okta-angular. However, I quickly discovered this library doesn’t work with Ionic because it has a dependency on Angular Router, which Ionic doesn’t use. You can track this issue on GitHub.

Populate src/pages/login/login.html with the following HTML that welcomes the user and provides a login button.

<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="message">
<p><strong>cryptoPWA</strong> is a <strong>P</strong>rogressive <strong>W</strong>eb <strong>A</strong>pplication
that allows you to keep track of the approximate worth of your cryptocurrency portfolio.</p>
<p>A PWA is like a typical application from the app store, but you can access it directly through the web. You may
also add this page to your home screen to launch it like your other applications.</p>
<p>Log in to start tracking your coins in whatever currency you wish!</p>
</div>
<button ion-button (click)="login()" color="primary">
Login with Okta
</button>
</ion-content>

In src/pages/home/home.html, add padding to the ion-content tag, change the <div class="message"> to welcome the user by name, and modify the welcome message. This change is necessary because the original message says no account is required.

TIP: Did you know you don’t need to include @<your-email>.com for the username with Okta? Entering the first part of your email address is enough for Okta to know who you are.

After entering valid credentials, you should be redirected back to your app and see a welcome message.

You should be able to add cryptocurrency holdings as you did before. The last thing you’ll want to do is add a logout button.

Add a Logout Button

To add a logout button, add a logout() method to src/pages/home/home.ts.

logout() {
this.oauthService.logOut();
}

Then add a logout button just above </ion-content> in src/pages/home/home.html.

<button ion-button (click)="logout()">Logout</button>

Your home page should now look as follows.

Deploy to Firebase and Test With Lighthouse

If you’d like to deploy your app to Firebase, log in to your account, go to the console, and create a new project. On the project overview screen, scroll to Hosting card, and click Get Started. Once you’ve completed the steps, you should be able to run the following commands to deploy your app.

npm run ionic:build --prod
firebase deploy

I deployed mine to https://cryptopwa-oidc.firebaseapp.com and received a Lighthouse score of 91. Lighthouse is an automated tool for auditing the quality of web pages. You can run it against any web page to see audits for performance, accessibility, progressive web apps, and more.

I compared this with the original tutorial’s production instance at https://cryptopwa.com and found it received the same score.

I scrolled down my report to see why I didn’t receive a perfect 100. I had two failed audits:

Does not provide fallback content when JavaScript is not available

Has a <meta name="viewport"> tag with width or initial-scale (Invalid properties found: "{viewport-fit":"cover"})

To fix the first issue, add the following HTML in src/index.html, just after the <body> tag.

<noscript>
<h1>You must enable JavaScript to view this page.</h1>
</noscript>

To fix the second issue, remove viewport-fit=cover, from the <meta name="viewport"> tag’s content attribute.

Rerunning Lighthouse should give you a perfect PWA score of 100. Huzzah!

Learn More About Ionic and PWAs

In a future tutorial, I’ll show you how to replace this app’s local storage implementation with Okta’s custom profile attributes. This enhancement will allow you to track your cryptocurrency holdings from any device, with any browser!

For now, I hope you’ve enjoyed this brief look at Ionic, PWAs, and Okta. PWAs are more straightforward to distribute than mobile apps, and cloud services like Okta and Firebase make things even simpler.