 Hello, developers. My name is Matt Raebel, and I like VWs and mountains. Today I'd like to show you how to build an app with Ionic 4 and add user login and registration. So to begin, you'll need Ionic installed. If you don't have Ionic installed, you can use npm install-g-ionic. And because I like to lock versions down, this version is 4.12.0. Once you have Ionic installed, you can create a new Ionic app using Ionic start. We'll call Ionic login and we'll use tabs. I want to prompt you to install the free Ionic appflow SDK. I'm not using it, so I'm just going to say no. So then you can CD into your Ionic login application and run Ionic server. Or server, if you type it wrong. That'll build your application with Angular and then run it on port 8100. So you can see, there it is running. If we open it up with the device toolbar, we can see what it looks like on an iPhone. And it looks pretty good. So now the next step is to add authentication with OpenID Connect. So you can do that by going to developer.com and creating a forever free developer account. I already have an account, so I'll go ahead and just use that one. And you go to applications, add application and choose native, since we're going to be deploying this to a phone. And we'll call it Ionic 4 app. And for the login redirect URI, Ionic also allows you to run PWAs or progressive web apps. So I am going to enable that as well. And we'll set this to 8100, implicit callback. And even though it says implicit in the URL, we're actually going to use authorization code flow. So this is just one of the conventions that's used in the authentication package that I'll be using. So you click done. And then we do need to edit this to add some logout redirect URIs. So we'll copy that one. Say logout. Copy that one. And add logout as well. Then you'll see there's a client ID right here. We'll copy that and save it for later. And then click save. And then we can use these settings along with an issuer for our app to create or to add authentication. So there's a handy package called octadevschematics that we created. And what this allows you to do is basically install authentication for Angular, React, Vue, or Ionic. And it uses Octa's SDKs or an SDK that implements OpenID Connect. So here's how you can install it. But there's also an ngadd command you can use. So it's as simple as ngadd octadevschematics. And this will install the schematics as well as prompt you for the values that you copied. So our issuer URI, grab that, paste it in. Client ID, grab that, paste it in. And it basically does a whole bunch of things for you. Adds and installs octadevschematics. It adds Ionic app auth as a dependency. It also adds Ionic storage as a dependency for storing tokens. It adds services modules and pages to a source app auth directory. It also adds a login page and related files to source app login. It adds a Cordova section to your package.json for the plugins that it needs. And it updates existing files to handle authentication logic. As far as that one high severity vulnerability you can use NPM audit to see what that is. That doesn't come from any of these packages that we installed. That's from Angular Dev Kit. So now you can go ahead and run it using Ionic serve again. Now there's a login button. Click on that and you're logged in. And if I want to get my user details it brings those back. And that's because I'm already logged in. So if I want to log out then I could log in again and see octa sign in page. Click sign in and there you are. So pretty easy to add authentication to Ionic app mostly because of octadevschematics and Ionic app auth. So if you go to Ionic app auth and so then you can find it on github as well. And everything that's been integrated into octadevschematics comes from these two examples. Either Angular Cordova or Angular Capacitor. So all this code was created by this wonderful person WI3Land and it works really nicely. So let's change our octa org so it has user registration. All you need to do is log into it, go to users, registration and I've already enabled it here so if I hadn't enabled it I could hit disable and then save it. If you're a brand new user when you come to this screen and you go to users registration you actually see a whole different page with just one button that says enable it. So a little bit different after you've already enabled it once but this is what it'll look like and then there'll be a sign up link on the sign in page. So now if I just click save and then go back to the app, localhost 8100. I can sign out, sign in and you'll see there's a sign up link. So now you can enter in your credentials, your first name your last name and create a new user. So that's pretty slick. Now let's see how to run the app on iOS. So Cordova and Ionic make that fairly easy. All you have to do is run Ionic, Cordova, Prepare iOS. And then what prompts you to install it, say yes. And then to configure code signing you'll need to open it in Xcode so you can do open platforms, iOS, my app, I believe it's C workspace. Click on the project name configure your code signing and then you should be able to run it. And then to prove it works on an iPhone you can log in just as we did before and there you are. You can even get the user's details. Let's see if it works on Android. On Android you can do Cordova or Ionic Cordova, Prepare Android. Then you can open it in Android Studio Studio Platforms Android. And you might have seen that I had that Studio command that I was able to use that is installed from Tools, Create Command Line Launcher. And so it does prompt me with some warnings here. We can fix that by clicking on that link. Update Gradle to 5.0.1 and you'll notice it says NDK Compile is no longer supported. You can fix that by going to Gradle.properties changing use deprecated NDK to false and then you should be able to play your app now. You'll need to create a new virtual device if you don't have one. I used a Pixel 2 and you can click log in once it loads and now we're logged in and we can get the user's details. There we are. Now if you want to sign up, prove that that works as well. So one thing that I didn't need to do but I do believe you will need to do is navigate into the Android Manifest and change the Activity Launch Mode from Single Top to Single Task. This is especially important when you have multiple applications that are using a similar login mechanism, multiple Ionic applications. Otherwise you've developed a nice app that runs on iOS and Android and the web as a progressive web app and not only that but it uses PKCE also called Pixie which is proof key for code exchange and it's basically a secured extension for OAuth 2 for public clients on mobile and desktop and it's designed to prevent interception of the authorization code by a malicious application that runs on the same device. So it's pretty awesome and it's the better version for browsers than implicit flow and so if you were to go to developer.octa.com slash blog and search for implicit. We have a blog post. Let's see implicit dead. There we are from Aaron Parecki and it talks about the OAuth 2.0 implicit flow and how everything's changing to use Pixie and authorization code flow in app. So you can start using Pixie today both using this tutorial from Aaron as well as using Ionic 4 and our OctaDev Schematics that leverage Ionic.octa and its Pixie support. Thank you for watching this screencast today. If you'd like to see more you can follow me on Twitter at mrable. You can also follow my team on OctaDev. Friends don't let friends build authentication so you should sign up for an octa developer account and let us do it for you. And also subscribe to our YouTube channel where we have a lot of tutorials and screencasts like this one.