 Hello, developers. My name is Matt Ravel, and today I'd like to show you how to add a login feature to your React Native applications. If you're not familiar with React Native, it offers a way to create mobile applications using React and JavaScript, which are probably tools you know and love. I wrote a blog post about this called create a React Native application with login in 10 minutes. So if you want to go through and see much more than what I'm talking about here, it's all available in this blog post, and you'll notice there's a number of prerequisites. So I already have node installed. I have yarn installed. And you'll notice it also says Java 8. Well, I actually have Java 12 installed, and that'll work just fine. You also need an octa developer account. So if you were to click sign up, you can see enter your email first name, last name, company, and country, and then you'll get a free forever octa developer account. It's good for up to 1,000 monthly active users. And if you want to make it like 2,000 or 20,000, then it's just a little bit of cash. I have a GitHub repo that's associated with the blog post and a number of steps. So I've just taken the blog post and condensed it down into the bare minimum steps we'll need to do this. So I'm going to put that on the left here, and we'll keep this on the right. And I already have React Native CLI installed. So you can see that by doing React Native version. And I'll start by creating a React Native application called React Native Login. Don't! Round command. React Native init react native login. So you can see that took about a minute to create. That can take different times based on your internet connection speed and your hardware octa has a react native SDK, which is based on our libraries for OIDC with Android and OIDC with iOS. It uses authorization code flow with pixie. So there's a one time code that's exchanged. And it's the most secure way of doing OAuth on iOS and Android. I also created a octa dev schematics project. And this is originally from Angular. They provide the schematic API, but allows you to manipulate basically any project that has a package.json and add files manipulate files, things like that. So I'll be using that today. So first, I'm going to start by installing schematic CLI. And then I'll create a native application on octa. So I have an account at this URL. And if you click on applications, add application, you'll want to create a native application. And then I'll just call mine react native and keep the defaults for the login redirect URI. Click done. And then you'll want to edit it and add the same URL for logout redirect URI. Okay, so that's all set up. Let's add the schematic first. So we'll add it as a developer dependency. We'll CD into our react native login project. Install octa dev schematics. So I do recommend committing your project to get at this point. So I'm going to do get init and get add and get commit. Now you see we're on a clean tree. So I can run schematics octa dev schematics and then add off. And it'll prompt me for the issuer URL, which is available under API authorization servers. So you copy this, paste that in there. And then the applications client ID is right here. And this will do a number of things. It'll not only configure application to work with octa and OIDC, but it'll also add some tests. So you see here we have an app test and an off test that's been added. So if we were to do a get status, you can see we have a number of new files, the app.js has modified. And we added an off.js and off config and a setup jest. And the reason for the jest setup is because schematics uses double underscore as a placeholder. And if you look at this project, there's double underscore test. And so there's nothing in schematics that I could do to actually get it to replace that directory. So I just created a new one. And then I can figure just to point to that new directory. So if we were to do a get diff, you can see what it's adding, it's adding off to that app.js. It's adding a new section that says basically log in with octa. And then it manipulates the build dot gradle to have the auth redirect scheme. It changes the platform for iOS to be 11. It adds an Android bit tray maven repository. It updates the minimum SDK 19. And it adds a bunch of new dependencies. So now we can run npm test to verify everything that we've added actually works. So all our test pass and we even have an off test. So that's nice. And then we can open the project in Xcode. And you need to do this because the library for iOS, OIDC authentication from octa is written in Swift. And so by default, React Native creates a non Swift library. And so you just have to add a Swift file. And then it makes it into a Swiss compatible library. So I tried to do this programmatically with the schematic and just creating a Swift file doesn't do it. It modifies a bunch of other settings. So I'm going to call this polyfill. And then you don't need to create a bridging header. So you can just say don't create. And then that's all you need to do. You can also go into the projects settings and make sure that you have signing configured. So signing and capabilities here. And then you could deploy it as a production app. So I'm going to cancel out of there. And now I should be able to do pod install. So go into the iOS directory and run pod install. And then from the top level directory, you can run react native run iOS. You can see it adds a login button to the home screen in the application. We can click login. And it'll prompt you. And this is something that you can't really get away from because this is a feature of or a safety feature of iOS. So it's going to tell you what website wants to sign in. It'll take you to that website and then you can enter your credentials. And you come back and you're logged in. So you can do a get user from ID token or you can get user from request. And those are all using the react native SDK and its methods to get that information. And then you can log out as well. This is another safety feature. I haven't figured out a way around it, but it'll prompt you again to log out. So now we're logged out. That's iOS. One thing I forgot to mention is in the auth config file is all your settings for OIDC. So you can see the schematic just puts them in there for you. And so now we can also do Android. So if we were to open up Android studio, you can run an AVD and Android virtual device. You have to do that first or you have to plug in a phone. Otherwise when you run react native run Android, it won't actually do anything. So we can click here to create a new AVD, create virtual device and maybe a Pixel 3 XL and choose the latest operating system and finish. And then you can start it. You can choose to update if it prompts you to update. And then when your AVD is up and running, you can run react native run Android. That can take a couple minutes to finish building and deploying, but once it's up, you'll see there's a login button you can click on. That'll open up Chrome. Then you can log in there as well. And just like with iOS, you can also get the user's information from the ID token. If you want to do a custom login screen with react native, we do have an example for that. We go to octa samples js react native and github. This is where that's at, or if you just go to our samples js react native, it shows not only what I showed with the browser sign in, but custom sign in as well. And if you were to read the blog poster is actually a section that shows you how to do it the hard way. So instead of using schematics and having that install and update the files for you, you can do it the hard way. And I also wanted to let you know about a cool thing called ignite j hipster. So ignite j hipster is a react native boilerplate for j hipster app. So if you want to generate a back end with node or dot net or java, j hipster supports that. And then you could create a react native front end using ignite j hipster. And it's got an energy generator for crud, end to end tests, and much more. So that's a pretty cool thing. And you can watch a presentation on YouTube if you like about it. And so the GitHub repo is here, blog post is here. And I thank you for watching this screencast and learning about react native authentication. It's, it's pretty easy to do. You can follow my team on Twitter at octadev. You can follow me on Twitter at mrable. And of course, friends don't like friends build authentication. And if you like this video, I'd encourage you to subscribe to our YouTube channel where we try to post videos every week. Thank you. Hope you have a great day.