How To Build a Login Page in iOS with Firebase

hey code crew how's it going it's Chris here and this is my new recording space but don't mind what you see in the background because it's a work in progress and things are going to change in the next few weeks as for today's topic one of the most requested things I get asked about how to do is how to create a login page for your app in other words how to implement authentication for your app now in today's video I'm going to show you just how easy you can do that using the authentication features of the firebase platform it sound good alright let's get to it so I want to first show you guys what this authentication flow looks like with the firebase off you I incorporated so here I have this little sketch diagram I created for a module in my course but it's still gonna apply for this demo right here now first we're going to have this view controller here which is gonna have a couple of buttons and maybe a title screen or something like that each button will be a different sign-in method however for this demo we're only covering basic email password authentication and so there'll just be one button when they tap on that button however it's going to launch this firebase off you eye view controller and this view controller actually contains a bunch of different screens to capture the user's email and password and if it's a new account to capture their name as well and it takes care of all of that logic for you you don't have to build any of these screens all you have to worry about is receiving the result of the submission after the user enters in their email and password and submits it to the firebase authentication store where all of these user credentials are stored you just get the result whether it was a successful login or a successful account creation or unsuccessful so back in the same view controller you can detect that result and then you can decide where to send the user either for in this diagram here because we had some additional information we wanted to capture from the user if we detected it was a new account we sent them to a profile view controller and if we detected if it was a login then we would send them to the home screen instead for this demo we're just going to send them straight to the homescreen all right so I just wanted to show you what this authentication flow looks like now we're going to jump into Xcode so we're gonna create our project now this part I might move a little bit fast because we've set up firebase so many times in all of our firebase demos if it seems a little fast for you I highly recommend that you watch the firebase crash course video which I'll link to right here and it will also be in the description below but for this part I just want to get it set up really quickly so I can actually get to showing you the authentication part of the tutorial so I'm going to choose single view application under iOS and I'm gonna call this off demo 3 because I've done this a few times I might have this saved somewhere I'm gonna create this on my desktop and we are actually gonna jump into firebase now take note that this bundle identifier is - com dot code with Chris auth demo 3 yours might be something different so take note of that go to firebase google.com and sign in or go to console in the upper right hand corner and then we are going to create a new firebase project so add project I call this a demo let's just accept all this stuff it's creating my project give it a few minutes to do so all right so let's hit continue now we're at our firebase console and we want to get started with iOS it's going to bring us into a wizard or we have to put in the bundle ID ID I'm just gonna paste it in there register app now we're going to download this Google service info.plist which contains all of the configuration details that the Xcode project needs in order to find our database instance so let's go ahead and go into finder on my desktop that's where I saved it when I drag it straight into the file navigator of my Xcode project make sure that add two targets is enabled for this project and also copy items if needed to click finish and it's going to make a copy of this Google service info file inside my project folder all right so now we're going to go ahead and close the Xcode project because the next step is to add the firebase SDK using cocoapods so go ahead and launch terminal navigate to your project directory a desktop auth demo 3 and then type in patan it to initialize my project for cocoa pods I'm going to open up the pod file in my text editor and we're gonna add a couple of pods for firebase so an add firebase core and we're also gonna add firebase let me double check here so this is the documentation you can get to this screen actually from the wizard here just there's a link for go-to Docs and it's a good idea to have this stuff handy as you're working with firebase you get to a screen like this on the left hand side you have all these different tabs click on authentication and sign in with a prebuilt UI so it's telling us that we can add either the firebase UI pod or we can add individual ones since for this demo we're only working with email and password authentication I'm just gonna add the firebase UI slash auth pod I'm gonna save this file close it go back to terminal and type in pod install now mine's going pretty fast yours might go a little slower so if it looks like it's not doing anything just give it a little bit of time go grab a coffee or something ok now we can go back to our project folder and I can open up XC workspace the first thing I usually do is hit command B just to build the project make sure everything compiles so we know we're working our starting point is solid alright looks good so the next step and I pretty much have this by memory but I'll show you through the wizard so you don't get confused the next step is to in the app delegate class to import firebase and also call firebase app configure before the return statement okay so in the app delegate dot Swift class we're going to import firebase now if you get an error here like it's not recognizing that firebase import statement then make sure you build the project first like I did here you're gonna call firebase app configure and now I'm going to launch this project might take a little while because my simulator is just starting up but essentially what is going to happen is our project is going to try to communicate with the firebase servers in this next step is going to try to detect that just to verify that your installation was good and if you've done this enough times pretty confident with what you're doing you can go ahead and skip this step otherwise you just have to wait for a few I do like about a minute usually once in your Xcode project you see this sort of output here in the console window at that point it's gonna take like maybe a minute half a minute to a minute for this to detect alright so it looks good now we're going to click continue to console now I want you to go into the authentication tab here go into the sign-in method tab and you can see all of the different ways that you can allow users to sign in you're gonna have to do something special for each of these but it's there if you want it we're gonna work on the email and password integration here so click this little edit button and enable this click Save you're gonna see the status for email and password is enabled now now go back to the users tab and you'll see that this is empty but this is where you're gonna see all of the users that have signed up into your app through the this is basically the authentication store to put it simply you're going to see all of your users here and all of their user IDs and notice here that there is a user UID column these are unique IDs for all of the users that create accounts through your app now this UID column is really important because you want to if you're allowing users to create data on the database side of things then that UID is what you're going to use to tie that data to users in your authentication user store all right so let's now go into Xcode and we can then now actually implement the authentication flow so let's stop the project let's go into the storyboard and we're going to add a couple of elements here just so we have something to work with and I had a label here you can add a button okay I'm gonna go pretty fast because it doesn't matter what this stuff is it's just placeholder stuff let's call this firebase off demo and then I grab both of these put them into a stack view and then I'm gonna Center it add some spacing in between these elements and then Center it on the view here and now what we're going to want to do is open up this assistant editor on the right hand side I see view controller dot Swift and on the left hand side I see this actually I would rather see this so you can slide out the tray what I want to do is add a handler for the button tap so that when the user taps the login button there I can respond to it with code so I hold down ctrl click and drag here let go I'm going to choose action as the connection type and and type login tap that's the name of my IB action method now I can write code in here to respond to that button tap now let's go back to the storyboard we're not done here yet alright let's add another view controller because we want to be able to send the user somewhere after they log in or create an account right here I'm going to just add a label quickly just so that we can see that it's a different screen I'm just gonna call it welcome and I'm gonna Center it horizontally and vertically now the last step is I'm going to add a programmatic segue basically a way to transition from that screen to our second screen and I'm going to programmatically call this segue to trigger this transition when the user has successfully created an account or Sundin so from here and a hold down control click and drag their manual segue show it's gonna create this little segue here and highlight it and give it an ID this is important because we need to have an ID to identify and call it from the code I just call it go home something simple like that now I'm gonna go into the view controller now we can actually start writing the code for the firebase UI stuff now in the import up here first thing you want to do is import firebase off the UI because we're going to be using that pre-built UI and in the login tab we're first going to get the default auth UI object set ourselves as a delegate I get a reference to the Baath UI view controller this is this is this stuff right here you know the actual email password UI alright and then we are going to lastly show it alright so let's start with this first part here this is a little bit cryptic the class name is fu I off and to get the default awethu I object we call this type method called default auth UI now we were it returns if you notice an optional type so we're gonna have to check that it's not nil so let's assign it to auto I and then we're gonna use a guard statement guard off UI not equal to nil else we're gonna say you know log the error and we're gonna return and just cancel out because we can't do anything if we don't have that default auth UI object now we want to set ourselves as the delegate for that auth UI object because if you remember from this authentication flow in this firebase UI the user is going to enter in the username and password and submit this stuff over to the firebase platform and then whatever result we get back we want to hear back from it right so we this login view controller and in our case view controller without Swift has to sign up to get notified essentially so that's what we're doing here setting ourselves as the delegate for the auth UI and the auth UI object is going to notify the delegate when it gets a result all right so now let's get a reference to the auth you wide view controller so let off view controller equal auth UI I'm gonna force and wrap this off view controller the reason why I can force and route this is because we have already checked that it's not nil up here so I know it's not nil now we can present this auth view controller animated is true completion is nil this is an error right now because we haven't we haven't said that view controller conforms to that protocol so that's the next step here but let's double check what that protocol name is fui off delegate right all right at the bottom of the file we're gonna create an extension for the view controller and we're gonna implement the protocol here just so it's a little cleaner it's not as messy fui awesome delegate and there's one delegate method in particular that's very important to implement and that's did sign-in with you can see that it's got an error parameter it's also got an auth data result parameter first thing you want to check there was an error is checking against error you want this err parameter to be nil because that means there was no error so you want a guard error not equal to nil guard you know you want to guard the error is nil otherwise if it's not nil then log the error and return that's like a double negative statement so it's a little confusing because you want because if the error is nil then that means there's no error okay so you want to guard that it is know otherwise yeah it's a little confusing but an easier way to write it if that's hard to understand is just if error is not equal to nil right then log error and return like these two statements are equal it's just that this one you know is like a double negative so it's a little harder to understand you know it's up to you okay so at this point if there's no error then I want to show you how you can actually get the user that's signed in or was created and access their UID because potentially you may need to check you know if they've got a profile set up or whatever but having that UID allows you to check on the database side for anything you need to check for to decide where to send the user next you know whether you're going to send them to a home screen or whether you're going to send - like a setup wizard or something to set up their profile so if you want to get their UID you can get it from the off the data result it's got a user property and this is where the firebase user would be stored and then that user object has a UID property so that's how you can get that I'm just going to comment this out because we don't need it in this demo what we do want to do however is send the user to that welcome screen after they've successfully signed in or created an account so this that would be basically perform segue with identifier go home and the sender would be self now let's try this out shall we let's press command or and run it and let's take a look alright so we've got our login screen here we're gonna click the login button and we're gonna get the firebase off UI there we go this stuff we didn't even build right this stuff is we get for free from firebase so go ahead enter in an email I'm gonna call it test that test comm click Next it's gonna go check the user store to see if this is a new account or if it's an existing account you can see here it detected there was no account under that email so it says create account and put in a name in a password test test now I don't use this password anywhere so don't try to hacked me okay so now we've created an account and we've come into the home screen isn't that cool let's stop the project let's run it again let's take a look at logging in this time instead of creating an account so click login I'm gonna enter in the same email address click Next and you can see that this time firebase detected that it is assignment and not a new account so it doesn't ask me for creating an account sign in boom there we go so there's one more thing I want to show you and that is the user in the user store that we created so I'm going to press this reload button and you see here is the account I created and here is the user UID right so this is the UID that you're going to use to tie to data that I would create in the database if I were to like post a comment or you know upload a photo or something like that and you want to associate those pieces of data with the user that generated them and you would log it based on the UID so that was a quick tutorial on how to implement email and password authentication with firebase pretty easy to set up right in the future we might go through different ways of signing in such as using your Facebook account or your Twitter account so if you want to see those and you like this video please make sure to subscribe to my channel just click the subscribe button below also if you want to see more tutorials like this one make sure you visit code with Chris comp and sign up for the newsletter where I share these tutorials with the newsletter before they're actually published anywhere now I want to turn it over to you in the app idea that you have do you have any sort of user login or account creation if so what sorts of sign-in methods are you going to implement or you want to implement let me know by leaving a quick comment below all right so thanks for watching and I'll see you guys next time hey did you join my free Facebook community yet that's where I hang out along with a ton of other people learning iOS just like yourself I also post early access to all my videos inside that group before I put them on YouTube you can also get help with any questions you're having visit the link below click on the join group button and I'll approve your request right away alright so I'll see you in there talk soon

Channel: CodeWithChris

Views: 51,143

Keywords: Firebase Authentication, firebase authentication tutorial, Login Page, how to build a login page, Firebase, Coding, Programming, iOS Development, Login, Log in, iOS, Firebase Auth, Firebase Login, Authentication, ios login page, firebase authentication swift

Id: brpt9Thi6GU

Length: 21min 5sec (1265 seconds)

Published: Tue Aug 14 2018