0 1 00:00:00,240 --> 00:00:00,570 All right. 1 2 00:00:00,600 --> 00:00:07,740 So, now that we've managed the registration flow as well as the login flow for our users, the final 2 3 00:00:07,740 --> 00:00:15,240 thing to take care of is how do they actually log out, and return back to the welcome screen. In this 3 4 00:00:15,240 --> 00:00:15,750 lesson, 4 5 00:00:15,750 --> 00:00:17,430 that's exactly what we're going to tackle. 5 6 00:00:17,850 --> 00:00:24,020 So right at the top here of this navigation bar, we're going to be adding a logout button. 6 7 00:00:24,270 --> 00:00:30,090 And when the user presses on that logout button, we're going to take them all the way back to the welcome 7 8 00:00:30,090 --> 00:00:30,880 screen. 8 9 00:00:31,050 --> 00:00:38,500 And in order to do this, we need to be able to add in a bar button item to this navigation bar up here. 9 10 00:00:39,060 --> 00:00:40,550 Let's go ahead and do that now. 10 11 00:00:40,920 --> 00:00:49,230 If you head over to the Main.storyboard and navigate to our Chat View Controller which is this one 11 12 00:00:49,230 --> 00:00:54,840 right here, at the top right here, we want to create a log out button. 12 13 00:00:55,200 --> 00:01:02,130 So let's open up our object library and we're going to search for something called a bar button item. 13 14 00:01:02,130 --> 00:01:11,130 And as they say here, this thing is going to act pretty much the same as a button, but it's going to live 14 15 00:01:11,220 --> 00:01:13,040 in our navigation bar. 15 16 00:01:13,200 --> 00:01:20,910 So let's drag that and drop it on the right over here. And instead of it saying item, we're going to call 16 17 00:01:20,910 --> 00:01:24,580 it Log Out, and then hit enter. 17 18 00:01:24,600 --> 00:01:30,600 Now, we can work with this bar button item pretty much exactly the same way as we've been working with 18 19 00:01:30,600 --> 00:01:31,830 normal buttons. 19 20 00:01:32,010 --> 00:01:35,790 So I'm going to create an IBAction from this button. 20 21 00:01:35,880 --> 00:01:42,690 So I'm going to hold down the control key and drag it down here just above that last curly brace 21 22 00:01:42,720 --> 00:01:48,700 and I'm going to change the type to be more specific which is the UIBarButtonItem type, 22 23 00:01:48,900 --> 00:01:56,190 and the name is going to be called logOutPressed, and then hit enter to connect that up. 23 24 00:01:56,190 --> 00:02:02,850 So now if we go into our ChatViewController, you can see that we can now write some code to be triggered 24 25 00:02:03,180 --> 00:02:07,190 when our user decides that they want to log out. 25 26 00:02:07,230 --> 00:02:13,290 So heading back over to the Firebase Documentation again, you can see that at the very bottom, you've 26 27 00:02:13,290 --> 00:02:15,840 got a next step section. 27 28 00:02:15,840 --> 00:02:20,940 And here there is a section on how to sign out our user 28 29 00:02:20,940 --> 00:02:24,570 and we can do that by using the signOut method, 29 30 00:02:24,570 --> 00:02:29,490 and this signOut method happens to be one that can throw an error. 30 31 00:02:29,520 --> 00:02:32,380 So we have to wrap it inside 31 32 00:02:32,390 --> 00:02:33,260 a do-catch block. 32 33 00:02:33,960 --> 00:02:39,810 So let's go ahead and copy this code and implement it inside our logOutPressed. 33 34 00:02:40,650 --> 00:02:48,300 So I'm gonna hit paste. And now we have to add the required module which is the Firebase module as an 34 35 00:02:48,300 --> 00:02:56,240 input up at the top, and so that it will know what the Authentication module is all about. 35 36 00:02:56,330 --> 00:03:02,900 You can either do it the way that we saw as we copied over from Firebase or, alternatively, you can actually 36 37 00:03:02,900 --> 00:03:07,730 simplify things by chaining this part together with the signOut method, 37 38 00:03:07,730 --> 00:03:12,250 so replacing it right here, and then we can delete that extra line. 38 39 00:03:12,980 --> 00:03:20,330 Essentially, what we've got now is a do-catch block, and the catch block will get carried out if there 39 40 00:03:20,330 --> 00:03:22,740 were any problems signing out the user. 40 41 00:03:23,390 --> 00:03:25,240 So, now let's try this out. 41 42 00:03:27,400 --> 00:03:30,900 Notice how we're going to be going through the Log In screen 42 43 00:03:30,910 --> 00:03:32,360 quite a few times. 43 44 00:03:32,410 --> 00:03:33,970 So here's a quick tip. 44 45 00:03:34,120 --> 00:03:40,300 When you're building an app that has a log in and registration flow, it can be quite frustrating when 45 46 00:03:40,300 --> 00:03:46,360 every time you need to test it, you have to enter in the email and password. To save yourself this effort, 46 47 00:03:46,360 --> 00:03:51,910 what you can do is while you're testing the app and while you're building it is to simply go into the 47 48 00:03:51,910 --> 00:03:56,110 relevant screen and actually assign it a value. 48 49 00:03:56,180 --> 00:04:03,910 So in this case, my text for this Email TextField is going to be 1@2.com, and then the text for 49 50 00:04:03,910 --> 00:04:08,500 my password text field is going to be 1, 2, 3, 4, 5, 6. 50 51 00:04:08,530 --> 00:04:15,880 So those are the details that I used to sign up to my messaging service. And now whenever I run my app 51 52 00:04:17,350 --> 00:04:19,170 and I go into the Log In screen, 52 53 00:04:19,270 --> 00:04:21,670 those details will be entered automatically, 53 54 00:04:21,700 --> 00:04:24,490 so I can just simply press log in. 54 55 00:04:24,580 --> 00:04:32,170 So now that we've logged in and we're on our Chat View Controller, let's try out our Log Out flow. 55 56 00:04:32,170 --> 00:04:39,490 So when I've pressed Log Out, nothing has happened in here, but I also didn't get any error messages. 56 57 00:04:39,490 --> 00:04:46,070 But let's think about what we would actually like to happen if the sign up process was successful. 57 58 00:04:46,630 --> 00:04:51,520 Well, we want to take our users all the way back to the WelcomeViewController. 58 59 00:04:52,480 --> 00:04:53,830 So how do we do that? 59 60 00:04:54,010 --> 00:04:59,710 Well, we would add that inside the do block after trying to signOut. 60 61 00:04:59,950 --> 00:05:07,390 If this process was successful, it's going to continue executing the lines of code inside this do block. 61 62 00:05:07,480 --> 00:05:13,450 So it's right here that we want to navigate our user to the welcome screen. 62 63 00:05:13,450 --> 00:05:15,180 But how do we do that? 63 64 00:05:15,190 --> 00:05:23,200 Well, the way that our navigation stack is arranged is such that we've got this at the very bottom, 64 65 00:05:23,200 --> 00:05:26,980 and then we went to the Log In screen, so this lives on top of this one, 65 66 00:05:27,070 --> 00:05:30,940 and then finally stacked on the very top is our Chat View Controller. 66 67 00:05:31,240 --> 00:05:35,140 So that's the one that we're seeing in the foreground right here. 67 68 00:05:35,200 --> 00:05:39,570 Now, if I was to click on the back button that takes me back one level, 68 69 00:05:39,580 --> 00:05:43,240 so it dismisses that Chat View Controller, destroys it, 69 70 00:05:43,290 --> 00:05:49,180 and if I go back further, it takes me to the Welcome View Controller. But I don't want to go through two 70 71 00:05:49,180 --> 00:05:50,640 levels of back buttons, 71 72 00:05:50,650 --> 00:05:52,550 I want to go straight over here. 72 73 00:05:52,660 --> 00:05:54,820 So how can I do that? 73 74 00:05:54,830 --> 00:06:01,450 Well, there's something called a pop to route view controller method and that is something that we get 74 75 00:06:01,720 --> 00:06:09,970 as a part of the navigation controller. So we can say navigationController.popToRootViewController, 75 76 00:06:10,630 --> 00:06:19,480 and this will pop and get rid of all the view controllers on the stack except the very Root View Controller. 76 77 00:06:19,480 --> 00:06:26,620 So we can select animated as true as well to get a brief animation if appropriate. And what it should 77 78 00:06:26,620 --> 00:06:33,160 do is it should take us all the way back to the view controller that is at the root of the navigation 78 79 00:06:33,160 --> 00:06:36,250 stack which is, of course, our Welcome View Controller. 79 80 00:06:36,340 --> 00:06:46,830 So let's try that out and run our app, let's log in once more, and then log out, and it takes us all the 80 81 00:06:46,830 --> 00:06:50,580 way back to the Welcome View Controller. 81 82 00:06:50,580 --> 00:06:57,480 The very last thing I want to fix on this screen is I want to get rid of this Back button because while 82 83 00:06:57,480 --> 00:07:03,420 it makes sense to have a Back button on the Log In and Registration screens because the user might have 83 84 00:07:03,720 --> 00:07:09,150 pressed on the Register button, and then realize actually I've already registered, so I can actually log 84 85 00:07:09,150 --> 00:07:13,500 in and might have press Log In, and realizing that they actually need to register. 85 86 00:07:13,680 --> 00:07:16,150 So that button, I think, makes sense. 86 87 00:07:16,290 --> 00:07:19,500 But once we get to the Chat View Controller, 87 88 00:07:19,500 --> 00:07:26,310 I don't think it actually makes a lot of sense in terms of user experience to go from here back to the 88 89 00:07:26,310 --> 00:07:27,800 Log In screen. 89 90 00:07:27,870 --> 00:07:30,800 So this is something that is up to you, really, 90 91 00:07:30,810 --> 00:07:35,670 and it's kind of an individual choice depending on what you think is more natural for your app. 91 92 00:07:36,090 --> 00:07:41,520 But I think I'm actually going to get rid of this Back button, so that it's less confusing for users 92 93 00:07:41,850 --> 00:07:47,070 so that they're able to log out straight to the welcome screen and to the screen that shows the name 93 94 00:07:47,070 --> 00:07:48,120 of the app. 94 95 00:07:48,180 --> 00:07:55,770 So in order to hide this Back button, I'm going to set that up inside the viewDidLoad. And inside here, 95 96 00:07:55,800 --> 00:08:04,520 I'm going to tap into the navigation item and I'm going to tap into something called hidesBackButton. 96 97 00:08:04,620 --> 00:08:07,690 And this is a boolean, so true or false. 97 98 00:08:07,830 --> 00:08:13,590 And I'm going to set it to true so that we actually hide this particular button here the next time that 98 99 00:08:13,590 --> 00:08:23,190 we run our app. And now if we log in again, you'll see that in the Chat View Controller, we no longer have 99 100 00:08:23,190 --> 00:08:25,340 that button right there. 100 101 00:08:25,470 --> 00:08:29,230 But what if you wanted a title for the navigation bar? 101 102 00:08:29,250 --> 00:08:32,430 Well, you can do the same thing inside viewDidLoad. 102 103 00:08:32,460 --> 00:08:37,100 You can set the title property to whichever string it is that you want. 103 104 00:08:37,200 --> 00:08:43,830 And in my case, I just want it to say FlashChat with the lightning symbol. 104 105 00:08:43,920 --> 00:08:47,040 So I'm going to paste that in here as the title. 105 106 00:08:47,100 --> 00:08:53,610 And now if I run the app again, and once we get to the Chat View Controller, you'll see that title show 106 107 00:08:53,610 --> 00:08:59,190 up right in the middle, so that we can orientate ourselves to know which app it is that we're actually 107 108 00:08:59,430 --> 00:09:01,720 using right now. 108 109 00:09:01,740 --> 00:09:08,250 So that's all for the logout route. And in the next lesson, we're going to be tackling some things to 109 110 00:09:08,310 --> 00:09:12,950 get rid of all of these strings that we're using all over the place. 110 111 00:09:12,960 --> 00:09:18,250 So for example, we've got a segue identifier here which is a string. 111 112 00:09:18,360 --> 00:09:20,530 We've got another one right here. 112 113 00:09:20,670 --> 00:09:26,850 And these are really vulnerable because if you have even the slightest typo in here and it doesn't match 113 114 00:09:26,910 --> 00:09:32,220 the name inside the Main.storyboard, your app will crash and it'll be quite hard to debug what's 114 115 00:09:32,220 --> 00:09:33,220 going on. 115 116 00:09:33,240 --> 00:09:39,900 So in order to minimize errors in the future, I want to show you how to create a constants file in Swift. 116 117 00:09:40,050 --> 00:09:42,240 So that's what we're going to be doing next, 117 118 00:09:42,240 --> 00:09:43,410 and I hope to see you there.