Swift: Phone Number/SMS Auth Tutorial (Xcode, Firebase, iOS) – 2021 Tutorial

what's going on guys welcome back to another video in today's video we're going to be learning to set up phone number authentication with an sms code for your ios app so here is the app we're going to put together first and foremost we need to enter a number big surprise so we're going to enter in a mock number that i set up for testing so let's go ahead and enter that in we're going to then hit continue now on the simulator we get this intermittent verification screen by design on your device you wouldn't see that and then we get to the screen to enter the sms code super secure sms code six ones and finally once we hit continue it'll verify and log us in now the coolest part about this of course we remain logged in so if i close and reopen boom still logged in so if that sounds good drop a like down below it's been a while since i did a video hit subscribe if you're new to this channel and let's build this out all right we're going to get started by opening up xcode and creating a new project we're going to stick with the app template under ios as soon as xcode decides to stop being slow here in the meantime i've also got firebase opened up here we're going to deal with that in a second let's select app under ios i'm going to go ahead and give this project a name a phone off go ahead and make sure your ui is storyboard your user interface style and your language is swift let's continue here we'll toss it onto our desktop and get into it straight away so because we're going to be using firebase as the infra to actually do the phone authentication we first need to bring in said dependency so i'm going to actually go ahead and close up xcode and we are going to open up terminal and cd into our project so we're going to go to desktop and we're going to go to from there our project folder which is phone off we're going to run pod init to initialize cocoapods just like so and then we're going to go ahead and open up the pod file that it should have created for us now in here we're going to bring in one dependency and the dependency is going to be firebase slash auth big surprise authentication we're going to lower case that p so it doesn't give us any issues and then we can go ahead in a terminal and run pod install now this is going to basically install the firebase authentication dependency and while it's doing that we can actually go ahead and start to set up our firebase application on firebase's consoles i've got yeah my login account here i'm going to click it to add a new project i'm going to go into here and type in maybe phone auth as my new project name we're going to continue pretend like we read all this we're going to select a default account for analytics which is irrelevant let that do its thing it's creating the project and we're going to wait for this to finish up here hopefully it doesn't take too too long basically the premise of phone authentication is we're gonna you know enter in a phone number it's gonna send us a text and we're gonna input the code that we get and that's gonna complete the whole authentication flow now firebase does in fact offer a way to use phone numbers that are quote-unquote test and dummy numbers so we're going to be using that in today's video so let's come into here and select ios we're going to need to give our applications bundle id and the general name so i'm gonna go ahead and call this phone uh maybe auth ios and once this is done installing we can actually go ahead and open up the project one more time since it's being a little slow what i'm going to do is i'm going to cheat a little bit and open up the xcode prods just so i can grab the bundle id while that installs and does its thing so we're going to select this and i'm gonna copy this bundle id which should be unique for you our bundle identifier we're gonna go ahead and paste it on in here i'm gonna go and hit continue which is going to generate a google services file for us give it a second there it is we basically need to download and include this in our project so i'll toss it onto my desktop here hit next a couple of times it's telling us to install basically the dependencies which we have done already so let that do its thing hopefully it's almost done it does end up taking a little bit of time apparently this time it's taking much longer so perhaps i'll pause the video here maybe we'll just wait it out so feel free to jump ahead uh once these dependencies have finished installing we'll go ahead and open up the workspace after you install it the first time every subsequent pod install is much faster and actually looks like it finished as soon as i decided to be impatient so we can now close up terminal and now we're going to jump in to the xc workspace it has created for us cool so now in xcode what we want to do is actually bring in this google services file and we want to get into the code of actual phone authentication so how do we do that well first things first in the app delegate we need to initialize firebase so we're going to go ahead and say import firebase just like that we can just import core and then in the first function here for application did finish launching we are going to say firebase app and we're going to go ahead and hit configure and that's going to basically do what it sounds like i'm also going to change the simulator here to maybe a 12 pro max and we're going to go ahead and hit command b to build our project now while it's doing that let's write the code to actually do the phone authentication so we're going to go ahead and create a new file here and i like to name things as appropriately as possible so we're going to create a manager which is going to handle auth hence we're going to call it auth manager now in this class we're going to be writing functions to basically handle you know starting the authentication flow once the user actually inputs their phone number as well as verifying the sms code that they enter is correct as well so we're going to go ahead and create this as a single shared instance hence the static let shared and basically let's define two functions to handle what i just described so the first one i'm going to go ahead and say start off and it's going to take in a phone number which should be a string and then it's going to take in a completion handler which will basically be a callback you know whether or not the start of the authentication flow has succeeded so we'll go ahead and do that looks like our build just succeeded here as well and let me go ahead and copy and paste this and write the other function and this other one is going to be verify code which is going to take in the user's inputted sms code as well as a callback and this callback is going to basically represent if the user has successfully signed in so while we're in here we might as well uh implement these functions so let's go ahead and import uh firebase auth and i'm gonna go ahead and create an instance of the auth uh object which is i'm which is gonna be called auth and i'm gonna go ahead and say this is auth dot auth which might be a little confusing how google has named it but that's in fact what you will want here and let's write out these two functions so we're going to have three screens in our app the first one it will ask you to input basically your phone number here and then assuming we start the process the next screen will ask you to input the sms code and the third screen will basically be if you're successfully signed in or not so that all said let's go ahead and do it so we're gonna start the authentication flow by first getting the provider so there is something called phone auth provider and you can get the provider off of that and the very first thing that you want to actually do is call a function which is verify phone number and we want the one without multi-factor so the first thing we're going to pass in here is the actual phone number the ui delegate is a little irrelevant for this video so we'll pass in nil and the completion handler is going to give us back basically a verification id as well as a error so in the callback we want to take care of two things we want to make sure that we actually have a verification id and we also want to make sure that the error is nil implying you know nothing has gone wrong so go ahead and unwrap both of those or verification id verify error is nil now your next question might be well what the heck is this verification id thing it's basically a string that's generated when you call this function and we need to hang on to it for when the user tries to verify the sms code it's another layer of security that the phone auth provider gives us so what we want to go ahead and do here is we want to capture weak self and i'm going to hang on to this verification id on this auth manager class so essentially i'm going to add a private property it's going to be named the same thing and its type is going to be a string optional and down here we can now say self dot the verification id is going to be verification id and we can call the completion handler and say true everything succeeded and in this case if something went wrong we're going to go ahead and say false just like that and that's basically all you need to do for this first function here and in this other function all we need now now needs to do is try to create a credential and actually log the user in or authenticate them so how do you create a credential well we're going to say let's credential is going to be once again the phone auth provider dot provider and then we're going to say credential now this credential is going to take in a verification id as well as a code the code is going to be the sms code that the user has passed in that we're going to pass in as this parameter right here and the verification id is the id that was generated when we made this first call so you guys guessed it we're going to unwrap it up here and that's what we are going to provide so i'm going to go ahead and say guard let's verification id is a verification id and if we don't have it for any reason that means something has gone horribly wrong so we're going to call the completion handler and pass back false and we're almost done believe it or not now that we have a credential we're going to ask the auth manager to sign us in so we're going to say sign in with credential and it's this first one here we're going to pass in the credential and the completion handler is going to give us a result and a error and we're just going to verify that the result is non-nil and we're also going to verify that the error is nil if something goes wrong and we end up in the else we're going to say completion false otherwise we're going to go ahead and say completion true and that's literally how you set up phone authentication with firebase so let's actually build out the ui i'm not going to make it too uh too nice aesthetically but just to test this out now before we actually do that back in our firebase console we do need to enable phone based authentication so we need to go under build authentication and we're going to hit the button to get started here and we're going to get this screen now we have all the providers at firebase supports we're going to select phone and we need to enable it so we've got this first switch here so we're going to set this to enabled just like that we're going to hit save and like i mentioned we're going to be using a mock number to test this out so we're going to hit this again and there is an option here phone numbers for testing which you can see is optional we're going to hit the drop down and you can see here that we can add a number with the prefix 650 and 555. so i'm going to do that exactly and then we're going to give a code on the right hand side too so we're going to say plus one six five oh five five five and maybe we'll do one one one one and the code here is going to be one one one one one one so six ones i think the logic here is 650 is not a valid us number prefix which is why we can use it as a test number we'll go ahead and hit add and let's build out the ui and test this end to end so just so you guys can see back in this tab we don't have any users currently if i refresh this page let's go ahead and build out our ui so currently our ui is empty shocker shocker so what we want to actually do is a couple things so we're going to get rid of the storyboard which gets uh created by default with this template so we're gonna select main there i'm gonna hit delete and then move to trash and respectively we're gonna have to go into the uh i believe info.plist and we're gonna open up this like scene manifest all the way down until we find where the main storyboard is referenced which is indeed right here and we're going to go ahead and get rid of it now this begs the question what screen is our app's initial screen so that is going to be this view controller here so i'm going to go ahead and call this this one is going to be phone view controller and we're just going to create a few more view controllers so we can actually hook up this whole thing end to end so i'm going to create a folder here on the left hand side that is going to be called controllers so we can keep things somewhat organized so we're going to call that controllers i'll toss that in there and let me go ahead and create two more controllers one for the account view controller which is basically what we're going to see when the user has signed in so i'm going to say account view controller it's going to be subclassing view controller in swift we'll create one more and this other one here is going to be sms code you can say sms code view controller and this one shocker shocker is going to be where the user inputs their sms code the other thing we want to go ahead and do in the scene delegate is actually configure you know what gets shown once the user launches the app so this thing here let's go ahead and fix this this thing here is going to be a window scene and what we want to go ahead and do is figure out if the user is signed in so let me go ahead and import firebase off and we're going to do a couple of things to set up the window well first and foremost we need to instantiate a window that our app is going to be hosted in we're going to pass in that windows scene now let's see right below this we're going to want to go ahead and say self dot window is going to be window above this we're going to say window make key and visible and based on if the user signed in we're going to show the you know logged in state otherwise we're going to go ahead and show the phone number view controller so how do we check if the user is signed in we're going to say if auth dot off let's see let's try that again auth dot off dot current user is nil aka we are not signed in we're gonna go ahead and create a view controller which is gonna be our phone view controller i'm gonna go ahead and give it a title of sign in we're going to wrap it inside of a navigation view controller just so we get that nice top bar so we're going to say navigation controller root controller is going to be vc just like that and we're going to say window dot root view controller is nav vc now in the other case in the case that we are signed in this one's much easier we're simply going to say window dots let's try that again window dot root view controller will be our logged in state which we have called account view controller so let's go and build out these screens i'm going to keep it simple hopefully and then we can test this end to end so first things first all we really need on this screen is a text field so i'm going to call this a phone field i'm not going to go too crazy like i said with customization here we're just going to set a background color and a placeholder so we'll say the field is a ui text field i'll say field text alignment perhaps is going to be centered we'll return said field here also go ahead and like i said give it a background color of maybe secondary system background this one here and finally we're going to give it a placeholder and this is going to be phone number so let's see let's go ahead and add this so we need to give this a background color as well so this thing here will be system background just like that we are going to go ahead and save you add sub view that's not how you spell add sub view let's try that one more time we're going to say phone field we're going to go ahead and also give this guy a frame so we'll say the frame here for the phone field will be cg rect 0 0 maybe we'll make it i don't know 220 by 50 and just for the sake of being lazy we'll just go ahead and center this guy so i'm going to say phone fields dot center is going to be view dot center now how do we know once the user is done inputting a phone number so i'm going to go ahead and use the delegate to do that so we're going to go ahead and say uh delegates is self and once the user hits the done button on the field we're gonna go ahead and try to proceed so we're gonna say the return key type is one of the properties on here the dot return key i believe there it is is going to maybe be continue and we're going to conform here to the ui text field delegate and the only function we care about is should return and what this is going to do is get called once the user presses that continue button so what do we want to do well we're going to get rid of the keyboard on the field and we're going to check the phone number inside the field so i'm going to go ahead and say the text in the field is going to be the text field dot text and that phone number i'm getting ahead of myself and we are also going to be smart about this and make sure that the text isn't actually empty because if we just enter empty text that's not doing ourselves any favors so assuming that is the case we're gonna go ahead and say auth manager what we typed out already dot shared and we're gonna go ahead and call that start function we're gonna pass in the phone number which we'll do in a second and then we're gonna have a call back here which will give us success so let's see start off we'll take in that phone number so i'm gonna go ahead and say number here and this is gonna be success and assuming we have succeeded we're going to push to the next controller the next screen to enter in the sms code so we're going to say guard let's success or guard success i should say assuming it is true we are going to go to the next screen so here we are going to say dispatch queue dot main dot async we want to go to the next screen so here we can go ahead and say let's vc and the reason this uh color coding is kind of off is because we have not defined this yet so let me just do that so it stops yelling at me the reason i didn't define this is i wanted to call out you do need to add the country code as a prefix to your phone number which we're doing manually here plus one is for the united states so the next thing we're going to do is create that sms code controller and we're going to go ahead and push this controller on to the stack so hopefully everyone's following along i know i'm going a little quick here we're going to set a title on this and we're going to say enter code maybe as a title and let's see let me actually go ahead and give this a run and make sure that we're uh we're making progress here so secondary system background let's see this should not be an image this should be background color is what i'm looking for which is why we have that strange error and let's see let's go ahead and hit command b make sure it's building let me go ahead and just give it a run here make sure we're at least seeing our phone field so looks like the app is still building hopefully finishes up in a quick second looks like we have an error somewhere that's not good so let's figure out what i have broken here so it looks like we have an equal here let's see window scene we need a space before that for some odd reason because xcode says i do looks like we have built running in our simulator and we should see hopefully that phone number field here in a quick second simulator loves to be slow sometimes so just bear with it looks like the device is actually crashing so due to uncut exception it can't find the main storyboard so the reason it can't find it or the reason it's looking for it i should say is because we still need to get rid of in the info p list i believe the name of the main storyboard so if we click on info up here we should see main storyboard somewhere in this list so i see launch screen let's see if i can find it here but we do need to get rid of it right here so i'm going to get rid of that main storyboard just select it and uh hit command select to hit backspace and command r to give it a run this way our project knows that it needs to go take a look at our code to actually go ahead and run the app so it looks like it's still crashing let's see what other references we have of that storyboard i want to bet it's somewhere in here so let's go ahead and open up this application scene manifest i believe we need to update it here as well so we're going to open this up all the way and in here i also see main so i'm going to select it and hit backspace hit it one more time to build and run command r and hopefully we now start to see our ui if everyone crosses their fingers all right we're so now seeing our ui so i want to come in here we're going to tap it and we're going to type in that phone number but before we do that let's go ahead and actually build the next screen since we need that to actually fully authenticate with the sms code now i'm going to be lazy and we're going to copy this entire view controller and i'm going to paste it in sms controller so we're going to copy this guy i'm going to paste it here and the only difference is we're going to change the name of the class so it doesn't conflict let's go ahead and do that and let's see what we want to do i'm going to rename this to be a code field we're going to also call this enter code just like that and let's just rename some of the other contents so phone fields to code gonna update this and let's see what else we need to do now once the user has hit return in this case instead of getting the phone number what we're getting is the code so the text is actually the code and what we want to go ahead and do is pretty similar actually but instead of saying start the other function that we have added i believe is we're going to say verify code we're going to pass in the code and this completion handler is basically going to be identical so i've copy and pasted the previous one so we're going to validate success and you know if we succeed we're going to go ahead and show the account controller now because presumably we are now signed in so how do we show the account controller we're simply going to say self we're going to present vc animated whoops that's not how you spell animated animated true and that should hopefully be sufficient to present this screen so let's see what is going on here this should be code which is going to be lowercase is what we have to find right up there and let's see the other thing i'm going to do is say vc.modal presentation style and this guy is going to be full screen and we should be in business so let me go ahead and give this a run looks like we have a problem here for presenting and the reason is because we need to capture weak self so we don't cause a memory leak let's go through this end to end and then i'm going to do a recap since i did this pretty quick keep in mind our account controller doesn't quite have anything on it so just to verify that we are actually signed in what i'm going to do is set a maybe background color to this and the background color here is going to be system maybe green to indicate successful logging in so go ahead and give that a run and let's do this end to end so if we come back here we see that our test phone number in our methods here i believe was something like 650555 i believe one one one so let me go in there and find it again i'm gonna go to phone and then we're going to open up the test number so 650-555-1111 now one thing i'm going to call out also when you test this on a simulator it does go to a in between safari window to verify that you know you're authenticating correctly when you do this on a device it will not show that and it'll actually set it up correctly to actually send a verification code so just a brief call out there let me type in the proper phone number so that is looking good we are going to hit continue here it should push us to the next screen it looks like we've crashed so let's see what is going on we're going to take care of whatever is crashing here so we need to actually register the custom uri scheme so this is actually important this is one thing that i have forgotten to do so you need to register a backwards client id scheme in the info so this is actually a good reminder for myself as well so if we go to our application here we're actually on the info tab already so we're going to hit this and let's see if i can find where we need to add it i believe it's under the original info tab there should be url types which is this guy here we're going to select it i'm going to go ahead and hit plus so it brings in a new entry just like that and it's essentially telling us in the crash here what has gone wrong so what we want to go ahead and do is we want to copy instead of this i'm going to do it down uh here so back in our google services p list that we have brought into the project let's see where i have tossed it if you open this up you're going to find an entry for reversed client id so it's this guy right here you want to go ahead and copy that and jump back here open up that url type again and you're going to want to paste that in i believe to the url scheme here and that should be sufficient so i'm not sure if we quite need an identifier icon i don't think we do let's go ahead and run this again and see if that is required if it is we'll have to peek at the documentation so hopefully second time's a charm and we don't need a third so we're gonna select this i'm gonna type in that number hopefully i type in the correct number all right looks like five oh five five five and then four ones we're going to go ahead and expand this here let me also clear this out let's go ahead and hit continue and it looks like it has actually loaded properly it's going to that intermittent screen that i had mentioned and it pushes over to sms code beautiful and now what we want to go ahead and do is enter in the mock code which is three one so one one one one one one six ones basically and just like that we hit continue and we should be logged in and see the green screen so boom you've done it you set up phone authentication now the coolest part about this is if i stop running the app and i go ahead and give it a run you'll see that we remain logged in it should not show us that authentication again and if we come back to firebase and i go to the first tab where we see our users we'll see another user for the phone number right here that we have added now a couple of things i would love to know before i wrap up here in the phone view controller we actually explicitly said plus one for the prefix when we went to this auth we said plus one plus the number so it's important that you prefix your country code there are libraries out there from google actually themselves that allow you to properly insert the prefix number so i can make a separate video on that but just keep in mind if you don't include this you're gonna run into a whole lot of issues the other thing that you guys saw you definitely need to bring in the url scheme that basically allows firebase to go and verify on the simulator the actual authenticity of where the request is coming from and that's basically it that is firebase sms based authentication with the phone number in a nutshell so this video got way longer than i intended which is why i've been kicking this video down the road but i'm glad i finally got a chance to do it if you enjoyed the video drop a like down below if you haven't done so already hit subscribe for more drop a comment if you had any issues i'll try to answer every single comment as soon as i can thanks for watching i'll see you on the next one

Channel: iOS Academy

Views: 4,891

Keywords: swift tutorial, swift 5, swift 5 tutorial, firebase tutorial, firebase swift tutorial, firebase auth, swift firebase, firebase phone number authentication, swiftui tutorial, swift 2021 tutorial, swift programming, firebase xcode tutorial, swiftui firebase, swift firebase auth, firebase auth swift, swift tutorial 2021, 2021 swift, how to make an app, swift for beginners, swift basics, phone number auth, swift sign in with phone, swift tutorial firebase, xcode, swift, firebase

Id: L-kToaIm1S8

Length: 30min 31sec (1831 seconds)

Published: Sat Sep 18 2021