1 00:00:00,210 --> 00:00:00,750 Wonderful. 2 00:00:01,260 --> 00:00:07,200 So now let's start finally sending those emails out as a side note. 3 00:00:08,010 --> 00:00:14,820 My assumption is that you did watch the Project zero eight Sandymount one if you didn't. 4 00:00:15,190 --> 00:00:22,290 I strongly suggest going back and watch it or rewatch it if you already forgot everything, because 5 00:00:22,890 --> 00:00:25,260 I'll try to move somewhat swiftly. 6 00:00:25,830 --> 00:00:33,750 So if you're iffy about the initial stuff, let's say how to set up the theory on all of that van. 7 00:00:33,750 --> 00:00:36,810 Please go back and watch that project, as always. 8 00:00:37,170 --> 00:00:37,980 OK, here. 9 00:00:37,980 --> 00:00:39,180 See a typo. 10 00:00:39,180 --> 00:00:40,920 It's actually ethereal like this. 11 00:00:41,700 --> 00:00:49,140 So that's the name for the service were over two years and effectively, we want to start with Norman 12 00:00:49,140 --> 00:00:49,530 Mailer. 13 00:00:50,010 --> 00:00:51,720 So remember normal package. 14 00:00:52,750 --> 00:00:59,470 We're going to navigate to their docks, and first thing that we'll need to do is install the package. 15 00:00:59,860 --> 00:01:02,290 So let's go back to our project. 16 00:01:03,170 --> 00:01:09,200 And we're going to go with npm install node Maler, we installed the package. 17 00:01:09,740 --> 00:01:10,250 All right. 18 00:01:10,790 --> 00:01:11,240 Awesome. 19 00:01:11,480 --> 00:01:16,550 And then remember by default, there right away show you how to use ethereal. 20 00:01:16,850 --> 00:01:21,590 But during the project, I also showed you how we can do that with a cent.. 21 00:01:21,980 --> 00:01:28,610 So effectively, what I'm looking for is the user and the password from my ethereal account. 22 00:01:28,820 --> 00:01:30,050 So let me navigate there. 23 00:01:30,380 --> 00:01:35,420 I already have quite a few accounts, but I'll log out great anyone. 24 00:01:36,230 --> 00:01:38,410 And then these are going to be my values. 25 00:01:38,420 --> 00:01:44,560 And notice we can nicely to right away use them in our node membership. 26 00:01:45,080 --> 00:01:46,940 So here's what I want to do. 27 00:01:47,480 --> 00:01:49,580 I want to go back to my project first. 28 00:01:49,580 --> 00:01:51,080 I'm going to go with npm start. 29 00:01:51,890 --> 00:02:00,170 So I want to open up my server and then I want to create the following files in the utils. 30 00:02:00,680 --> 00:02:01,820 Now why we have so many. 31 00:02:02,510 --> 00:02:06,500 Well, because we'll try to separate some functionality. 32 00:02:07,130 --> 00:02:14,300 So we'll have two emails that we'll send one for sand reset password, and then the second one will 33 00:02:14,330 --> 00:02:16,490 be for verification email. 34 00:02:17,120 --> 00:02:22,400 And in both of them will try to reuse the code in send email. 35 00:02:22,910 --> 00:02:31,100 And then since this configuration, values are used pretty much every time we'll just set it up in a 36 00:02:31,100 --> 00:02:36,860 separate file and you'll see in a process what I mean if any of this is iffy. 37 00:02:37,610 --> 00:02:40,970 So we're going to go back right now to the utils. 38 00:02:41,330 --> 00:02:42,660 That's our starting point. 39 00:02:43,070 --> 00:02:44,540 And let's just create those files. 40 00:02:45,110 --> 00:02:52,190 Let's say that I want to create in node Maler config, Jess. 41 00:02:53,290 --> 00:02:55,240 For the time being, it's going to be nothing there. 42 00:02:55,990 --> 00:02:56,560 Let's go with. 43 00:02:56,620 --> 00:02:59,060 Send e-mail address. 44 00:03:00,190 --> 00:03:05,650 That's the name and double check an email and then send the reset password. 45 00:03:07,170 --> 00:03:08,540 So let's go here. 46 00:03:09,030 --> 00:03:09,920 Your file. 47 00:03:11,020 --> 00:03:12,370 That's added here. 48 00:03:13,590 --> 00:03:18,030 And then the same one will be with us and verification email. 49 00:03:19,140 --> 00:03:27,420 All of these will set it up over here, Jess, and then for a time being let to go to your Sunday email. 50 00:03:29,160 --> 00:03:35,820 And back in the note, Mellanox, let's take some lines of code. 51 00:03:36,720 --> 00:03:41,730 So effectively, I want to set up a function that we can invoke just so we can test everything. 52 00:03:42,480 --> 00:03:48,720 And then once we can see that our initial functionality works, then we can slowly progress. 53 00:03:48,780 --> 00:03:55,980 If you have been taking my courses, you know that it's always my strong suggestion to work in chunks 54 00:03:56,490 --> 00:04:02,280 where basically we set up the initial functionality and we make sure that it works in the post as well 55 00:04:02,280 --> 00:04:03,030 as in this case. 56 00:04:03,060 --> 00:04:07,830 We'll have to try it with the front end, and only then we'll make it more complex. 57 00:04:07,980 --> 00:04:11,550 That way, it's way easier to chase some silly bugs. 58 00:04:12,150 --> 00:04:14,940 So in this case, what I'm looking for? 59 00:04:15,060 --> 00:04:18,690 Well, first I want to set up a function like we did over here. 60 00:04:19,110 --> 00:04:20,970 So let me just use this one as a template. 61 00:04:20,970 --> 00:04:26,460 So Sandymount final trollers and mail and effectively. 62 00:04:26,760 --> 00:04:30,150 Now I have this send email zero. 63 00:04:30,990 --> 00:04:33,120 So I'm just going to set it up in this case. 64 00:04:33,390 --> 00:04:34,870 I'll send email. 65 00:04:34,890 --> 00:04:36,070 So that's going to be a malfunction. 66 00:04:36,230 --> 00:04:39,900 Now, eventually, it will take the argument. 67 00:04:40,260 --> 00:04:48,000 So that way, it will be dynamic and we'll be able to use it in send reset password and send verification 68 00:04:48,000 --> 00:04:48,420 email. 69 00:04:48,870 --> 00:04:51,570 But for the time being, pretty much just hardcoded everything. 70 00:04:51,990 --> 00:04:55,590 So let's go to our Sunday Mail where it is. 71 00:04:56,760 --> 00:05:01,620 It's over here, and let's get the Norman mailer first, so Norman Mailer. 72 00:05:03,530 --> 00:05:07,280 I'm not an equal to require that we get the package correct. 73 00:05:07,820 --> 00:05:10,610 Norman Mailer went once we have the package. 74 00:05:10,940 --> 00:05:14,390 Next, we want to go with comms, send email. 75 00:05:14,400 --> 00:05:15,230 That's the function. 76 00:05:15,440 --> 00:05:19,610 It's going to be a sink and again, eventually passing the parameters. 77 00:05:19,640 --> 00:05:20,420 Not for now. 78 00:05:20,900 --> 00:05:25,910 Now let's quickly jump back to the docks and in order to speed this up. 79 00:05:26,270 --> 00:05:28,930 I'm just going to copy some lines of code. 80 00:05:28,940 --> 00:05:34,030 So first, we want to set this up as a test account run ethereal. 81 00:05:34,040 --> 00:05:40,910 Remember, we already have all these values, so I can just take this one one, but it's going to be 82 00:05:40,930 --> 00:05:47,540 next thing that we copy and paste here and around where you want to set up the functionality, correct? 83 00:05:47,750 --> 00:05:49,700 So we want to send the email. 84 00:05:50,090 --> 00:05:55,060 So let's take this where we go with Transporter. 85 00:05:55,550 --> 00:05:56,900 Send email. 86 00:05:57,900 --> 00:06:05,160 And let's add that right after here, and let's just change some values around or not, let's just leave 87 00:06:05,160 --> 00:06:05,820 it the way it is. 88 00:06:05,820 --> 00:06:08,760 That way we'll know for sure that everything works again. 89 00:06:08,770 --> 00:06:10,080 If you're one, you can turn it around. 90 00:06:10,090 --> 00:06:11,840 But in my case, I'll just leave it the way it is. 91 00:06:12,180 --> 00:06:13,700 We want to explore that. 92 00:06:13,710 --> 00:06:19,650 So module and exports and or go would send email. 93 00:06:20,160 --> 00:06:28,080 And for now, we will import that in our controller, basically in the off controller. 94 00:06:28,080 --> 00:06:31,980 And when we register, we will try to send it. 95 00:06:32,610 --> 00:06:40,170 But just keep in mind that eventually we will use this, send the email in the other files or use the 96 00:06:40,380 --> 00:06:43,050 send reset one and send verification verification. 97 00:06:43,440 --> 00:06:46,620 And therefore we will pass here some arguments. 98 00:06:46,950 --> 00:06:55,380 This is just so we can test whether our initial functionality works, and the way we'll do that is by 99 00:06:55,410 --> 00:06:56,840 going to your controller. 100 00:06:56,850 --> 00:07:01,200 Like I said, go here and eventually it's going to be coming from the utils. 101 00:07:01,620 --> 00:07:05,520 But for now, I just set it up here, where else they send email. 102 00:07:06,780 --> 00:07:08,850 And the email on that is equal to acquire. 103 00:07:09,060 --> 00:07:11,520 And now let's look for that specific file. 104 00:07:11,790 --> 00:07:14,490 So are you telling us here are mine and we're looking for. 105 00:07:14,820 --> 00:07:20,550 Send email, but eventually again, it's going to be coming from here because we will add it to the 106 00:07:20,550 --> 00:07:21,640 indexes and all that. 107 00:07:22,220 --> 00:07:25,320 Then let's scroll down where we're registering. 108 00:07:25,920 --> 00:07:29,910 And like I said, we're not going to be sending back the token this way. 109 00:07:30,300 --> 00:07:30,720 Correct. 110 00:07:31,140 --> 00:07:35,790 So what we can do is just remove the token step number one. 111 00:07:36,360 --> 00:07:42,300 And then right after we create the user, what I want to do is send my email. 112 00:07:42,600 --> 00:07:49,650 So I'll go herewith await and then we go and send e-mail, and then let's just invoke it. 113 00:07:50,220 --> 00:07:51,600 So here's the next step. 114 00:07:51,960 --> 00:07:56,340 Now I want to go back to my post man online, where I have registered. 115 00:07:56,370 --> 00:07:59,520 Like I said, I removed all the users so I can start from scratch. 116 00:08:00,240 --> 00:08:00,540 All right. 117 00:08:00,570 --> 00:08:01,650 It's just going to be annoying. 118 00:08:02,860 --> 00:08:03,900 Go here with John. 119 00:08:04,290 --> 00:08:07,770 I'll send it, I should get back. 120 00:08:08,130 --> 00:08:09,840 The successful response. 121 00:08:10,470 --> 00:08:11,280 So here I have. 122 00:08:11,280 --> 00:08:16,470 Please check your email, but notice how it took longer, at least a little bit longer, correct? 123 00:08:16,720 --> 00:08:18,690 And that is because we were sending the email. 124 00:08:19,050 --> 00:08:20,520 So now we can save it here. 125 00:08:20,970 --> 00:08:22,020 All of these requests. 126 00:08:22,380 --> 00:08:28,140 And now let's go to our thereal and we want to make sure that we have the email. 127 00:08:28,470 --> 00:08:29,340 So let's go here. 128 00:08:29,700 --> 00:08:32,909 The email or go to open my inbox. 129 00:08:33,830 --> 00:08:36,350 And what do you know, what is this over here? 130 00:08:37,070 --> 00:08:40,940 This is by example, by example and hello. 131 00:08:41,270 --> 00:08:43,280 And if you can see the same thing. 132 00:08:43,580 --> 00:08:45,590 We are moving in the right direction. 133 00:08:46,100 --> 00:08:52,730 Now what I want you to do is to go back to the desktop or wherever this is located. 134 00:08:53,660 --> 00:08:55,970 You're looking for again, the same project. 135 00:08:56,330 --> 00:08:57,920 We're looking for auth workflow. 136 00:08:58,580 --> 00:09:00,010 And we have the staff correct. 137 00:09:00,020 --> 00:09:03,590 So now take this front end and set it up somewhere. 138 00:09:03,890 --> 00:09:07,280 Now, if you want, you can run it directly. 139 00:09:07,820 --> 00:09:11,000 But just remember, then you have to use multiple terminals and all that. 140 00:09:11,000 --> 00:09:12,500 So I don't know. 141 00:09:12,920 --> 00:09:14,450 That's not what I'm going to do. 142 00:09:14,840 --> 00:09:22,130 So I'll open up a new window in my text there, and I'll just take the front code. 143 00:09:23,200 --> 00:09:28,360 Drag and drop, and then two things running into their first will have to install all the dependencies, 144 00:09:28,900 --> 00:09:32,710 so it might take a while, and therefore I'll probably pause the video. 145 00:09:33,130 --> 00:09:37,870 And once you install everything, then we need to go with npm start. 146 00:09:38,320 --> 00:09:39,790 So let me make this bigger. 147 00:09:40,750 --> 00:09:47,260 Let me open up a V console in the front, then I got noticed how we pretty much navigated the way from 148 00:09:47,260 --> 00:09:47,950 our server. 149 00:09:48,280 --> 00:09:50,620 And here we want to go npm install. 150 00:09:51,910 --> 00:10:02,380 And p.m. start and on local host 3000, you'll have your front and running and you're not going to be 151 00:10:02,380 --> 00:10:09,700 able to do all the functionality yet because we basically have just set up of the verification process. 152 00:10:09,700 --> 00:10:18,220 But since we're sending the email, we should be getting the email in our mailbox so we won't be able 153 00:10:18,220 --> 00:10:19,470 to log in yet and all that. 154 00:10:19,480 --> 00:10:27,100 But we should be able to set up the registration where basically we're getting back the email and, 155 00:10:27,100 --> 00:10:29,710 you know, while the packages are being installed. 156 00:10:30,190 --> 00:10:36,700 Let me just go to some email and change some things around where this is going to be coming from coding 157 00:10:37,390 --> 00:10:40,090 addict and then gmail.com. 158 00:10:40,670 --> 00:10:46,870 Then let's just call this coding addict just so I can see something different. 159 00:10:47,560 --> 00:10:56,130 And as far as chair, well, let's go to a user at user dot com. 160 00:10:56,740 --> 00:11:01,330 Again, some random email will say this thing. 161 00:11:02,050 --> 00:11:03,610 Email Hello World. 162 00:11:04,060 --> 00:11:08,970 And why don't we go here with testing, testing, email? 163 00:11:09,520 --> 00:11:10,690 Let's save these ones. 164 00:11:10,690 --> 00:11:13,540 And eventually it's going to spin up again. 165 00:11:13,960 --> 00:11:16,180 The URL is going to be a local host 3000. 166 00:11:16,600 --> 00:11:23,250 And this is a React application, and I'm using Create React app and navigate. 167 00:11:23,290 --> 00:11:25,720 You register and you want. 168 00:11:26,790 --> 00:11:33,540 In order to basically make it easier for myself, I'm going to navigate back to the users, so I did 169 00:11:33,540 --> 00:11:38,160 create the user, I just didn't verify it and therefore I got the email. 170 00:11:38,670 --> 00:11:41,340 But technically it was just a dummy email. 171 00:11:41,340 --> 00:11:48,510 So let me remove this one hour move, John, from my database run back in the front end, the local 172 00:11:48,510 --> 00:11:53,480 localhost 3000 navigate to register, and in my case, I'm going to go with the same values. 173 00:11:53,480 --> 00:11:54,120 So, John? 174 00:11:55,120 --> 00:11:59,200 Jim, how and then come up with whatever password Iran, so. 175 00:12:00,010 --> 00:12:00,490 My gosh. 176 00:12:00,520 --> 00:12:06,910 I'm going to set up my password one click on a register and it's going to take a little bit. 177 00:12:06,910 --> 00:12:11,290 We're sending the email and eventually you should see this. 178 00:12:11,740 --> 00:12:20,200 And also, if you take a look at your thereal and if you're fresh, while we have to use user app user 179 00:12:20,200 --> 00:12:26,440 account and we're testing email, if you have this in place, you're good to go. 180 00:12:26,710 --> 00:12:28,930 Then we can start adding functionality. 181 00:12:28,930 --> 00:12:33,940 If not, please troubleshoot because whatever we're about to do next is not going to work.