1 00:00:00,300 --> 00:00:06,510 All right, and welcome to our next project, the OFTH Workflow one where we'll learn how to validate 2 00:00:06,510 --> 00:00:12,510 emails, create refresh tokens and set up a reset password functionality. 3 00:00:13,290 --> 00:00:19,500 Now, in order to keep it as real world as possible, I did create a front end application for you. 4 00:00:20,130 --> 00:00:26,640 Since that way, you'll be able to test all the functionality not only in a postman but also in the 5 00:00:26,640 --> 00:00:27,150 browser. 6 00:00:27,990 --> 00:00:34,620 Now, just so I can demonstrate how the features eventually are going to look like, I have deployed 7 00:00:34,620 --> 00:00:40,500 both the frontend of the project on Magnifier and backend on Heroku. 8 00:00:41,220 --> 00:00:49,170 But since we're going to be using ethereal for managing emails, you're not going to be able to test 9 00:00:49,170 --> 00:00:51,210 it in a live project. 10 00:00:51,240 --> 00:00:52,410 Now what am I mean by that? 11 00:00:53,040 --> 00:00:59,280 So this is the URL correct, which I'm going to use, especially in the beginning, to showcase how 12 00:00:59,700 --> 00:01:01,020 certain features work. 13 00:01:01,320 --> 00:01:08,400 But if you go here and try to implement them yourself, it's not going to work because emails are going 14 00:01:08,400 --> 00:01:11,190 to be coming to my ethereal account. 15 00:01:11,550 --> 00:01:17,790 Now, rest assured, once we're done with the project, it's going to be pointing to you, your ethereal 16 00:01:17,790 --> 00:01:18,210 account. 17 00:01:18,780 --> 00:01:21,720 Or you can even set it up using SendGrid. 18 00:01:22,170 --> 00:01:27,870 Because remember, the only thing you want me to do is just to change some values around. 19 00:01:28,500 --> 00:01:35,650 Now, with that said, our app is going to look something like this where we have the homepage and noticed 20 00:01:35,670 --> 00:01:38,760 our right away make the request to show me. 21 00:01:39,650 --> 00:01:47,120 And if you remember in the show me around, we were checking whether the user has logged in. 22 00:01:47,960 --> 00:01:49,220 So this is happening by default. 23 00:01:49,220 --> 00:01:53,780 The moment we open up the application browser will make that request. 24 00:01:53,930 --> 00:01:58,580 Meaning there is a frontend code that is set up to make that request. 25 00:01:59,150 --> 00:02:04,550 And then we check if the user has logged in beautiful or send back the data. 26 00:02:04,970 --> 00:02:08,960 But if the user hasn't logged in, then we're turning for a one. 27 00:02:09,449 --> 00:02:15,530 And if that is the case, then we are not logged in on basically on the front end. 28 00:02:15,650 --> 00:02:17,750 We're not displaying the dashboard. 29 00:02:18,170 --> 00:02:23,690 So that's the first thing we need to understand when we have two options, either we go through a login 30 00:02:24,080 --> 00:02:25,040 or register. 31 00:02:25,490 --> 00:02:30,260 Now, since I haven't registered, it would make a little more sense if we do that first, correct? 32 00:02:31,070 --> 00:02:35,330 So click over here and then go with my favorites, John. 33 00:02:36,380 --> 00:02:37,370 The same deal here. 34 00:02:38,080 --> 00:02:40,190 And then I want to provide my password. 35 00:02:40,670 --> 00:02:42,380 So go here for register. 36 00:02:43,130 --> 00:02:47,960 And this is a request we're making, but notice something interesting. 37 00:02:48,320 --> 00:02:51,140 So we are getting back to our one. 38 00:02:52,070 --> 00:02:54,470 But the message says success. 39 00:02:54,800 --> 00:02:58,460 Please check your email to verify account. 40 00:02:59,240 --> 00:03:04,220 So what happens is we registered, but we haven't confirmed our email. 41 00:03:04,640 --> 00:03:11,720 And what that means, even if the user tries to do this where they basically go through a logging one 42 00:03:12,440 --> 00:03:18,890 and said, John, Gmail and these values are correct, let me just tell you that right off the bat, 43 00:03:19,100 --> 00:03:22,400 it's not like I'm providing the wrong values. 44 00:03:22,820 --> 00:03:25,490 No browsers are correct, but I can see here. 45 00:03:25,820 --> 00:03:27,680 Please verify your email. 46 00:03:28,280 --> 00:03:34,640 So before we do anything, yes, we registered, but we cannot log in and we cannot access this application 47 00:03:35,210 --> 00:03:38,510 since we haven't confirmed the email. 48 00:03:38,900 --> 00:03:46,040 Now, if I go to again my ethereal account, which eventually is going to be on your account, then 49 00:03:46,040 --> 00:03:49,880 I'll see or hear that I have email confirmation I click. 50 00:03:50,360 --> 00:03:53,300 Basically, this would be an email that is sent to a client. 51 00:03:53,510 --> 00:03:57,800 So if you're going to use sending that, of course, it's actually going to send to that email. 52 00:03:58,340 --> 00:04:02,930 So I take a look, I have an email confirmation and this is what we're going to send back. 53 00:04:03,410 --> 00:04:04,430 Say hello. 54 00:04:04,760 --> 00:04:08,930 Whatever is the name of the user, please confirm your email by yada yada yada. 55 00:04:09,260 --> 00:04:12,830 Now I'll open up right away this one in a new tab. 56 00:04:12,830 --> 00:04:13,430 Or you're not. 57 00:04:13,460 --> 00:04:16,279 I'm just going to get this one, then I'll go back three zero. 58 00:04:16,310 --> 00:04:23,240 But essentially, there's going to be another email, so we click here and notice now or navigate to 59 00:04:23,240 --> 00:04:24,170 a frontend. 60 00:04:24,800 --> 00:04:31,640 So this is going to be interesting where from the email will navigate to the frontend and will pass 61 00:04:31,640 --> 00:04:32,360 a token. 62 00:04:32,840 --> 00:04:33,860 So is this one here? 63 00:04:34,890 --> 00:04:36,050 We have your token. 64 00:04:36,630 --> 00:04:44,490 And again, the moment probably doesn't make sense, but there's going to be a token that will use to 65 00:04:44,580 --> 00:04:52,380 make a request from the front end, and if everything is correct, Van will get back account confirm. 66 00:04:52,920 --> 00:04:59,640 And if not, then of course, there are going to be a month now since I have confirmed my email since. 67 00:04:59,640 --> 00:05:07,060 Essentially, I have clicked from my email and I've navigated to the front and the front and center 68 00:05:07,060 --> 00:05:11,460 request with double checked whether the token is correct as well as the email. 69 00:05:11,850 --> 00:05:13,410 Now I can finally log in. 70 00:05:13,890 --> 00:05:15,600 So on frontend, we display this. 71 00:05:15,780 --> 00:05:19,680 We click on the login and now I can bravely go here with John. 72 00:05:20,660 --> 00:05:25,340 At G.M., and then let's go where secret? 73 00:05:25,850 --> 00:05:28,360 Let's press and Walla. 74 00:05:28,760 --> 00:05:29,450 Now I have. 75 00:05:29,480 --> 00:05:30,290 Hello there, John. 76 00:05:30,800 --> 00:05:35,210 Then again, normally you're not going to send back the I.D., meaning you're not going to display it 77 00:05:35,210 --> 00:05:35,840 on the front then. 78 00:05:35,840 --> 00:05:38,090 But this is just so you can see what's happening. 79 00:05:38,100 --> 00:05:43,670 So we're all as user as well as the I.D., which is whatever random value. 80 00:05:43,910 --> 00:05:51,650 And again, in this case, every time we refresh the application, we'll still do the same thing where 81 00:05:51,650 --> 00:05:53,090 it will make that for one. 82 00:05:53,300 --> 00:05:55,940 Now, in this case, though, what's happening? 83 00:05:55,940 --> 00:05:57,170 We're getting back to 100. 84 00:05:57,200 --> 00:05:57,620 Why? 85 00:05:58,100 --> 00:06:01,970 Well, because when we logged in, so not when we register. 86 00:06:02,210 --> 00:06:05,300 When we register, we still need to confirm the email. 87 00:06:05,570 --> 00:06:12,920 But when we logged in, if we take a look at our cookies while I have my refreshed token. 88 00:06:13,340 --> 00:06:16,310 And then of course, I have my JWT. 89 00:06:16,610 --> 00:06:19,640 And in this product actually doesn't have to be two cookies. 90 00:06:20,480 --> 00:06:24,250 There's going to be one for access token and one for a fresh token. 91 00:06:24,260 --> 00:06:30,290 And I'm not going to dive into that topic right now because we'll cover that in way greater detail once 92 00:06:30,290 --> 00:06:31,340 we actually get there. 93 00:06:31,850 --> 00:06:38,480 So now, once I have successfully logged in, as long as this refresh token is going to be valid, we 94 00:06:38,480 --> 00:06:39,680 will make that request. 95 00:06:40,100 --> 00:06:45,140 So the front end will make the request to show me basically get me the user. 96 00:06:45,710 --> 00:06:48,410 If there is a valid cookie. 97 00:06:48,770 --> 00:06:49,970 Then we're good to go. 98 00:06:50,270 --> 00:06:52,880 And then basically we're getting back the user. 99 00:06:53,360 --> 00:07:00,980 Now this is one thing with Roku, but I kind of want to say right off the bat, it puts the applications 100 00:07:00,980 --> 00:07:01,550 to sleep. 101 00:07:02,150 --> 00:07:05,240 So if the application is not used, then it goes to sleep. 102 00:07:05,240 --> 00:07:10,610 So therefore sometimes connection will take time because Heroku needs to wake up the diner. 103 00:07:11,120 --> 00:07:12,680 Same goes for modern applications. 104 00:07:12,680 --> 00:07:20,090 If you're familiar with learn where effectively we combine the react with a.j.'s and express application. 105 00:07:20,360 --> 00:07:21,260 It's the same deal. 106 00:07:21,560 --> 00:07:27,300 You can host it on Heroku as a separate project, but yes, that's one of those annoying things. 107 00:07:27,320 --> 00:07:30,890 It's a free service for the most part, unless you go over the limit. 108 00:07:31,340 --> 00:07:33,160 But it will take some time. 109 00:07:33,170 --> 00:07:38,080 And now this is kind of a side note, but I want you to understand that regardless. 110 00:07:38,460 --> 00:07:40,370 Now, like I said, we have two of those tokens. 111 00:07:40,880 --> 00:07:46,220 We have access one and we have the refreshment and actually, if we are fresh, will not stop at. 112 00:07:46,250 --> 00:07:51,230 This one goes away because I want to set up to have a way. 113 00:07:51,270 --> 00:07:51,700 Sure. 114 00:07:51,710 --> 00:07:53,960 Expiration, I got something we'll cover later. 115 00:07:54,470 --> 00:08:01,520 And the last thing that I want to showcase is, let's say that we log out, we go back to our dashboard 116 00:08:01,520 --> 00:08:04,910 again once we'll make the request, yours and network. 117 00:08:05,270 --> 00:08:08,870 Show me your returns for one because we don't have the cookie. 118 00:08:09,470 --> 00:08:15,980 And then let's say I try to log in, but I forgot the password notice on the front and there is an option 119 00:08:15,980 --> 00:08:17,590 where we can go to reset password. 120 00:08:18,000 --> 00:08:19,970 And in this case, we'll do the same thing. 121 00:08:20,390 --> 00:08:24,500 We will send a link in the email. 122 00:08:24,890 --> 00:08:26,660 So I just need to provide the correct email. 123 00:08:27,080 --> 00:08:29,630 We're going to go with Gmail here. 124 00:08:30,140 --> 00:08:32,840 When we click on it, I want to reset the password. 125 00:08:33,140 --> 00:08:38,679 So now we have a different route and go with forgot password and the same deal. 126 00:08:38,690 --> 00:08:44,810 I need to go to my thereal because on the front end says, Hey, please check your email for reset password. 127 00:08:45,410 --> 00:08:52,820 So we want the user to check the email and make sure that the user actually clicks on that link, correct? 128 00:08:52,970 --> 00:08:54,470 So I click on a reset password. 129 00:08:54,800 --> 00:09:00,380 I have a new email, and again, this link is back to the frontend. 130 00:09:00,380 --> 00:09:03,740 And this is why it was so important for me to showcase that front end. 131 00:09:03,740 --> 00:09:09,740 Because yes, we can technically set up the functionality where we can only tested in a postman, but 132 00:09:09,740 --> 00:09:11,720 it's not going to be a real world scenario. 133 00:09:12,170 --> 00:09:17,900 I mean, in most cases, you have some kind of frontend that deals with those different routes. 134 00:09:18,320 --> 00:09:21,890 Again, I know I'm not covering the nitty gritty. 135 00:09:21,890 --> 00:09:23,600 Of course, we'll get to that functionality. 136 00:09:23,630 --> 00:09:25,920 This is just to give you a overview. 137 00:09:26,000 --> 00:09:32,390 So I click here on reset password and again we navigate to a frontend. 138 00:09:32,780 --> 00:09:36,650 We pass in some data using query parameters. 139 00:09:37,110 --> 00:09:43,670 And now, once we are here, we just need to provide that new password and kind of showcase the password 140 00:09:43,670 --> 00:09:44,060 right now. 141 00:09:44,060 --> 00:09:49,040 But I'm just telling you, this is going to be a new one, and you can see that is a longer one. 142 00:09:49,050 --> 00:09:55,670 So once I click here and your password noticed success redirecting to logging, and now if we go here 143 00:09:56,480 --> 00:09:58,730 and I'm going to go with my new one. 144 00:09:59,900 --> 00:10:05,660 Then you'll see that I am successful, so we log in and we're back to the dashboard. 145 00:10:06,140 --> 00:10:08,060 That's the application we're going to be working on. 146 00:10:08,510 --> 00:10:10,460 Hopefully everyone will enjoy it. 147 00:10:10,940 --> 00:10:12,110 And let's get to work.