Custom Login And Signup Page w/ Firebase Authentication -XCODE SWIFT TUTORIAL

what is up you guys my name is Jack Hoskins and welcome back to my channel today I'm going to show you how to create a custom login screen with firebase I'll show you how to sign users up and how to log users in and as always if you guys enjoy this content smash that like button and hit subscribe without further ado let's get into the video all right you guys let's get right into it so the first thing we're going to do is open up Xcode and we're gonna make a new project it's gonna be a single view app go ahead and tap next and we'll just call it firebase login and sign up now it is going to be using storyboard we're going to use Swift we're not gonna use court data or anything else so let's go ahead and tap next choose a location create it and now I'm going to go ahead and make this a little bit bigger and the first thing we're going to do is we're gonna set up the UI so if you don't want to watch me do this you can always skip ahead to the part where we actually start implementing firebase so let's go ahead and create another view controller so this one let's go ahead and add a label this will be the login screen and this one right here will be the signup screen and we're going to add one more screen and this is just going to be we'll just call this the main view controller of the app so this is where your app would start after they login or signup so let's go ahead and add a label to that and we'll just call this success app is going so for the signup method that we're just going to be using email so let's go ahead and add the text fields for that so on this first text field this would just be email so in the place our text will cut email why the textile under that and the placeholder text for that would be passed with me and we will add a button below that that says sign up and also add another button below of that that suppose they they already have an account it will put lock login so we'll put already have in account question mark login and now let's go over to the login view controller so let's now go over to the Gulag in its storyboard so on this one we're going to add two text fields as well so we'll just call this email and the placeholder text and password and again we'll add a button bullet that says login and suppose they somehow get to this page and don't have an account will add a create an account button as well great so now let's create some view controller files and hook them up to these storyboards so I'm going to go over to file new file and it's going to be a cocoa touch class and we'll just call this login be control create it and we'll do the same for these sign up view controller now we can just delete this default view controller that comes with the project so for the login we'll go ahead and click up here on the view controller go over to the right and we're going to set the custom class to the login view controller and we'll do the same thing for the sine of the U controller great so now let's start connecting everything what I'm going to do is I'm going to right click on the login view controller and we're going to open it in a new window we'll go ahead and get this looking nice so we'll go ahead and drag in the email outlet so email and I will do the same thing with the password and then down here we're gonna drag in the login button so again all you've got to do for this is control click on it and drag so we're just call this login tap and so now we're going to do the same thing with the crib and the count button so click on it control drag and we'll just call this creat account tapped alright great so now that we have the create account button tapped function when they click on it we want them to go over to the signup View controller so let's go ahead and write the code for that so I'm gonna say what storyboard equals UI storyboard name and this is just gonna be the name of our storyboard so it's main and then for the bubble it's gonna be nil and now we're gonna go down to the next line and we're going to tell the storyboard which view to show so we'll do what VC equals storyboard dot instantiate you controller with identifier and it's gonna be sign up and so we need to add this ID to the sign of view controller so just click on it go over here and the storyboard ID we'll just copy this paste it right in there and use storyboard ID so let's keep on going with this and then we also wanted to find the presentation style so do VC dot model presentation style equals not over full screen and lastly we want to show the view controller so we'll do self not presented excuse me we're just you presented the VC and animate it we're gonna set that to true and there we go so now that that's set up let's go ahead and set up these sign up view controller so we'll go over here will change to the sign of the controller class and we're gonna we're basically gonna do the same thing that we did with the login view controller so we'll go ahead and drag in the email field we're do the same thing with the password and then sign up tact and already having the count login will drag that as well then I get let's go ahead and write the code so if they click on this button will take them to the login view control so we're gonna do what storyboard equals the UI storyboard name again main and then the bundle is gonna be nil let's go down we'll do what BC equals storyboard that initiate view controller with identifier and so we need to set an identifier for this view controller so we'll click on it and we'll call this vibe right here so we'll call this login then when we use storyboard ID so we can just call this long I'm going to close the back out get back to the sign up a new controller class let's keep on going and then we'll do VC that mod to our presentation stuff equals stop over full screen so the last thing we need to do is we need to show it so we'll do present the VC comma animated true so let's go ahead and run that and see how it looks Oh looks like it needs to be unwrapped so now let's go ahead and run it and see how it looks so as you guys can see it's running so when we tap create account that should take us to the signup page perfect and then when we tap already have an account it should take us to the login page awesome now before we can go any further we need to actually implement firebase and to do this we're going to use pods and so let's go ahead and close everything out are you guys so now that we have the UI set up we're going to need to implement the firebase so do this you're going to need a firebase account so if you do not have a firebase account now is the perfect time to get one they are free and it won't cost you a penny until you reach you know the data quotas for which are really high up there so let's go ahead and tap create a project and we'll just call this login and sign up tap continue and we'll use Google Analytics for your firebase project you can turn it off if you want it's up to you now we need to choose an account for it we'll just choose default account for firebase and it will create our project awesome so our new project is right so step continue so let's go ahead and get started by adding firebase to the app so obviously we're going to be using iOS so I'll go ahead and click on that and now we need to get the bundle ID of the app so we'll go into the app let me drag this on over and the bundle ID is right here so we'll go ahead and copy this and we'll paste it right here you can give it a nickname if you want or the app store ID we're gonna skip that for now now I'm gonna have a register app now it's going to give us a configuration file to put into the app so that firebase knows that it's communicating with our app and it's secure so let's go ahead and download that and so I have that dragged into my desktop now so let's go ahead into the app and I'm just going to drag this Google services and fill it up plist right to the app copy items if needed create groups and add it to the target tap finish and we should be good to go so let's go ahead and tap next on the firebase website now the next thing we need to do is we need to add the pod alright so we need to enable pods for aura so if you don't have pods and started a computer or you have a video that walks you through it I'll link that in the description below so if you enable pods we're gonna have to open terminal so I want to have an open terminal up I'm just gonna type CD drag the app project and there and then I'm gonna type pod an it so now we feel like our app project now has a pod file so we need to add the fire based pot so we'll just copy pot farm based analytics go to the pot file and below the pods for farm based logging this up and paste it so now we're gonna go back into terminal type CD again drag it the project it returned and then pod install and then it will install all the stuff we need for firebase great so let's go ahead and tap next and now we need to initialize firebase when the app first opens so we'll do that in the app delegate so I'm going to go into the project and we'll go into the app delegate and let's see what it means we need to import firebase so we'll go down and we'll import firebase and then we'll go ahead and copy firebase dot configure and we'll throw this in the application did finish launching with options great so now let's go ahead and run that what's happen X down here and it's gonna wait until we run so we're gonna build it and run it and see if it pops up on here and now it may give you an error while it's building it but usually this air will go away as it as it builds as it indexes great so now we have on the simulator and let's look in firebase to see if it's communicating with again so it still hasn't communicated with the server's so sometimes it takes a few times of running it for it to pop up so we'll just hit stopped and we'll run it again and see if it comes up nope Nick come up again this time so we'll give it one more shot so again it's not running so what we'll do is we'll reset the simulator so we'll hit Hardware erase all content settings and then we'll run up one more time Oh looks like we didn't have to do that so but if you still get it you can erase all the content settings then we'll run the project and it should work if not just continuing to the console as it's more than likely an error on firebase aside so we'll continue to the console okay great so now that we have that done we can go ahead and start with the authentication so we're going to click right here under your authentication and so what we're going to do is we're going to choose the sign-in method so we'll go ahead and tap set up sign-in method and we're just going to do email and password and we're just going to click enable right here and we're going to tap save so now users can sign up with their email and password and when they sign up we can view them right here so let's go ahead and start writing the code for users to be able to sign up using an email and password alright so we're back in the Xcode project and we actually need to add one more pot to the pot files specifically for authentication so I'll close this out alright so we need to add that one last pot so we'll go back into the project we'll go into the pod file and we're just going to paste the pot for firebase authentication that's just and so that's just pop firebase off and we'll go ahead and close that out we'll open up terminal again CD then we'll just drag this project in when we do pod install and it should install the firebase authentication code that we need so that's all installed so let's get back into the app so now that the pods are installed you'll see we have an Xcode project and then the next code workspace whenever you use pods you always want to use the workspace so we'll double click on that and we're back into it and so the first thing that we're going to code is the sign up view controller so when they tap sign up here's what we want to do we want to send their information their email and past to firebase so how do we do that so the first thing we're knew is we're going to import firebase off and I also import firebase just to make sure we have every library at our disposal so I'm gonna create a function for this and I'm just gonna call it Sun up so we'll call func sign-up and what we want to do is we want to make sure that they enter text into the email and password field so we'll just do if email dot text is empty equals true and we're gonna print no text and email field and we're going to return same thing for the password field if password dot text is empty equals true then print no text and password field and we'll also return but if they have text in the email in password field then we want to go ahead and call the function signup so we'll call that now but if they don't have text in the email or password field the return will go ahead and break this function now you problem let your user know that they don't have text in one of the fields so you can add a simple alert view right here to tell them that if you wanted to but for the sake of time or not now in the signup function this is where we're going to communicate with firebase so we're gonna do off top off curly brackets dot create user with email string password and completion so for the email we're just going to do email dot text and they give them a referencing that outlook took to our text field and same thing with the password now we do want to add a completion handler to make sure it was done successfully so let's go ahead and create at it so all I did was just double tapped on that so we'll type right here all result and then also air alright so it is thrown in air looks like we need to unwrap the values of email and password just in case they don't contain any text so do that what both of these now let's go ahead and get into the completion handler so we're gonna do guard flight user equals off result question mark dot user common error equals nil else we're gonna print the error and that will just be error but localized description and we'll return after that and so what this is gonna do is this is gonna check the author result to make sure user was created if not we're gonna take a look at what the air reason it's gonna print out to the console and it'll return so say the user is created successfully we're gonna write the code to go ahead and launch the app then so in launching the app I mean we're gonna load this screen success app is going so let's go ahead and write the code for that so I'm gonna do this is copy this code right here that loaded the other screen will paste it and we'll just change the identifiers so we need to set in a store more than apart for this so just say main home and we use storyboard ID will paste that in here for the an identifier and the last thing we want to do is since this is an outside function we gotta use self to call the present looks like we need data right here too so let's go ahead and run this and see how it works great so now that we have the app running let's go ahead and tap create an account we'll enter an email test at yahoo.com and for the password we'll type in some random characters and some random numbers now let's hit sign up great so as you guys can see it Willard the screen successfully so that means it must have created a user so it's gonna firebase and check that out awesome so it's a little get develop and then multiplication and you can see that we have the first person in here they have a user ID they have their email it does not give you their password but everything else is in there perfect alright guys so now that they're able to successfully create an account we also want to go ahead and create the you log in so we're gonna go over to the wall game view controller and that's the screen right here let's go ahead and start writing that code so the first thing we're gonna want to do is we're gonna want to import firebase off then done here and create a function and call it validate fields so let's do func validate fields and what we're gonna want to do is we'll check if the email field housing text if the password Fiona's new text and if it doesn't we're gonna return it right there and print an error but if it does we're gonna keep on going so the first thing we'll do is if email text thought is empty equals true we're gonna print no email text and then we'll return and we're gonna do the same thing for the password so if password text dot is empty equals true then print no password and we'll return but say they have entered an email and password we want to create another function that will take care of hauling them in so let's create another function called login and we'll call that if they get past the email and password if statements and so how we're actually going to log them as we're going to do off dot off dot sign-in and we're gonna get on here with email password and a completion handover so let's go ahead and hit enter and for the email where it's gonna do email dot txt or referencing our outlook right here for the UI text field and the same thing with the password so we'll do password dot txt and we're just going to force unwrap these to make sure that if they didn't enter anything you know it doesn't crash the function and then now we want to write a completion handler to make sure that the email and password are valid and so what I'm gonna do here is I'm just gonna double click on the author resort call back and for off data result I'm gonna do weak self off the result and for air I'm just gonna do air and so it's throwing us an error so we'll get rid of these uh parentheses right here and we'll go down and we'll write the code for it and so what we're gonna do down here is guard what strong self equals self of return and then below that we're going to do if but air equals air and we're going to pry out the air and when we want to do a localized description so we actually know what it means and so now that we have the login function done we're going to create one more function and this is just going to double check that the user is logged in and has information so we'll just call this funk check user info and what we'll do is we'll do if off top off but current user doesn't equal nil then we're going to print out the user's ID so all that's doing is just making sure there is a current user and if there is we're gonna print out their user ID and then after that we're gonna go ahead and load them into the app so we'll go ahead and copy this code right here I'll paste it and we just want to change it to the success screen of the app so allele in domain let's get the story the storyboard ID and we'll paste it right here and the last thing we need to do is if they do long and tapped we need to validate the fields which will then validate the email and password and if that's successful it'll then log them in and then if the login is successful we'll double-check their information and after we double-check their information we'll go ahead and take them to the success screen of the app so let's go ahead and run that and see how it works so none of the apps are running let's go ahead and create an account and once call this test at test comm and for the password we'll make it password and we'll go ahead and hit sign up and great we now have user account so let's close the app and we'll run it again and let's enter the login information and see if it found it so test at test comm and for the password let's just password so tap login and great so log dissin successfully and so the last thing we want to do is we want to write some code so that whenever the user opens the app if they've already logged in or signed up before we don't want them to have to re login so let's go ahead and do that all right so all we're going to do for that is we're gonna create a new function and this isn't gonna be view it did up here so this function is called every time the view appears and all we're gonna do is we're gonna call our check user and info function and so what's gonna do is it's just gonna check if the current user is logged in and if it is we're gonna print out their ID and then we're gonna take them to the app so let's go ahead and do that great so as soon as the app loads it loads the login screen and on that log in screen we have that function that checks if they're logged in and if there are then we take them to the success afters going screen simple as that [Music]

Channel: Lets Code With Jack Hoskins

Views: 9,148

Keywords: swift, xcode, swift ui, coding, iPhone apps, swift 5, app development, learn to program

Id: LE-wTJbMugA

Length: 26min 29sec (1589 seconds)

Published: Wed Apr 08 2020