Firebase Authentication Tutorial 2020 - Custom iOS Login Page (Swift)

hey in this video I'm gonna show you how to build your own custom login page powered with a firebase authentication back-end now we're going to do both a sign up workflow and a login workflow so that your users can both create an account and login with it along the way I'm also going to show you how to capture some additional fields such as first name and last name and we're going to do some form validation so that we can make sure that the user enters a strong password and that the email they entered is correctly formatted so if that all sounds good to you then stay tuned hey guys my name is Christian and welcome to code with Chris where we teach people how to code and how to build apps now in order to get this login page done we're going to go through the following steps or first going to start our Xcode project and build the user interface and then we're going to sign up for our firebase back-end then we're going to incorporate the firebase SDK into our Xcode project and we're gonna set up firebase authentication and then finally we're gonna hook up that user interface we've built to the firebase authentication back-end so that the user can then create their account and log in now if you're a beginner and this is one of the very first videos you're watching I highly recommend that you get the basics first by watching my beginners playlist I have a couple of them and I'll list them on the screen right now now just before we get started there's one more thing that I want you to do and that is to give this video a big thumbs up and to hit subscribe if you haven't already because that really helps support the channel and helps encourage me to keep going alright with that said let's dive in so we're going to start by creating a brand new Xcode project so go ahead and start a new single view application under iOS and we're going to call this well whatever you want I'm gonna call this custom login demo and the important thing here is to set your language the Swift and we're not using Swift UI so don't check that and the rest of it are also unchecked now if you haven't set this up before for your organization name and identifiers you can follow what I've got here except substituting obviously your own name or your company name and together with your product name you're going to have this bundle identifier here and we're gonna then go ahead save it wherever you want I'm going to save this on my desktop now for the first thing we're going to do is to organize our files a little bit and to also create some of the classes we're going to need so in the demo in the beginning of this video you saw that we had a sign up button and a login button for our first screen and clicking those buttons will lead to two different forms a signup form and a login form and once the user has signed up or logged in we also bring them to the home screen so what we've got here we've got a viewcontroller.swift this one is going to be that first screen where we have the sign up button and login button we're going to create a couple of more view controllers to represent the signup form in the login form and then that home screen that they see once they've logged in so go ahead click new file and we're gonna choose cocoa touch class because these are going to be subclasses of uiviewcontroller just like how this view controller that comes with a default project is as well I'm going to call this the sign up view controller that's going to control our signup form and then I'm going to create another one and I'm going to call this the login view controller and then I'm going to create a third subclass of uiviewcontroller called the home view controller and this one's going to be the one that they see after they sign up or login alright so now let's organize it a little bit by creating a new group we're gonna call this a few controllers and we can put in that guy put in these as well okay so we have that and let's set up some of our user interface in the main dot storyboard so this is the one that's going to be showing our sign up button and login button and having that moving background and that's just a stylistic element so we're not going to start with that we can always add that video background or static background at the end so what we're going to do as a first step is actually embed this root view controller in a navigation controller and this is going to allow us to click on a button and go to another view controller which is what we want when the user taps on the signup button or the login button so go ahead and select this guy hit this button here and embed in navigation controller that's going to give you a navigation controller like that and this one indicates that this is the root view controller the first thing I'm going to do is highlight our navigation controller and right here I'm going to get rid of shows navigation bar and that's going to hide the navigation bar in all of its child view controllers so we don't see that bar at the top next I'm going to open up the object library you can press command shift L or you could click this plus button up here to add new elements to the storyboard I'm going to choose view controller this is going to be our signup one let's do it again and this is going to be our login form and then I'm going to add another one here this is going to be our home screen so now let's go ahead and set these custom types to the view controller classes that we've created on this side so let's highlight this one first and set the custom class for this guy as home view controller I just want to say one more thing if this is all confusing to you and you don't really know what I'm talking about I highly urge you to go through my beginner series at first because that's really going to set you up and give you all of the necessary skills and terminology to be able to follow this tutorial so again you can find that in the description or in the beginning of the video I link to it on the screen as well okay now let's set the custom class for this guy right here this is going to be our sign up view controller this is going to be our login view controller and now let's add some buttons to this first view controller here all right so there's going to be a sign-up button and a login button and both going to be grouped on top of each other and near the bottom of the screen so this would be a perfect chance to actually use the vertical stack view alright so I'm gonna add a stack view here I'm gonna put some constraints on the stack II so it sticks to the bottom of the screen so with the stack view highlighted click on adding constraints and I'm just going to add the left right and bottom and I set these all to 40 all right and then we're gonna put some buttons in here too to be exact so let's open up the object library again to add a button in there it's out a second button this time I'm going to drag it into the document outline if you don't see this there's a button little little down here okay so clicking the stack view here let's set the spacing to 20 and we're also going to change the height of these buttons just so they're a little more tappa Bowl I'm gonna actually set an explicit height for this guy to 40 so that's going to be the first button and then I'm going to add a constraint to make the second button to be equal Heights to the first button so an easy way to do that is to click this button hold down control drag a line to the first button let go and just choose equal Heights and now both buttons will be equal Heights so again this first one I'm going to change the text here this is going to be signed up and this bottom one is going to be log in okay cool now let's add the form for signing up and again we're going to use a vertical stack view so let's add that to the screen but this time I'm going to align it to the top so add constraints left right in top and I am going to do 40 as well so that we can have some consistency here and let's add some text fields now there are going to be four text fields even though in firebase authentication you really only need email and password if you're working with password authentication we're also going to have first name and last name and just to demonstrate how you can save additional information for the user on the firestore side of things so I'll show you how to link up those two pieces of information to a single user so let's add four text fields here that's number one that's here just that's fact number two just number three and there's number four and I'm also gonna add a button in that stack view at the bottom and this is going to be a button they tap on after they fill in all of the fields and I'm also going to add a label underneath the button for any error messages that we need to display in case there's something a reason they can't sign up or something like that for this label I'm gonna Center align it I'm going to change the color to red and then for this button I'm gonna change the label to sign up and then for the stack view I'm going to change the spacing to 20 and just to maintain consistency with what we've done for the button Heights back here I'm gonna do the same thing here so for this signup button I'm going to set it to have a height of 40 and then I'm going to make all of these text fields conform to the same height as the signup button so since there are so many different text fields you could do the click and drag method but also another easier way is just highlight them all like that and just then click add new constraints and say that they all have equal Heights so that's gonna add four constraints and just make everything equal all right so that's error label we can say that that it's an error and I'm actually going to change the Alpha to zero at first you know what I'm gonna leave it as full opacity right now so that you can actually see it and then programmatically we will set it to be invisible before the user even sees the form but to make it invisible now just makes it kind of hard for people to realize that there's a label here when they're looking at the project so that's one tip for you if you're working on on a team that's something that you want to keep in mind now for the text fields you can actually set some placeholder text so I definitely want to do that that's going to set some text in there without having to put labels beside the text field so it's a nice way to tell people what you're expecting them to type in these elements password now for the password text field if you check secure text entry it's going to kind of mask out what the user is typing but for this demo I definitely want to show you the password that I'm signing out with so that when I log in you can see that I'm using the same password and then after the fact that we can enable secure text entry to mask the password at the very end so that's the signup form let's do the login form as well again we're going to use vertical stack view let's just drag it into there and I'm gonna align it to the top again so left right top right 40 40 and 40 and this form is actually a little simpler less text fields so let's put that in there put another one in there and then we're going to put a button I'm going to put a label for the error if there is any now one thing you want to make sure is when you close the stack view that all of the elements are actually inside the stack view so you want to try and do the same thing for the signup form as well all right so for the label I'm going to Center a line I'm going to make the color red I say error for the button I'm going to say a login and then just like before I'm going to set the button height to 40 and then I'm gonna highlight all three elements and say that all of them need to have equal Heights and for this stack view let's change the spacing to 20 so there's some space alright so the next thing we want to do well actually one more thing before we go to the next step and that is just to add a label on the home screen just so there's something to see to indicate that they've made it and so that we can prove our demo works let's horizontally and vertically Center that in the container and I'm just gonna change that text to welcome and let's just choose a bolder font so it stands out a little bit alright you know actually before we hook up these elements let's let's create some connections so from the sign up button if we want to go to the sign up view controller we can very easily just create a segue because we've we have this navigation controller here it's going to handle that transition so in this storyboard right now we just have to make sure that we create a connection from the button tab to say that we want to go to that view controller so for this signup button or you could even do it in a document outline right here under the regular view controller this is our route home view controller so hold down control click on this guy and just drag your way to the sign up view controller and out pops this little dialog you want to choose show and that's going to create this segue here to transition there so now when you tap on the signup button it's going to bring you there let's do the same thing for the login button click control hold down control I mean and drag it to the login view controller now choose show and that's going to create a connection just like that we're not going to do it for the home view controller because we're going to do it programmatically so that when the user signs up successfully or logs in successfully programmatically we are going to change the root view controller to be the home view controller and that's how we're gonna transition to there the next thing I want to do is expose these elements these text fields and the error label and the sign up button expose it to the code so that we can reference these elements that we can style them and then we can also handle button taps and we can validate the form and all those sorts of things so we're going to go up here and go into editor and assistant if you're using Xcode 10 there's going to be a button here saying assistant editor so that's also a way to do it but next go 11 they seem to not have that button there so you can click on editor or an assistant from the menu and then you can choose right here I would choose the login or sorry the sign up view controller on the right hand side you should be seeing sign up view controller if not for this bread crumb okay so if automatic doesn't work let's just double check let's just choose try to click something else here I think it can be a little bit buggy oh I know I know what what we forgot to do sorry about that let's just go back to editor only there's one thing that I forgot to do and that is that I forgot to say that what we're configuring here is actually a hmm no the custom closet is a sign of viewcontroller little bit confused let's try that again that might be a little bit of a bug or something like that well you know what I'm going to do I'm going to close Xcode and let's try to reopen our project and now let's see if it works a little better because we are working with a beta here so we might be experiencing some bugs so let's choose editor and assistant again and we're going to go into the main dot storyboard looks like I've lost my assistant let's just do that and now when I go to sign up view controller there we go so that's what I would try so in restarting Xcode I was able to see sign up viewcontroller.swift now under automatic so I might have been doing something wrong or it might have just been a bug in Xcode I'm not sure but in any case we're good now because what we wanted to do was to hook up these elements and expose them to sign up view controller so on the left hand side I'm looking at my elements in the sign up view controller UI and then in here on the right hand side I'm looking at my sign up view controller class so here I'm going to hook up all of these elements so this is going to be a little bit tedious first name text field last name text field now if you make it typo here or an error don't just erase it if you erase it you also have to correct the connection so you have to right-click your element and kill the kill this connection and then you can try to reconnect it again if you don't do that it's still going to be connected to the old property which actually doesn't exist because you changed the name of it so this will be email text field this will be password text field okay this is going to be our signup button and this is going to be our error label alright so now we have references to all of those elements in the signup form but we also need to handle the signup button tap so down here where we're going to write our methods let's connect an IB action method so the connection type this time is going to be action and this one is going to be sign up tapped alright and let's do the same thing for our login form so clicking an element in the login form the right-hand side should change to login view controller about Swift let's took some of these elements up so this first one is going to be first name text field this one's going to be last name text field and if you are a beginner sometimes you might actually connect it let me just show you again so if you're connecting a text field instead of specifying it on a new line you might have accidentally connected it to the same property in that case you have two elements connected to that and that would be not a good thing to have so just just wanted to point that out to you in case you accidentally do that as well and the way you can see in case is if you right-click these elements they should only be connected to one property there okay so let's do that with a button as well login button and then this is the error label alright just like in the signup form we want to handle the button tap of the login button so down here where we declared methods let's drag in a login button holding ctrl let's make sure a connection is action and then let's say login tapped so in here we put the code to run when the login button is tapped now let's do some form styling while we're here so let me just go back to the single editor now when I had created this demo the completed version before shooting this recording I had actually moved all of the styling code into a utilities file which I'm just going to add to this project because the focus of this recording in this video is to show firebase authentication and how to build a custom login form for it so I don't want to spend a lot of time talking about styling these elements so all I'm going to do is I'm going to take that file with all of my styling methods I'll gloss over it for you and then I'll show you them in action and I'll make it available for you to download as well so you can use the same ones so here we're looking at the completed version of my demo project and like I told you I have this utilities file it's actually a class and it's got a bunch of static methods so that we can call those type methods on the utilities class without actually having to create a utilities object and then I have methods like style text field where you pass in a text field and it just styles it according to what you saw in the demo so this one's gonna be like a single line text field this one's gonna be a filled button this one's four buttons right and this one's gonna be a hollow button and then I have another one here for actually form validation which we will get to later on in this recording now ideally I think what you want to do if you're going to be expecting to work with more forms and you have more validation that you want to do on forms you would separate this out but I just put it all into this utilities file as a demo but you should probably put this in its own like form utilities classes so that you can you know just move that to a different project if you only want the form utilities and these ones would be the styling ones and I think from app to app styling is a very app specific thing but in the case of this demo I've been talking too much okay so all I'm gonna do is show in finder here and I'm going to drag this file into our project and I want copy items if needed and I want to make sure that it's added to this target now same thing as in this project I'm gonna create a new group called helpers I'm just going to move this down here and move my utilities file into there and in the sign up view controller let's go back to single editor only and in the viewdidload I'm gonna create a method set up elements and this is going to be a new function and here we're going to hide that error label remember I told you error label it's not o type this wrong of 0 I can't put it and furthermore we're going to style our text field so we've got first name last name email password and the signup button as well so I'm gonna say utilities dot style text field and we're gonna pass in first name text field now Xcode is not helping me out here with the autocomplete so there's definitely alright and so now it recognizes that build succeeded use of Unruh okay it still doesn't so alright so style text field and I just pass in the text field but right now I spelled this wrong I think my autocomplete is broken I think Xcode is a little bit broken now let me just try to restart Xcode again might be just the beta being a beta all right so now it recognizes it so if that ever happens to you restart Xcode that usually solves a lot of problem which is kind of bad for oops I pressed page though which is kind of bad for Xcode right such a bad rap on the quality of the software all right so I'm just styling the text field and then we have the button as well filled button I'm going to pass in the signup button so as I say these are style the elements hide the error label so let's do that also with the login form the set up elements now hide the error label all the elements this time we don't have as many to do utilities thought the style text field first name text field until ities thought style text field loss in text field and utilities thought style filled button now I decided as we were typing this that I don't think we need line breaks on all of these because it's pretty clear what that does and that's fine now in the view controller and do the same thing because in this view controller we have two buttons the signup button and the login button [Applause] so ah we don't actually have IB outlets for this guy so why don't we go back to the main storyboard we didn't hook up those elements to reference them these two because all we did was we hooked them up to segues that would go to those view controllers but we didn't actually expose them to view controller at Swift so let's go into editor and assistant on the right hand side you should be looking at the view controller class and let's this is the signup button and this is the login button alright so now let's go back to a single editor and let's go to view controller and then we can call sign a button and for the login one I'm gonna do a holo style button so let's try this out now I think we're ready to run our project and just see how it looks so right here I've got this emulator running and these buttons looked a little squished to me based on the radius that I've specified so I'm actually gonna change those from 40 to 50 so that's my first thing that I notice click on sign up so here are the text fields and there's the signup button the second thing I notice is that we can't go back so that's something that we're gonna have to add a little later let me just run this project again click on login yeah so same deal here and squashed button and can't go back so why don't we just fix up some of these issues there's some of the easier ones oh I'm looking at the wrong one alright so the sign up button is the one with the height constraint so I'm gonna change this from 40 to 50 right and automatically the login button also follows suit because we have a strain to make them all equal heights same thing is going to happen for this signup form all I need to do is change the height of the signup button from 40 to 50 and that's automatically going to adjust the rest of the text fields same thing here this Login button constraint height of 40 let's change that to 50 and now let's run our project it should look a lot better alright so those that's what I expect signup alright cool so I can say that our UI is ready now we're going to actually work on the firebase side of things so don't close your Xcode project just yet instead go to your browser visit firebase google comm if you're already signed in you've got a firebase account you're gonna see go to console in the upper right hand corner if not you'll be asked to either sign in with your Google account or create a new one so I'm just gonna click on go to console and I'm gonna see all of my firebase back-end instances we're gonna need to create a new one for this demo app so let's create a brand new firebase project by creating a project it's going to give us access to the authentication store the firestore database we have stuff like cloud functions and bunch of other things that we can use for our app now you're going to see maybe if you've worked with it a lot you're gonna see that there's a is a project limit but this is easily liftable you just have to justify the reason I got this lifted for my other account I just said I needed to create more demos so that was fine I'm sure if you get to a point where you're exhausted the free tier and your app is doing really well and you need you know more projects that they're not going to hesitate so I'm gonna call this the custom login demo and you're going to want to probably read this stuff in a little more detail for me for this demo I'm just going to accept everything but if if you're creating this F for production and certain restrictions and rules where you live and where this app is going to be sold then you're going to want to pay attention to how they work with the data here all right so project is ready let's hit continue and you can see here we have a authentication database storage this is file storage hosting for websites and stuff like that cloud functions and ml kit machine learning this is still in beta if I remember correctly so I haven't looked into this indefinitely but I usually don't like to dabble in beta stuff but swift UI is an exception because I just wanted to play with it anyway so we're getting off track so we've created our firebase backend for our custom login demo now what we have to do is add the firebase libraries to our Xcode project so that I can communicate with this firebase backend so I've actually shown you guys how to do this in my previous tutorials and also in some of my courses if this is not new to you feel free to skip ahead but if you've never done this before then continue watching because I'll show you how to do it step by step most of the viewers to my channel are actually brand new so I'm gonna want to make this the most comprehensive tutorial that I can so right here what we're going to do is click I oh s to get started it's going to launch a wizard for us to integrate and add those firebase libraries to our Xcode project so let's go ahead and click that the first piece of information we need is the bundle ID and you can get that here in your Xcode project just taking that and this has to match what you're putting here or else it's not gonna work so let's register our app for this firebase back-end and then it's going to generate this configuration file for us to add to Xcode and this file contains all of the the endpoint data and a configuration data for our project to hit this firebase backend I'm just going to save it in my desktop for now and then wherever you save it you want to drag it in to Xcode that file that you just downloaded when you drag it it's going to show you this dialog I want you to make sure you have this enabled and add two targets is also enabled this is going to copy it from wherever you save that file and make a copy of it inside your project folder so click on finish now you can delete it from wherever you saved it for me it was the desktop because it's already referencing the version it copied into the project ok let's click Next and then now we're going to use something called cocoa pods to download and install those firebase libraries into our Xcode project again this is something that I've showed a lot of in my previous tutorials feel free to skip ahead if you've done this before if you haven't then you want to make sure you've got cocoa pods installed on your system first you might have done that before in a previous tutorial or previous project if you have then you're good to go if you haven't got cocoa pods installed I've actually have a video showing you how to install it on your system and it basically helps you manage all your third-party libraries for your project so go ahead and click in that corner for the video on how to install cocoa pods if you're already ready to go then let's continue with these instructions here so first of all we want to open up terminal and we want to navigate to the folder of our project so I saved mine on the desktop and I called it a custom login demo alright so this is my project folder right here and then I'm going to type in pod in it so what that's going to do is it's going to create a pod file in your project folder and here it is you're going to want to now open up that pod file in your text editor so for me I'm using sublime text and underneath here you're going to be putting all of the third-party libraries that you're going to use right here in the instructions it says to include the firebase Analytics pod so click this button to copy that and then paste it in there but I know from experience if you want to use firebase authentication you also have to use that pod as well and it doesn't list that here because it doesn't know which parts of the firebase back end you're going to use if we take a look at the documentation so in this separate tab I'll show you how to navigate to the documentation click on Doc's click on get started for iOS and then on the left hand side you should see authentication click that and then go under iOS and go under password authentication so password authentication is logging in with email password which is what I'm showing you how to do today so here it tells you to add this pod right so we're just gonna do that now click the copy and that's going to save us a step from having to add it later let's save the text file and then go back to terminal and now here let me just go back to the instructions so we can have that as well and now we type pod install and that's going to go out and attach all the libraries that we need and it's going to install it and add it to our project however this project doesn't actually contain the pods anymore let's close this project what happened here is that it's downloaded all the third-party libraries here and it's created a new workspace file for you which includes your original project plus all the third-party libraries so now from this point on you want to open up the XC workspace file let me open that guy up you're gonna see that you have your project and you have your pods your paws are going to contain the firebase libraries at this point so press command B to build your project just to make sure it still runs and while that's happening let's click on next and now it's telling us to add some initialization code and this code goes in the app delegate right when your app is launched it's going to try to connect to the firebase backend so the two lines of code you have to add is import firebase to tell Xcode that you want to use the firebase classes in this file and then you'll want to call the configure method of firebase app so in our project the build has succeeded nothing's broken that should be the same case for you as well inside the custom log in demo project or whatever you call yours let's open up the app delegate and at the top import firebase and then in the application did finish launching with options see that's the same method here we're gonna want to add this line so let's just copy that and we're gonna want to paste it right here before the return statement because nothing's going to be running after that now let's press command R and run this project as soon as it is run it's going to ping the firebase backend and try to make a connection so we see our user interface in here the debug area you're gonna see a bunch of debug information some of it might look concerning but don't be alarmed back here let's click Next and it's going to check if your app has communicated with the firebase servers just to verify that your installation has been done properly now sometimes this takes a minute sometimes this takes two sometimes what I do is I just stop the project and I run it again just to make sure it pings the servers and there we go we've gotten that let's continue to the console now okay so now we are back in the console now we've actually established a you know we've we've added the firebase libraries to our Xcode project and we are ready to work with authentication and the firestore database first let's enable email and password sign-in in the authentication part so we haven't set up any sign-in methods click on setup sign-in method everything is abled right now click on this edit button and enable email and password authentication click Save and then click on users and you're going to see nothing here if you click add user you'll see that you can add an email and a password for a user so I'm just going to add a test account test at T com and I'm just going to type whatever for the password I think I'll add some symbols and letters and numbers and capitals so here you go that's the identifier as in the email that we typed in if you try to create another user with the same identifier or same email it's going to fail this user ID isn't the password it's an internal ID generated by the system and this is what we are going to connect any information we store in the database about the user we're going to link it back to this particular user through the user ID because in this authentication store you are only storing the usernames sorry not user names but emails you're only storing the emails and passwords in this authentication story and in the database side where we can store additional information and we can link it with the UID let's create our firestore database so click on create database under fire store I'm going to start in test mode just now that we are just trying to test things this is going to allow anyone with the database reference to read or write to the database which is not good before we go into production we should make sure that we lock it down and only allow authenticated users to access that so I'm going to start in test mode this is choosing the location where your far store data will be stored it it sounds very um very alarming it says you cannot change this later so you can learn more about it but what I would suggest is just if this app is going to be used in a very specific location choose a data center that's closest to that location but other than that I don't think there is a you know at least not that I'm aware of a big difference between what you're choosing right so I would choose just by default choose a location that is close to where you are and click done if you know otherwise let me know in the comment section below all right so now we have our fire store database it works in a series of collections and each collection has documents now I'm not going to dive really deep into fire store in this lesson in this video because this is our firebase authentication series there's a separate series for fire store which I'll get deeper into for now because I want to store the first name and last name of the user I'm gonna start a new collection I'm gonna call this users yeah there we go that's exactly our use case right there it would contain a unique document for each user so let's create that collection right here it's telling me to add a first document and you know this might be a good exercise for you just to play around with so let's click an auto-generated ID you know it'd be something like it depends how you want to structure it right so you can just do first name like that let me save it and you can see what that looks like about when we sign up a user essentially what we're going to do is we're going to create a brand new user in the authentication store back here and then we're gonna take that user UID and we are going to create a document for that UID here with the first name and last name this would be the UID instead of this auto-generated ID so this is just the test document for fun so now that we have the authentication store set up we have our firestore database setup and we've put in the firebase libraries into our Xcode project and establish that communication now it's time finally to hook up our forms to create that user in the authentication store to create that entry in the database and also to allow the user to log in so let's go back here into our Xcode project let's stop the project and do that so the first thing I want to work on is the signup form let me just close to this pond here open these view controllers I want to work on the signup form when the sign-up button is tapped what we want to do is validate the fields and then create the user and then transition to the home screen all right so first things first I'm just going to get rid of this and I'm going to create a new method to validate the fields and this is going to return an optional string so here's the idea of this method check the fields and validate that the data is correct if everything is correct this method returns nil otherwise it returns the error message as a string and then we can just take that error message and put it into our error label and show it all right so I'm gonna return nil at the bottom indicating that everything is fine and then I'm gonna do a series of checks before this statement which would return the error message if the fields were not correct so for example check that all fields are filled in right that could be my first check let's create some space here so I can do that check what we're going to do is just remove all white spaces and new lines from the text field and check if that text field is empty if it is empty then we will return the error message please fill in all the fields so let's say if first name text field dot text I'm going to use optional chaining because that could be nil they could have not filled it in I'm gonna call a method called trimming characters and passing the character character set white spaces and new lines so that's going to take away all of the white spaces and new lines from that text and I'm just gonna check is this equal to empty you know if it is then I am going to want to return you please fill in all fields and so that could be my first sort of validation but I don't just want to check the first name text field right I want to check all of the other ones so we've got we've got last name text field dot txt trimming white characters and new lines so same thing here and then I'm going to also check the email and do that and finally and check the password text field [Applause] all right so if any of those fields are empty I am going to return please fill in all fields next I'm going to check you know if it passes that then it's going to continue down in the method I want to check if the password is secure and this I actually have this method in the utilities if you scroll all the way down is password valid and you pass in a password and then it's going to check it against a certain pattern called a regular expression and it's going to then determine if the password that's passed in meets the criteria as dictated by this regular expression it's going to pass back a boolean there's going to pass back true if it matched if it's fulfills the requirements of the regular expression and it can pass false if it doesn't and it if it passes back false then I'm going to tell the user with an error message please please make sure you have eight characters a special character and as well as a number so I think that's what this regular expression is dictating now if you're unfamiliar with regular expressions it's basically sort of pattern you can specify a pattern such as something that looks like this and in this pattern you can express things like it has to contain at least 8 characters you know a special character a number a capital letter or whatever there are different symbols for what's allowed and how many times you want to allow it and it's you know I for me personally I have a lot of trouble remembering the regular expression syntax because I don't use it often enough so there are online tools out there to help you with this sort of thing that can generate regular expressions for you based on parameters that you want to indicate so if that's you that's something that you can use for this particular function I actually just looked it up so I looked up I actually have the blog post here safe to show you guys so this blog post I found was done in Swift 3 and it's 2 years ago but it's still completely valid and what I liked about this blog post was that it gave different examples of sort of password requirements and then what the regular expression would look like for that requirement and it breaks down the regular expression into exactly what each part means so I'll link to this I'll leave the link to this blog post in the description and I would highly recommend that you go and check it out especially if you have to do more password validation in the future just to make sure that your passwords are secure enough so that's where I got this and that's what I'm using here same thing goes for email format alright there are regular expressions to make sure that the email they enter is in the proper format now I don't have that check right here but that's just a matter of finding the right regular expression to use and then checking the email text field against that so here I'm going to just demonstrate how you would do it for the password so I say you know let clean password equal to password text field dot text and I'm going to force unwrap it because I I know there is a piece of text in there because if there wasn't it would have it would have failed this check here so at this point I know there is a piece of text in there I'm gonna trim white lines and white spaces and new lines so I'm gonna pass this cleaned password into utilities thought is password valid and that's going to return a boolean to me right so if the boolean is false then password isn't secure enough return please make sure your password is at least 8 characters contains a special character and a number all right so that's what I got here so far if you create another another method to check email format with a regular expression then you can again add that check here you know or we're here so back in sign up tapped now I can do this I can say let error equals validate fields and then in here I'm gonna check if error is not equal to nil that means there was an error right there was an there there's something the fields show error message now I could very easily just say error label dot text is equal to the error I got for some rapid because it's an optional but and then also make sure that alpha is one so it's visible but I'm actually gonna put this outside in a different method so that I can use it in different says so show error message string and I'm going to move this code in here alright so this would be the message and then here I would simply call show error and pass in the error message all right so that's the case where there is an error with the fields but else there is no error and all the fields are fine then what we want to do is create the user right and transition to the home screen so how do we create the user in the authentication store let's take a look at the documentation create a password based account import firebase firebase app configure so we already did this right it's telling us to do it in app delegate and we've already done that so let's move on and this is the method that we want create user write with passing email and password the thing to know with the firebase documentation is that some of what they have here is outdated um the best way to do this is actually just to take a look at you know sometimes they change the parameters and how they're named but these classes are more or less the same so I would start with auth dot you know getting the auth object off oh actually we can't Xcode doesn't recognize the class in this in the signup view controller because we have an imported firebase authentic is it get the auth object and then we are going to create user with email and password with this completion handler so this callback is basically the code that gets run after the user gets created and we need to implement this completion handler because we need to know if the user was successfully created or not so let's double click this to open up this closure there's two parameters one is the result which is optional and one is an error which is also optional so let me just give these parameters some names result in error I'm just going to call that er are how here we're gonna check for errors so if let e are our error it is error you know if there are no errors then this parameter should be nil but the fact that it comes in here that's what I'm checking to see if it's nil or not if it comes in here that means that there was an error so I'm going to call my show error method and I'm going to pass in you know error creating user and then otherwise if there was no error then I am going to here user was created successfully now store the first name and last name before we do that one thing I want to mention is all right you know use self here be more explicit about what we're calling all right so we can we can do a test like that if the error is not equal to nil then we do that one thing I want to mention to you is that this error actually has a localized description property that contains a string describing the error I don't know if you want to show that to the user you're gonna you're just gonna have to make that decision about how explicit you want the user to know about what the problem is so here user was create a successfully now store the first name and last name so storing a new document in the user's collection is actually very simple not going to go through too much about you know how or why it's done because I want to save that for the firebase tutorial this is going to be focused on authentication so [Applause] basically before we can use the fire store classes we have to import firebase up here so now we can use the fire store classes after importing that and I'm still not getting autocomplete so let me just type it out and see if I can build this successfully so upon further investigation I realized that I had made a pretty silly mistake the reason we couldn't get fire store classes to be recognized was because we hadn't added the fire store pods that we needed initially now this was an oversight on my part we just taking a look at the pod file now initially we only had that right so we only had the pots to work with firebase authentication but what we also needed were these two pods right here so the way I realized this was in going to the documentation under the fire store section and get started because we were in the authentication section before under fire store it tells you that if you look under iOS it tells you that you need these two pods now how do I remember that in this project we were going to use fire store we could have added all four of these pods in the beginning and then just install the pods and that would have been that but because we didn't install these two I had to add it after the fact and the way you can do that is you can just go back to your project folder open up your pod file again I had the two missing pods underneath save the file and then go back to terminal and type in go back to your project directory and type in pod install and it's going to then grab the missing libraries or the new pods that you added and it's going to put it into your project at that point a safe thing to do would just be to close your project reopen the workspace file and just press command B and rebuild the project just to see if everything is running now the state that we had left this in it wouldn't have built because this method hadn't been fully filled out yet because we had to pass in an email in a password as strings so I just put in two empty dummy strings for now just so we can build and compile so I've got it successfully compiling and at the top you need import firebase to recognize the firestore five classes and then down here now we can say let DB equals fire store dot fire store and this is going to return to us the fire store object where we can call all our methods to add the data to the database this constant called DB is just going to keep a reference to that firebase or a fire store object now if we look back at this fire store documentation if you scroll down a little bit let's just walk through some of the starting steps import firebase and firebase app dot configure we did this in the app delegate already this part I just showed you and this is where you're going to get an reference to the fire store object and you want to keep track of it in some sort of variable or constant and this doesn't have to be done in the app delegate dot Swift you can do this where you need it and then for adding data it's pretty straightforward so if you take a look at this you use that fire store reference and then you specify the collection that you want to add a document to in our case it also would be users and then you call the add document method and you pass in a dictionary containing all of the key value pairs that you want to add to that collection so in this document in the sample document they have first last and born we're gonna have first name last name and the UID so that's going to be the app extra user data that we want to compliment the email and password in the authentication store and then this part would be handling any sort of error from trying to add data to the database so let's try this out right here so we've got a reference to our fire store object we would type in DB collection and we would specify users because that's our collection name as well right users and we would add a document so there are two different types one is if I guess you didn't care what the result would be you just want to add a document this one has a completion handler where you can actually check if there was an error or not so that's probably the one you want to use most of the time for the data we're going to pass in just our dictionary so I'm going to specify the key value pairs here so that's just being consistent with what we had here first name all over case like that here I'm gonna put in the yeah I realized we didn't we didn't have a reference to the first name and last name so actually at the very top probably at this point once we've validated all of the fields and checked that they were all okay at this point before creating the user we probably want create cleaned versions of the of the data and what I mean by this is that we strip out all white spaces and new lines from the text fields so text I'm gonna force and wrap that because I know at this point after we've validated the fields there definitely is text in those properties [Applause] so white space and new lines so I'm going to do this for all four fields just so you're not saving data with white spaces and new lines in your database all right and now instead of these empty strings we can pass in email and password so this is from these two right here and then in here we can pass in the first name now a comma separates the next key value pair in the dictionary the last name colon that and we also have the UID so the way we get the UID is actually from this result right here after the create user method is done creating that user in the authentication store it passes back the result any errors come in here and the result comes in here and the user UID that was created for that new entry will be returned here and result so we can get result let's force and wrap that and get the user dot UID all right so for completion let's open up this Handler and the error is an optional okay so if error is not equal no that means there was an error so error message so we'll a self-taught show error message will say user data I couldn't you're gonna have to think of something that's more accurately descriptive of this error because the problem is at this point the user has actually been created in the system so they will be able to log in with an email and password it's just that their first name and last name couldn't be saved on the database side so if this fails I don't know if you'll actually want to show the user an error or if you would just want to capture the first name and last name again or maybe just silently try this again at a later time so there's different ways you can handle this part at least for now I'm just gonna say error to saving user data if there was no error then we don't have to handle that case then everything's fine and you know whether or not the first name and last name could be saved at the end of the day the user account was still created right here user was created successfully in here and so we still want to transition to the home screen at this point alright so in order to transition to the home screen I'm going to do this in a different method let's call this transition to home and I'm going to create this method down here [Applause] so before I fill that in okay let's see yourself here before I fill that in let's just double-check what we've got so we're trying to create the user and then checking for errors and then if there's an error creating the user we show the error if there's no error creating the user then we're gonna try to save the first name and last name by getting a reference to our firestore database adding the data here and then when that returns we check if that was successful or not if it's not successful then we show this air and and then that's it and then we transition to the home screen so I think it that's good for the sign up side alright so let's just talk about transitioning to the home so the way we're going to do that I mentioned before was that we're going to programmatically change the root view controller from whatever it is to the this one this welcome one so in order to do that we need to actually give this guy a storyboard ID and then we're gonna create a new instance of the sky and just swap out the root view controller so I'm gonna call this guy home VC and rather than specify home VC in multiple places we can create a constants file which is a good thing to do because when you build a larger project you're gonna have more and more constants and more and more hard-coded strings so you kind of want to all just keep it in this place and having a constants file with all your hard coded strings in there just reduces the possibility of typos so let's add a swift file here and then call this constants and actually just create a constants structure and inside you can specify another structure let's call this containing all the strings for our storyboard and then inside this storyboard structure we're going to create a property and we're going to use let we're going to call it maybe home view controller and we're going to put the hard-coded string home VC so we never write home VC anywhere else in the project aside from here and we'll reference it with this name right here and so that's going to reduce the possibility of typos because we're not constantly typing this hard-coded string everywhere what I'm also going to do is put the static keyword in front of this so that we can access this without having to create instances of the structure so let me show you how this works we go to sign up view controller let's say I want to storyboard dot instantiate view controller and you pass in an identifier in here I pass in basically a constant storyboard oops storyboard home view controller and that's that home VC string I was talking about so because this returns a view controller we have to cast this as a this one is a can view controller type now let's just assign this to a constant and the view controller so we've got a reference to our home view controller here and then to swap out the root view controller we can access the view window and we can grab the root view controller property and assign home view controller to it and then we have to call a method called make key invisible and it's going to then show this as the Ruby controller instead so why don't we just press command B and we're going to be able to test this out now so if they're able to sign up for a new account they're going to be transitioned to the home screen all right so let's run this project right now and test it out and let's actually also go to our authentication store we've got one user right now so let's click sign up let's use a different name let's make it different just so we can see and it has to be 8 characters long tester one two three four with a special character so we'll use star let's go sign up so you can see here we've transitioned to the home screen so that means everything worked on our back-end hopefully so let's reload and we see Tom at T comm and this is the user UID it starts with f8 V zero okay you can go back to the database and there should be a different document so you can see here that it's Tom Jones with f8 V zero as the UID so everything's good this is a success what we want to do now is implement the login screen because that's something that we didn't actually do so going back to the login screen when log in is tapped we want to do some of the similar things right validate the text fields in this case it would just be making sure that all the fields are filled in before logging in and then signing in the user and so let's just get rid of this so we're going to you know I'm gonna skip this I'm gonna skip this part because it's basically the same thing as the sine of view controller and this video is getting pretty long already so I'm just going to do the sign-in part yeah so in fact I'm just going to do that right here and then we are going to take a look at the documentation and I'll show you how to actually sign in a user let's go back to I Oh s password authentication and Here sign in the user with email and password all you have to do is to use this sign-in method and you pass in the email and password and you get back the user and if there was an error or not and that's it so you know you can use a lot of the same principles as I showed you in signup you know I'm not gonna break things up into methods like this I'm just going to code it up right here just save so save us some time okay so we're gonna want to import firebase auth at the top and then we're going to type auth we're going to get the auth object and then we're going to sign in with email and password so make sure you've got the right one here in terms of the email and password so I'm gonna let email equals email text field we have that right oh I don't know why I called them first name and last name text field sorry when you guys were watching me type that out you must have been saying no Chris that's wrong okay so email text field and password text field but now I gotta have to fix it in the store board so let's go back and fix it because I've just changed the property names all right so my mind must have been somewhere else so I'm right-clicking this guy I'm breaking the connection new referencing outlet that's gonna be my email text field and this one I'm gonna break that connection new referencing outlet that's going to be ha vortex field so there I've fixed the connections we're gonna go back to the login view controller now so email text field dot text dot trimming characters white spaces and new lines let password equals password text field dot txt trimming characters white spaces and new lines so you definitely do want to do this you know create your own validate text fields method just like I showed you and sign up view controller because these two lines I'm assuming that this is not nil is I'm forced unwrapping it so up here you need to check if there's any errors right and if there are then you want to show the error message and and not run this code down here this is assuming that all the fields are valid so assuming that all the fields are valid we are going to try to sign in with the email and password and let's open up this closure you can see there's that result parameter and there's an error parameter just like we had before so if error is not equal nil then couldn't sign in and here you'd want to show the error message so you know error label dot text and this time I'm going to assign it to the localized description you might not want to do that depending on what to say so you can try out different scenarios like try typing in a bad password or no password or whatever and see what sort of text gets shown in here stuff thought error label dot alpha is equal to 1 so that's showing the error else if there is no error that means that the user has signed in successfully and in that case we just want to transition to the home screen in which case it's it's just simply this code right here so I'm gonna just cut and paste that right there right so we will be able to log in now the only problem is that I forget what I swear oh I remember what password we did so we can try this out so this is wrong now setup elements for styling it that would be email that would be password and let's run the application all right I've got some more errors so let's check it out okay so this is in the login view controller when you're referencing things inside of a closure use the self keyword right there to be more explicit about what you're referencing all right so now build succeeded simulator let's try and log in now and the last part of this is just to add that movie in the background so I'll show you how to do that oh we don't have placeholder text here so this this should be email this should be password what I had tom t-dot-com and I had tester one two three four star I believe yeah so that worked and we see this let's try it bad pass her and just to see what happens I'm just gonna type in any garbage yeah that is true all right you got me password isn't valid or user does not exist we can fix this by making it multi-line so we probably want to do that with both of those labels clicking the label and then changing number of lines to zero so click that label change some of our lines to zero and that's going to make a multi-line and let's add some placeholder text while we're here so for this login field this is going to be email and this is going to be password all right so we're nearly done here I just want to show you how to add the video in the background so in our navigator here I am going to add a new group for the media and this is just a random video I downloaded from a stock photography site and I'm gonna drag it into Xcode make sure that add two targets is checked I don't know why this is unchecked and make sure that that is checked so that you're actually adding it to the this target and then copy items if needed is great because it's gonna make a copy of it in your project folder I'm just going to reorder this folder down here oops I've actually put it in here don't want that alright so here's the video that I've got it's from video blocks as you can see it I didn't pay for this video it's just for demo purposes and you can see that it it works at a normal pace but in the demo I actually slowed it down and you'll also notice that this video isn't formatted I mean height and width wise it's not formatted for an iPhone screen or a smartphone screen right so ideally you'd want to find a video that's more well suited for the aspect ratio of a phone but for me I just I just took this video I enlarged it and then I shifted the frame so that I could make it work I don't know if you actually want to do that or not but I'll show you how I did it which I don't think I would do that for for a real app you know maybe I would I mean maybe I would it would it depend so anyways in working with the video player classes we have to use AV kit that's the framework that contains all of that stuff so let's go ahead and import AV kit and then in here let's declare our player sorry video player and this is going to be a type of AV player okay and then I make this optional because we're gonna initialize this or create the object and initialize it later so then there's also something else called the video player layer so this is going to be a V player layer and this is actually as you can see here manages the players visual output this is actually what the user sees and this is what we're going to be displaying in the background so here's how it works the AV player item is going to be the media and we're going to create that AV player item and point it to our mp4 file that we just added and then we're going to use the AV player item to initialize the AV player and then from the AV player we are going to create an AV player layer and then that's the one that's actually going to get displayed so this property that I'm declaring here is an AV player layer we don't need to declare a property for the player item we're just going to create that where we need it we're going to override view will appear and we're going to show the video player here set up video in the background and we're going to set up the video okay so then we can declare that function down here and the reason why I'm doing it in view will appear rather than viewdidload because just in my experience if you're working with something that's going to get displayed visually sometimes in viewdidload the view actually hasn't appeared yet hasn't been you know it's loaded into memory but it hasn't shown up and when you're trying to put things on the view when it hasn't shown up yet you run into problems especially with maps and stuff like let's say in viewdidload you try to display a map and then you try to go to a specific region or something like that that's not going to work at this point so when you're doing things like playing videos or playing sounds or trying to transition the map to somewhere doing it in via will appear or view did appear usually as a safer bet you could you try and viewdidload first and it doesn't work yet then you can try interview with a peer review did appear for these setup elements it's fun to do in viewdidload because here you're actually changing properties of that object and so that will persist even through when the view will appear in view did appear but when you are trying to change like in the map example when you're trying to zoom the map into a different level but the map actually hasn't been displayed yet then that could be a problem so that's just that's just a habit of mine to do stuff like that in here okay so we are going to create the video player item create the player create the layer and then we're going to adjust the size and frame and then we're going to display it and play it we're going to add it okay so let AM equals AV player item and this is going to expect well this is what I'm trying to give it a URL where I've been in order to get a URL to that specific mp4 we have to do a couple of things okay bundle alright so what happens I don't know if I've explained it in this particular tutorial but all of your assets your sound files and stuff like that get bundled together with your app in what's called an app bundle and that app bundle gets put into the app store or downloaded to people's phones that essentially contains everything your app needs to run so we need to get the path to that particular mp4 inside of the bundle the thing is you don't know that path right now easy way to get that is just to use some existing classes and methods that we have to get that so path for resource of type that's what we want so the resource name you specify here and that would be login BG and the type is mp4 you don't need to specify the period now this returns an optional string in case I can't find that resource that you're specifying here it's going to return nil so let let bundle ha equal that and here we're going to just write a guard statement just to ensure that that's not nil that it has found that guard bundle path not equal nil else return there's nothing we can do if I can't find that in before there's no point in continuing so we just write that to assert that we've actually have a path to that resource so now let you our l equals we're going to create a URL object from that path file URL with the path bundle path and I'm gonna force and wrap it because we already have this guard statement indicating that it should be something should be a real actual string and then we're gonna pass in that URL object in here to create the player item alright all of that just to create the player item now we're going to be able to create the player so a video player is equal to AV player and we are going to pass in the player item that we just created and then we are going to now do the player layer and create a new player layer object and we're going to pass in the video player all right so this is I'm gonna force unwrap it alright so now we're gonna adjust the size and frame so this I did through a series of just testing it out running it and adjusting it so I mean I'm not gonna do that here I'm just gonna copy the code that I used in my completed project because I don't want to do that testing all for a Kent but I'll explain to you what this code what this code does and how it came to that conclusion so for the player layer I'm adjusting the frame while I'm creating a new frame for it and I am blowing up the width four times but I'm keeping the same height and then I'm positioning it I'm moving it left by one point five times the width and I'm keeping the Y at zero so that's you know what I'm gonna show you how it looks like I'm gonna comment out this line without me changing the frame at all so you can see what it looks like and then I'll show you what this adjustment to the frame makes it look like this line of code is inserting that player layer into this view controllers view in its core animation layer as you can see here the layer used for rendering and I'm inserting that player layer here at position zero so that's going to that's going to display it as you can see as you will see so and then the next the last thing to do is just to call video player play immediately and you can specify a write which I did zero point three to slow it down so let's run the app right now and you can see what it looks without that adjustment to the frame all right so maybe it couldn't find login BG's so I don't see that here so let's step through the code let's put a breakpoint right there and let's rerun the app and let's debug this so there we go or step through and actually it was able to oh I know what's wrong we even though so we commented this out we actually do need to set the frame but I'm gonna set it to like a normal frame so I'm gonna set it to the same I'm just gonna set it to zero zero so position zero zero at the top left corner and the width is just going to be you know one times the width of the view and one times the height of the view itself so I I made a mistake when I described this earlier this is not four times the width of the video itself this is four times the width of the size of the screen right so I already explained that in a second so let me just show you what that looks like here all right so I can remove my breakpoint and just continue running cuz so that's what that looks like right there then you can see it is playing at a slower rate because I specified 0.3 now let's adjust the frame so let's comment that out and comment this in so I'm moving it to the left one and a half times the width of that iPhone screen and for the width of the player layer I am saying that it should be four times that width and it should be you know the same height so when I run it with this frame then you can see that it's actually blowing it up a lot now I think one question in my head now that I'm looking at this again is that you know why isn't this really stretched out because I am stretching the width without stretching the height and I think that you know if I let's say if I do half and that's why I said you're gonna have to play around with this and that's why I also don't think it's a very good solution I think it's better if you actually find a video that's suited for this sort of aspect ratio then you're gonna get something like that and I just had to do all of this because of the sample video that I got so anyways I'm gonna wrap this video up because it's gone a long time but I hope you guys have learned a lot from it one more quick thing I want to mention and that is that you can download the source code for this project there's a link in the description below the video now when you click through that link and go to that page the only thing I ask for in return is your email address and no that's not the spammer to sell you anything I email you guys when I release a new video so you guys can always keep up to date with all of my latest tutorial releases and that's the only thing I ask for in exchange for the source code for this project which I've worked really hard on so I hope you feel that's worth it you can unsubscribe at any time now if you like this tutorial and you want to see more I am going to produce more for our based authentication videos so if you don't want to miss it make sure you're subscribed and hit that Bell icon so that you get notified when the next one comes out and don't forget to give this video a big thumbs up because it really helps the video it really helps my channel overall and it I get really pumped up to see a whole ton of likes so thank you so much for your support thank you for watching I hope you guys learned a lot I hope you had fun and I will see you guys next time

Channel: CodeWithChris

Views: 199,778

Keywords: firebase authentication, firebase login, firebase authentication tutorial, firebase, firebase auth, firebase tutorial, product: firebase, firebase auth ui, firebase login tutorial, firebase login example, firebase authentication ios, firebase auth tutorial, firebase login ui, firebase auth example, firebase login swift, login page using firebase, firebase login page, swift login page tutorial, auth

Id: 1HN7usMROt8

Length: 97min 2sec (5822 seconds)

Published: Wed Jul 24 2019