Join Diego Lizarazo, Senior Developer Evangelist, and Ismail Mustafa, Engineering Manager, as they demonstrate how to integrate our embedded SDK in an iOS application in less than 20 minutes.

With this step-by-step live demo, you'll learn how to:

• Import the SDK into your iOS application
• Create a new user without passwords, codes, or push notifications
• Complete user registration
• Authenticate the user with a zero-friction passwordless experience

Transcript

Diego

Well, hello everyone. Welcome to the live coding session from the Beyond Identity team. So today, we're going to be talking about embedding passwordless authentication. And we're going to have a demo on iOS, that in under 20 minutes is going to use as the case from Secure Customers to show us how we can use the technology to make a great experience for all your applications. So, we're going to start a little bit with an agenda and then we're going to go on the more meaty parts of the session, like of this presentation. So first, we're going to be talking about what is Secure Customers, and why is it so cool, and why you would like to have it in your own applications. 

Then Ismail is going to take it over with a demo, and we're going to see some code and presentation. I think the demo we're going to record, so I hope you guys agree with me afterwards. Then we're going to see a little bit about the steps to integrate SDKs in your applications, code overview, what is it that you need to do. 

And finally, if you are interested in learning more about the SDKs, about the technology, about the team in general, we're going to show you how to turn into, be an early adopter of the Secure Customers SDKs. So, a quick presentation. I am Diego Lizarazo, senior developer evangelist with Beyond Identity. And I'm going to be your point of contact pretty much for any questions that you may have about the company and also about these particular products that are we're going to be showing. 

And in future events, quite likely, you're also going to see that I'm going to be taking the lead on letting you know what is it that we're doing and all the cool things that our engineers are creating. And now we have Ismail. So, you are going to hear a little bit, a lot from him today. And I'm just going to start like, hey, Ismail, like, tell us a little bit more about yourself. What is your role in Beyond Identity? And like how are you involved in the Secure Customers SDK development? 

Ismail

Yeah, absolutely. Thank you, Diego. So, my name is Ismail. I'm an engineering manager here at Beyond Identity. I've been here for over two years now. And I manage a team called developer experience. And we focus on the science side of the product, so kind of building out the SDKs and the tools necessary for developers to embed our technology into their applications. 

And one of those SDKs is what we're going to be going over today, the iOS SDK. But we've also got an Android SDK, we've got a web authenticator that you can integrate with using, you know, OAuth and OIDC, and other SDKs in the works for other platforms. 

Diego

Okay, that's perfect. So, thank you for that Ismail. And let's talk a little bit about Secure Customers. So, what is this? So, pretty much Secure Customers provides you with a set of SDKs, just like Ismail was mentioning. And those SDKs enable your apps to have an excellent passwordless experience, so, at the same time that fully protects your customers from account takeover. 

So, I think it's also quite important to mention that with Secure Customers, your users will not need to download the Beyond Identity Authenticator, and you're going to see it in the demo how that creates an elegant and simple experience for your customers. Also, you're going to have pretty much the best of both worlds, kind of like ease of experience for all your users and customers in your applications, and a secure authentication in all your native or web apps, which again, that's something that Ismail quite on early mentioned in his section. 

So, that is kind of the general thing. But I think an important part for this session today is getting into the demo. So, this is demo time. I'm going to allow Ismail to present. 

Ismail

So, I'm going to show you what our passwordless solution looks like in a demo application called Solemate. And Solemate is an e-commerce app in which you can shop for your favorite shoes, and of course, you want to be assured that it's very difficult if not impossible for your account to be taken over. And we're going to show you how to do just that using Beyond Identity's secure customer solution. 

So, I've got the Solemate app up here on my screen I'm sharing from my actual device. And the first thing we're gonna do is I'm going to tap on login or sign up. And that takes us to the screen that shows two different things. At the top of the screen we see a legacy way to sign up for a Solemate account using an email and a password. And this could be what your application already has, and a lot of applications already use this. 

And then at the bottom, we see the approach that we provide, which is a button that allows you to create an account with Solemate passwordlessly, and also authenticate into that account. So, I'm going to go ahead and I'm going to tap on Continue with passwordless. And the first thing we see here is that it asks us to set up a passwordless credential on this device. 

So, before I move forward, I want to explain what a credential is exactly. And a credential is your identity that is backed by a private key securely stored on that device. And when I say securely stored, I mean, on iOS and Mac OS, for example, that private key lives in the Secure Enclave. 

On an Android device, like a Google Pixel, that could be the Titan chip. On a Windows device that could be a TPM. Yeah, so anything like that. Okay, so now let's go ahead and actually create an account with Solemate. So, I'm going to tap on set up. And it takes me to the screen where I need to input an email address. 

So, let's go ahead and do that. All right, I'm going to tap on Register. And it lets me know to check my email. 

So, I'm going to back out of this app, go into my email. And I see that I've received an email from Beyond Identity or from Solemate on behalf of Beyond Identity. And what it's asking me to do is to tap this complete registration button in order to complete the registration. So, I'm going to go ahead and tap complete registration. It's going to redirect me into the Solemate application, create that credential on my device to register me, and then log me right in. 

So, obviously that happened very quickly. So, what I'm going to do is I'm going to log back out by going to my account settings, go back to this button here, continue with passwordless login. And this time around, it detects that there is already a credential on the device, the one I just registered. So, I'm going to tap on yes, continue to log in. 

And it'll log me right in. So, that's pretty much it for registration and actually logging into an application. Now, there's one more thing I want to show you, and that is, if I go into my account settings here, and tap on passwordless login, you'll see that this modal pops up, and this modal is provided by our SDKs. 

And there are a couple of things we can do here. One, is we can view the device credential, and that gives us some information about the credential associated with this device, as well as the ability to delete the credential from the device if we choose to do that. Another thing that we can do that's a bit more interesting is we can actually set up this credential on a different device. 

So, if you want to use Solemate on a different phone that you have, maybe on a different platform like a computer, you can do that. And for the case of this demo, I've got a second iOS device over here on the right side. And if I tap on log in and continue with passwordless login, we see that there is no credential associated with this device, and it's asking me to set one up. 

Rather than go through the process of setting one up here, since I already have an existing account, there's this down here that asks me if I have a credential elsewhere. I'm going to tap on add to this device. And now it's expecting a code for me to enter. So, if I go back to the device on the left side that contains that credential, and tap on Display QR code, it does a face ID biometric scan to ensure that no one can just take your device and add your credential to their own device. 

And it shows a QR code here that you can scan either using a camera or a code at the very bottom that you can use to input to add this credential to your new device. So, I'm going to go ahead and type in that code at the bottom of the screen. And once I do that, it's going to actually set up a credential, register me on this device, and log me right in. 

Again, that happened very quickly. But if I go into my account settings, here, we see this is in fact the email I registered with on the device in the left side. And if I log out and go back to continue with passwordless login, we see that it detects that a credential is already on this device. 

And we can go ahead and login seamlessly right into the application. 

Diego

So, just to kind of like clarify a little bit there, like Ismail, so these would be perfect if someone for example is trying to get a new device, a new phone and wants to give access to all the applications that have authentication with Beyond Identity, and then they don't have to do all that entire process of, "Hey, I forgot my password," or anything like that. Literally they just can transfer from one to the other, and then you could have gone back to the original one that in this hypothetical case would be the device that I'm getting rid of, and I just destroyed the credential there. 

And then I'm done, right? 

Ismail

Absolutely, yeah. Yeah, you could very well do that, just transfer it to a new device and, you know, clear it out from your old device. 

Diego

Perfect. And that is something that I think it's great for developers and for users, because then obviously they don't have to deal with that awful part that is like passwords, that is what we want to pretty much get rid of. 

Ismail

Right, definitely. 

Diego

So, I think this part of the demo, I think it's awesome. That I think especially for developers, it would be great if we can see a little bit more on the code, what is it that all this awesome thing that you were doing, this magic pretty much, where does it come from? 

And specifically, how do you start like setting up your button to get that passwordless authentication? So, we're going to check it on iOS. But just like Ismail mentioned before, we have also that for Android and web applications. But just to let you know, we're focusing today on iOS, right? 

Ismail

Right. Yes, we are focusing on iOS. So yeah, let's get right into it. So, I'm just going to clean up my screen here and bring up this. This is essentially all of the code associated with the Solemate app, except everything to do with the Beyond Identity, the logic that's part of the code has been completely removed. 

So, we're going to go through the entire process of kind of bringing that logic back in from scratch and seeing how we can build up that experience I just demoed on Solemate. So, the first thing we want to do is we want to bring the SDK into your application. And we can do that using Swift Package Manager. 

So, if you go to file, add packages, you can see I've already brought it into this project previously, and so it shows up in a recently used list. But if you were to do this from scratch, you would go to github.com/gobeyondidentity/bi-sdk-swift, and you would copy this URL, paste it into the search bar, and it'll populate it just like this. 

So, now that it's here, I'm just going to bring in the latest version, add it to the Solemate project, and click on add package. So, this step takes a little while, and there's a bunch of other stuff we still have to do before we can get to the actual coding aspect of it. So, let's go through that setup. 

So, I've got that set up here on the right side. And one thing we have to do is actually create an account with Beyond Identity. And the way we do that is we have to actually reach out to Beyond Identity, and someone has to create an account for you. But the end result of that is that you get an API token you can use to access any APIs you need to configure your account. 

So, I've done that already beforehand, and I have this API token I can use. So, the next thing we want to do is actually configure our account. And we do that by posting to this specific URL here. There are a couple of parameters that we want to modify that are necessary in order to move forward. And the first is specifying a display name here. 

So, this is the display name that shows up in the email that I showed you in the demo, and also on the credential itself. You're also going to want to specify a logo URI. And this is a logo that once again shows up on the email and on the credential itself. And arguably, the most important thing you need to set up is this registration redirect URI. And that when you tap on complete registration in the email, this is how you redirect from the email into your application. 

So, the app schema associated with our application is Solemate. So, I've set this up. So, when I tap on complete registration it knows exactly which application to redirect to, to complete that registration flow. So, let's go ahead and take that, paste it on the right side here in the terminal and execute it. And we see that I get back a response containing all of the configuration associated with my account on Beyond Identity. 

And I get all the values have been updated, we're all set to go there. 

Diego

I was just going to ask if all this setup is similar would you in Android, or do you think it's like a lot of differences?

Ismail 

Oh, this would be identical to what you would do in Android. 

Diego

Exactly. So, if you go to the documentation, you're going to have examples of that, and pretty much copy paste, and well, change the parameters you were talking about. 

Ismail

Right, exactly. And the final thing we need to do now is actually create an OIDC client. And I'm not going to go into too many details here about exactly what this is. But if you've ever set up sign in with Google or sign in with Facebook, you have to go through this flow of actually creating an OIDC client in order to perform the authorization and authentication. 

So, for this, we would post to this particular URL, OIDC/clients. And we would specify a couple of things here, the name, the URI to redirect to, which in our case would be the app scheme, and a couple of other parameters that are explained in a lot more detail on our developer documentation. 

So, I'll go ahead and actually create that since we're going to need that when implementing the code. And we get a response back here, for all the attributes associated with our OIDC client, but really, the most important one we care about is going to be the client ID. So, go ahead and copy that down here. 

Okay, so that's essentially all the setup you really need to do. We can now go back into our Xcode application and bring in the required modules that we need. So, to do what we need to do, we need to bring in the Beyond Identity embedded SDK, which contains certain types that we need to bring into scope, and the Beyond Identity embedded UI, which is all of the UI and the models that I showed you in the Solemate app. 

So, go ahead and add that package. And now we've brought that in here. The first thing we're going to implement is this button over here. So, this button is fully provided by the SDK, you just need to take it and actually add it to your UI. 

In our case, we're going to add it to the log in view controller, which is this view controller over here. And before doing that, let's just import in the necessary modules. So, we're importing Beyond Identity SDK and the Beyond Identity embedded UI. And now when we go back down here, we can start creating that Beyond Identity button. And we do so by initializing this Beyond Identity button that's broaden the scope by what I just imported. 

Okay, so the first thing we need to specify here is this OAuth flow type. And there are two different OAuth flow types here. There's authorized, which would return an authorization code to you, and then it's up to you to send this authorization code up to your backend and do a token exchange there in order to get the ID token and the access token. 

Or there's this authenticate OAuth flow type that immediately returns a token response containing that ID token and access token. Since I've set up my OIDC client in a way that allows us to use this authenticate flow, I'm going to go ahead and use that one. So, for that flow type there's some config we need to set up. We need that client ID that I created in a step earlier. 

So, we paste that right here. We have to specify the redirect URI, which is the app scheme of our application. And then there's this callback here that happens when an authentication is successful, you get that token response back and you can take the access token persisted and use it to actually sign the user in. 

In our case, we've got a function down here that already does just that. It stores the access token somewhere and then redirects the user to a logged in state. So, I'll use that over here. And then finally, there's certain config we need to specify here that controls what could show up on the UI that presents itself, that same UI that you saw when we tapped on continue with passwordless login, and also what some of the buttons do. 

So, in our case, we're going to need a support URL. So, this is a URL that you can redirect users to if anything goes wrong. For now, I'm just going to make something up, and go to solemate.com/support. And then there are two actions here. So, the first action is what happens when a user clicks on setup credential, which is the button I clicked up on that took me to a view controller containing an email input. 

We've already have that function defined here, right, we're initializing a register view controller, and we're displaying that view controller. So, I'll go ahead and use that. And then there's this recover user action, this is not something I showed during the demo. But this is very identical to the signup action, except this would take you to a view controller where you can actually recover your credential if anything has gone wrong. 

So, add that action here. So, we've initialized our button, we've provided all of the arguments that we need to provide. And now the last thing we have to do is actually add it to our view. And that's it, we've added the continue with passwordless button to our login view controller. 

So, from the demo, you'll remember there was that redirect back into the app from the email where we continued the registration flow, registered a credential, and then log the user right in. 

And that's going to happen in the scene delegate. So once again, let's import the necessary modules. And if we go down here, there's this function that gets called whenever a user deep links into our application. And the URL that the user used to deep link into the application can be pulled out this way. So, once we have that URL, it's just as simple as calling this function that we provide called register credential and login. 

And it takes three different arguments. The first thing it needs is access to the window, and this is so that I can get the topmost view controller and use that to present our own view controller. We pass the URL directly into here, this is the deep linked URL. And then finally, some config we need to specify here. 

So, remember, when we went through this registration, it automatically logged you in, so we're going to have to specify how we want to log the user in. And we're going to use that authenticate flow since that's the flow that we specified earlier when we implemented that button in the log in view controller. 

And we're going to need to fill this in with the same parameters, so, the client ID that we created here, the same redirect URI. And once again, I've got a very similar function on getAauthenticate that persists the access token somewhere on logs, these are right in. 

So, we'll go ahead and use that. We also need to specify a support URL here. And finally, a recover user action, because there is a possibility you might need to actually recover your credential from this particular flow. 

So, once we've done this, we essentially wired up the full registration flow and the authentication flow to log you in. So, there's really only one more thing we have to do, and that is, if you remember from the demo that when I went to the settings screen and brought up that settings modal that allowed you to manage your credential or add that credential to a different device, that we're going to add to our account view controller. 

So, before I do anything, once again, we need to bring those two modules in. And then, when a specific cell on a table view is tapped, since this entire setting screen is structured as a table view, we're going to want to invoke a function that we provide, and that is openBeyondIdentitySettings. 

And this will bring up that modal that allows you to manage your credential. So, what it needs here is a view controller, and this is so that it knows which view controller it can use to present our view controller that we provide. So, we're just going to pass in the account view controller here. And then there's some config once again that we did specify here to control the UI. So, passing that same support URL that we've been passing in all along. 

That exact same signup action. And finally, that exact same recover user action. And once we've done that, really the only thing left to do is actually build this and see if I've wired it all up correctly. 

I'm just going to build it, and it's going to refresh this with a new instance of the app. Okay, looks like I missed one thing here. Okay, let's build it again. And now if we go into log in or sign up, there is the button we just added. If I click on continue with passwordless login, we're using the same device that we previously registered our credential with, so it's already going to pick up that we have a credential on this device. 

So, we'll tap on yes, continue to log in. And it'll log you right in. And then if I go into account settings, we see same account. And if I tap on passwordless login, this is the sending screen that we just wired up over here. 

Diego

Good. I think that's great. And well, pretty much we're currently fulfilling what we were promising, like, in kind of, like, 20 minutes with explanation, we were able to set it all up. And then my question at this point would be like, if someone wants to take this demo, and pretty much replicate all the steps after they check these videos that we're going to make available, is this demo in the documentation currently available for early adopters? 

Ismail

It is, yes, on developer.beyondidentity.com. And it's going to go into a lot more detail since I obviously glossed over a couple of things here. 

Diego

Yeah. Then, well, that's perfect because I was going to show you in my screen like that part, directly. You should be able to see the link to the documentation, where you get all the details, well and tutorials that we're going to put there too for you to use, and you have the QR code directly to go to that link. 

And also, if you're interested in being part of the early adopter program that we have right now, also I created the QR code so you can be part of it, and we'll start kind of like integrating the SDK directly on your application. And again, I'm going to go back for a second to the documentation. Here, normally, you're going to find the demo that you had seen today with Ismail, but also pretty much the same documentation, the same implementation that you need for your Android applications or web applications. 

So, you're also going to see them here. I think we are done and we really appreciate your participation, and hope that you come for your presentations in the future. Thank you, Ismail. 

Ismail

All right. Thank you so much, Diego.