SwiftUI Firebase Chat 02: Signing in with Firebase Auth

hey hello what's up everyone uh welcome back to lesson number two of the swift ui firebase chat application series i hope you guys are doing well and i hope you're ready to pretty much pick up where we left off in the last video the very last lesson i showed you guys how to build out the login view which is right here you can see login view and if you run this code in the preview on the simulator you'll get this application here so i'll just simply run this in the iphone 13 pro which is right here i'm going to hit command r and everything should be fine if you guys missed the last lesson you can find the link down below we are here login view and if we hit the create account right here you'll see the message down below which is this bit of code let me just scroll down a little bit here and it's pretty much the handle action here with these two print statements okay so that's pretty good uh this video i'm gonna show you guys how to integrate the actual authentication process inside of our application so in other words if we look at the more completed version of our application which is right here i can register for a brand new account using this page so that's going to look somewhat like this i'm going to click into that click on the dog picture and let's just call this doggy one at gmail.com i'll hit one two three and one two three for the password now the next thing is to actually hit the create account this is going to create an account inside of firebase auth it's also going to save the image inside of storage i think we'll take care of the image in a later video all i want to do is to show you guys how to integrate firebase auth inside of your app okay so that's not going to be that complicated i'll show you guys how to do that right now let me just sign out of that and the first thing we need to do here is to actually install the firebase uh the firespace pod for auth and storage uh you don't really need to use a pod you can actually use spm which is the swift package manager i'll show you guys what that looks like right now i'm going to drag in uh let me just say firebase spm i'll drag in this tab here and let me just drag this guy in which is right here and if you type in firebase spm instead of google you'll get this link to pretty much show up now uh right here are some of the directions for how to de-integrate a cocoapod if you need to but our project is a brand new project and the way to install firebase auth is pretty simple you just want to copy this link here and i think we're pretty much done so it tells you to open up the spm dependency manager and you can do that by clicking into xcode and i'm just going to say file packages and try to add a package it doesn't really work that way anymore so you actually have to go inside of your target here and if you click on the target you can go inside of your project there and now instead of xcode 13 is a package dependency next thing is to click into that and then you'll get your search for enter or search or enter package url here i already have some things saved as recently used that's kind of why it's showing up i'm going to paste in that url from the safari browser and then we have these options here i'm going to add it to my current project and you'll see i'm using the version of 800 so whatever version you're using just make sure to make a note of that we'll use this version a little bit later on but 8.00 is just fine for now i'm going to keep that dependency rule there and add this package now when you add things through spm which is this box behind here swift package manager it's going to verify the actual github repository and it's going to fetch all of the available dependencies first and then it's going to present you with a dialogue next now the next dialog allows you to kind of select which pod or which library you want to include in your project for today's video we are going to use a firebase auth and uh i'll also install firebase storage as well so you can see this process can take a little long if you haven't done this in a while i think the last version i tried to install was below 8.0 so it's kind of taking a while to download everything all right the next thing you need to do is you want to select a firebase auth um because that's what we'll be using uh later on we'll be using firebase firestore so if you want to install firestore right now you can do that through this checkbox but there's actually a faster way to install firestore or there's a better a better way to install firestore is what i mean so i'm going to leave that blank i don't want to install it through the spm and then finally we have firebase storage and just hit add package here and you'll see your dependencies appear on the left side panel there so that's pretty good i'm going to hit run one more time and we should be okay the reason why i'm not installing firestore just yet is because i noticed that when you install firestore through spm it's actually really slow to compile the project sometimes it takes my my computer my m1 mac mini it takes it like 35 seconds to a minute to compile the project so there's actually a faster way through cocoapods to install firestart okay all that being said uh you can see our project is now running in the iphone 13 pro simulator which is looking good nothing's broken so that's always a good sign okay now the next thing we want to do is to actually uh you know install firebase as the sdk which is already done and we want to initialize this sdk one simple way of doing this is to go ahead and create some kind of init function inside of this view so let me just do that here i'm going to say somewhere on line 16 you can create some kind of init function like this here and this and it should be okay now we can initialize some things such as the firebase sdk next i am going to head to the top of this file and just import firebase importing this imports pretty much everything that you have available so you can just do this right here firebase and app and you want to configure your application all right um that is pretty much all i'm going to do for now if you run this you should see a crash inside of your console area here and that's pretty good it's always a good thing to demonstrate the crashes in your app you'll see if you scroll up somewhere right here it's going to tell you what the crash is uh reading this right here firebase app configure could not find a valid google info plus inside of your project i'm going to assume that a lot of you have done this installation process already so i'll run through this relatively quickly before firebase can initialize right you need the google info plus configuration and it's really easy to generate one the way i'm going to do this is to head inside of the safari browser which is here and you know i'm going to also assume that you have a project created already uh the website is consolefirebasegoogle.com you should up here on this page once you log in i'm going to start from scratch just to make sure everything is working for my project i'm going to say lbta let's go with swift ui firebase chat and you'll see some things automatically populate right here i'm going to hit enter and once you enter you should have this screen here now i don't really care about some of these options here so i'll just remove these functions you'll see it's all disabled now i can always enable them later on but i'm always a i'm kind of a fan of installing the least amount of components possible whenever you can do so and you know i'll just disable everything for now everything should be fine uh once this is done which should take another few seconds here once it's done it's going to present you with a few more things to configure you have your dashboard i guess this is what you call this page here and you have your you know your main options on the left side for firebase next i'm going to go ahead and get started with my ios app down here the bundle id you need to get it from your project so i'll drag this to the right there and i'm going to click on this and the target here i'm going to go ahead and take my bundle id make sure whatever you have your azure bundle id it should you know it should be right here it's probably different from what i have so make sure you copy the right thing uh it has to actually match whatever is in your project so make sure it's the the correct one these two fields are optional so again i'll leave that as blank okay i think that should be fine uh click on this to you download your info p list and then all that's left is to drag this p list that you downloaded into your project and then i should be okay so i'm going to go ahead and open up my finder here and drag that file in i'm going to drag this guy right over here right below the login view click into that and we should be okay now this is my third time downloading this info plus so it has that three right there make sure to remove it and make sure that your bundle id is the correct one which is this here and you should be good to go i'm going to hit the run uh when i run because i now have my p list you will see that you no longer have a crash inside of your application you'll get this really long warning um should i fix this warning for you i guess i should i really hate seeing these messages inside of my console the way to fix this is well there's this complaint about these constraints and i don't really know why it does that by default but instead of switch ui when you have a navigation view you have this warning down there just by default someone go down to my navigation view and provide it with a navigation view style of stacked navigation view style once you do that hopefully that long ass error will go away and it looks like that fix actually works which is good okay that is pretty much all i wanted to do with firebase auth and again things are not crashing so that's always a good sign if you go back to your firebase setup you'll see it tells you to install things through cocoapods which obviously we're not doing we're just using spm which is somewhat faster i'm going to include this bit of code you'll see firebase app configure uh it tells you to use the app delegate but we're using swift ui so things have changed quite a lot uh just click next to skip that and then you can go to your console and you'll see your newly created app is going to exist here which is good all right the last thing we need to set up here is the authentication this little tab on the left side i'm going to click on get started and that's going to enable your applications to sign in this page i noticed looks pretty different compared to a few months ago um i guess it's been improved i'm not really sure but all you want to do is to click on email and password go ahead and hit enable and hit save and you should be okay if you don't have this enabled you'll get a crash when you try to log in so make sure to enable this email password thing okay i think that should be enough i'm going to drag the safari browser out of the way and let's see let's see let's see i think i'm good to start authenticating a user inside of my code now i don't think i need that so i'll minimize that and if i'm inside of my project here and if i hit create account right you'll see your register a new account inside of firebase which is this bit of code on line 80. now i'm just going to say create new account as a brand new function so whenever it's possible just use private function create new account i think this is what i want to do here um i'll comment this out for now don't need the print statement and to create a brand new firebase account you just want to say firebase now i think you want to say auth like that and auth and then inside of here i think you can say sign in with email and password if you have an existing user but if you don't have a user so in our case right now we don't have a user so i'll use create user with email and password currently we have the state variables of email and password now you don't really need these self so i'll just remove that hopefully that i don't know maybe that's easier to read for this completion just hit enter and the moment that you do that you'll have the results right here i think i'll just call that result or res whatever you want and this is your error if there is a error that occurs uh you just simply want to say fail to create user and then instead of here just uh type in the error here um maybe i'll just call this err and that's a little better uh obviously if that happens uh you simply want to bail is what we call this return statement and you should be fine and then lastly if you have uh reached this line of code you can say successfully [Music] created user and i will print something else as well so the result has the uid i believe and i think this is okay uh i believe this is optional and this right here is also an optional so i'm going to try to run this and you should be fine uh result id i think this has something like the user on it and is that an optional as well probably okay i just hit command r to run this application and i guess i can try to create a username so this is the moment of truth here i'm going to say lbta user hit the escape at gmail.com 123.123 now i'm going to hit the create account and you'll see that down below inside of the console we have successfully created a user and this is the result user.uid which is this long bit of string you'll see if you go back into the safari browser up here you can go to authentication and there's this users tab here right you'll see you have your newly created user of lbta user or whatever you typed in here for your email and then the uid is whatever is showing up inside of the console below which is kboe and this is pretty much how a user is created inside of a firebase auth and that's pretty good uh one thing that you want to do if you're creating an account is you might want to make sure that your account is being created correctly so what i mean is if you have some kind of error message i'm just going to do this here so state of var and error so i'm going to say error message like that and i will simply set this as the empty string there and then for this guy whenever i have an error i'm going to say self.error message equals this right here so it quotes quotes and i'll uh put the error message inside of this uh string interpolation and i should be okay uh maybe i'll call this a login status message it might be a little better and then finally i will do this here and i will do that equals that so let me just put a self in front of the statement and uh i'll put that here as well and then i should be okay i'll correct this line now and i think that should be fine uh the last thing i want to do is right below let's say i am inside of my application here right uh right below the create account button which is right here i'm going to show the error message or the the log in the status message i'm simply going to say this right here log inside his message and let's just say foreground color of red and i will run this using command art once we are here you'll see that if i type in lbta user at gmail.com if i try to create this account right here you'll see it's going to fail because the the email address is already in use by another account and obviously i have this user already if i type in this with a 1 hit the create you'll see that right here i've successfully created my user so that's pretty much how the login process works all that we have left to do is uh instead of creating an account right we are going to instead once you use the login as well uh in other words whenever we handle the action right here we still have to handle this if statement uh or this clause rather so the way i'm going to do that is i'm going to say login user and this is a brand new function which i'll have below fun stuff here login user and auth.auth uh we will say sign in with email and password which is that uh you know email let's see tab password is that that and i'll just say res and error did i use the result i guess i'll use result again instead of here we will use uh something very similar i'm gonna maybe i'm just gonna copy these statements below and everything should be fine so i'm just going to modify this to be failed to login user and let's see failed the login user is here successfully logged in as as user with that statement there and i will copy this as well so let's just make this all nice and tidy okay um i believe everything i believe everything should be working out so this right here let's use lbta user at gmail.com uh finally one two three one two three log in here and now we've successfully logged in as this user if i try to log in as lbta user one you'll see it's going to log in and the uh you know user one has a different id that's why the the uid is changing if you finally go back to the firebase console you can now hit the refresh button on the right side and now you'll see both of your users appear inside of your console area and that's pretty good we've successfully created two users inside our firebase which is exactly what we want to do here if you hit resume on the preview i believe this should work getting firebase and i guess getting firebase's functionalities to be working in the preview is always very very tricky so i'm just going to hit resume one more time and this right here it seems to be kind of crashing again uh default app has been has already been configured so i'm going to stop right here and hit the play one more time so for whatever reason uh whenever you're trying to call the higher race app configured if you call this more than once then the application will crash that's kind of why it's saying default app has been already configured so there's actually a better way of fixing this issue with your preview and i guess what i will do is to maybe introduce that fix uh kind of at the end of this video here um i'm simply going to create some kind of singleton object is what you can call this i'm going to say firebase manager and uh let this guy be some kind of ns object uh it doesn't really matter what you inherit but i just like to enter in its object and inside of this i'm going to use the the firebase app configure and we'll configure that and then once you have your app configured i'm going to use this to also contain the auth of a firebase uh in other words i just want to say off and let this be of auth right here i think that's what i want and inside of here i think i need to override that guy and um i think i need to call it here and then i'll say self.auth equals off and off like so and i will try to resume this inside of my application i'll try to run again and you'll see this needs to super.net and i will try to run my application okay uh if i run you'll see things appear right here should be fine you'll see the preview is also running again you'll see the green dot there and we're not really using firebase manager just yet so what i'll do is i'm going to utilize this singleton is what you can call it i'm going to say static let's shared equals firebase manager here this is my singleton object and i'm going to use uh the auth that belongs to shared first i'll wipe out the init there i don't want to like constantly initialize my firebase app if i don't have to and below i'll just go down to the actual login user here and i will say let's see firebase shared and auth like so okay i'm gonna do that one more time for here finally i'm going to hit the resume now again you'll get your preview to work correctly and then if you create your user or log in right lbta user 1 user one at gmail.com one two three one two three and log in you'll see uh using your singleton of firebase manager we're allowed access to just use the auth that belongs on the singleton this way their preview doesn't crash so it took me a while to figure out why it was crashing and some kind of proper fix for it so if you're running into issues using the preview and firebase make sure to try this singleton style fix here we're going to be including things like storage as well for some of these properties and you know this way we can still use the preview which is faster than launching our code over and over again okay quite the long video but i think for the most part things are working pretty much to what i would expect if you guys have any questions or comments about this entire process please leave a comment down below next video i think we'll start working on storage of uh you know including your image for your user and then once we have that we'll start working on a firestore and you know more things related to user data okay i'll see you guys in the next lesson enjoy

Channel: Lets Build That App

Views: 3,289

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: xXjYGamyREs

Length: 27min 34sec (1654 seconds)

Published: Tue Oct 26 2021