WEBVTT 00:00.050 --> 00:05.990 So we're going to use Node Mailer as our third party package to manage email sending in Node. 00:06.020 --> 00:11.480 Additionally, we're going to use Gmail as our Smtp provider because it is a free option that will allow 00:11.480 --> 00:17.860 us to send up to 5000 emails a day on a given account, which will work fine for our purposes. 00:17.870 --> 00:23.390 I'm also going to show you how to easily configure Node Mailer to swap in your own custom domain and 00:23.390 --> 00:29.450 your own custom Smtp server in case you want to pay for a third party service that will allow you to 00:29.450 --> 00:31.370 send more emails a day. 00:31.370 --> 00:38.120 So to get started, let's go ahead and stop our containers and we'll go ahead and run NPM install node 00:38.120 --> 00:45.020 mailer and additionally make sure we install the types for node mailer as well, and then we can go 00:45.020 --> 00:47.480 ahead and start our containers back up. 00:47.480 --> 00:53.900 And I'll go ahead and declare a new private read only variable here called transporter. 00:53.930 --> 01:00.870 We're just going to be equal to node mailer dot and we can go ahead and import node mailer up top. 01:00.870 --> 01:09.000 So go ahead and import node mailer from Node Mailer here and then we can call dot, create transport 01:09.000 --> 01:15.060 on it and additionally make sure we import Star as node mailer from Node Mailer here to make sure this 01:15.090 --> 01:16.590 import works properly. 01:16.590 --> 01:22.770 So in Create Transport, this is where we provide the options object, where you can configure your 01:22.770 --> 01:27.360 own Smtp server which will be used to send emails. 01:27.360 --> 01:32.820 So feel free to include your own credentials or follow along with me where we set up a free Gmail account 01:32.820 --> 01:35.310 and create our own Smtp provider. 01:35.310 --> 01:40.650 To do that, we're going to go ahead and specify a service property here where we say this service is 01:40.650 --> 01:44.040 Gmail and then we provide an auth object here. 01:44.040 --> 01:49.800 I'm going to set the type here to OAuth two and then we're going to make use of the config service to 01:49.800 --> 01:52.350 get access to some credentials here. 01:52.350 --> 01:59.490 So I'll have a new private read only config service injected here from nestjs config. 01:59.490 --> 02:05.430 And the first environment variable we're going to extract is the user here and we're going to call this 02:05.430 --> 02:08.490 dot config service dot get TP user. 02:08.520 --> 02:13.620 Next we'll have a client ID property which leaves the config service for again. 02:13.650 --> 02:21.390 This time we will pull off Google OAuth client ID here because this will be the Gmail OAuth client that 02:21.390 --> 02:24.360 we set up in order to authenticate with Node Mailer. 02:24.360 --> 02:29.700 And then we will have a client secret as well that we supply to this transport here. 02:29.700 --> 02:34.620 So we'll call Google OAuth client secret out of the config service now. 02:34.620 --> 02:38.670 And the last property we're going to be needing is a refresh token. 02:38.670 --> 02:44.040 So let's go ahead and supply a refresh token here and we will also pull this off of the config service 02:44.040 --> 02:48.240 and I'll call this refresh token, which we will also generate. 02:48.240 --> 02:53.340 So now that we have our transport at least set up in the service, let's go ahead and call await this 02:53.340 --> 03:00.270 dot transporter dot, send mail where we can supply the mail options we know from is going to be this 03:00.270 --> 03:06.750 dot config service dot get Smtp user which which will be the email for the Gmail account we're going 03:06.750 --> 03:13.770 to set up as our Smtp account and then we can supply the two as the email property passed in from the 03:13.770 --> 03:14.640 notify email. 03:14.640 --> 03:23.640 DTO Next we'll have a subject here set to sleeper notification and then for the text here we will just 03:23.640 --> 03:27.900 have a test text for now to see that things are working. 03:27.900 --> 03:31.560 And then we will modify our DTO to take in custom texts. 03:31.560 --> 03:37.200 So now if we send off a new reservation request here, we can go back to the terminal. 03:37.200 --> 03:43.500 We can see in the notification service we're throwing an error because our authentication has failed. 03:43.530 --> 03:49.470 Obviously we have not provided any of these environment variables to our node mailer transport. 03:49.470 --> 03:56.430 So let's go ahead and set up everything on the Google side so that we can have this Smtp user supplied 03:56.430 --> 03:58.230 and send mail using Gmail. 03:58.230 --> 04:04.200 So in order to actually use Gmail as our email Smtp provider, we'll of course need a Gmail account 04:04.200 --> 04:05.520 or a Google account. 04:05.520 --> 04:11.160 So make sure you have a Google account you want to use or as I'll do here, by creating a new account 04:11.160 --> 04:19.020 and I will use the username here Sleeper Nest app to gmail.com and feel free to use whatever password 04:19.020 --> 04:19.500 you'd like. 04:19.530 --> 04:25.320 Okay, so after creating our gmail account, we can see we are on the default Gmail dashboard here and 04:25.320 --> 04:28.380 now we need to go ahead and set up our Google console account. 04:28.380 --> 04:28.740 Okay. 04:28.740 --> 04:33.660 So go over to Google Cloud and you can use an existing Google Cloud account if you have one. 04:33.660 --> 04:37.290 Or we can go ahead and set one up with our newly created Gmail account. 04:37.290 --> 04:40.650 I'll go ahead and accept the terms and create a new account. 04:40.680 --> 04:46.260 Next, we're going to go ahead and click select a project and create a new project here that will go 04:46.260 --> 04:48.330 ahead and call Sleeper. 04:48.480 --> 04:53.760 Next, we can click on our notifications tab and select this newly created project. 04:53.760 --> 04:59.360 So we're going to go ahead and click on this APIs and Services section over here and then click on. 04:59.460 --> 05:01.740 To the OAuth consent screen. 05:01.740 --> 05:04.800 Let's go ahead and select external and then create. 05:04.800 --> 05:09.930 And now we need to fill out some information about our OAuth consent, which is how we're going to obtain 05:09.930 --> 05:12.980 the necessary app password for this application. 05:12.990 --> 05:15.300 I'll go ahead and call the app name Sleeper. 05:15.300 --> 05:19.110 And for our support email, I will select our default email. 05:19.110 --> 05:25.680 And for this developer contact information, I'll use the Sleeper Nest app two that we just set it up 05:25.680 --> 05:29.700 at gmail.com and then we can go ahead and click Save and continue. 05:29.730 --> 05:34.050 We don't need to worry about scopes, so we'll go down and click Save and continue again. 05:34.050 --> 05:40.170 And for a test user, I'll go ahead and add our existing email as a test user. 05:40.170 --> 05:44.350 So this will be Sleeper nest app two at gmail.com. 05:44.350 --> 05:49.050 And finally scroll down to the bottom where we can go back to the dashboard now. 05:49.050 --> 05:52.320 Now we need to actually create our OAuth credentials. 05:52.320 --> 05:58.530 So let's go to the credentials tab now and click Create Credentials and then click create. 05:58.560 --> 06:02.100 OAuth client ID Next for our application type. 06:02.100 --> 06:06.900 We'll go ahead and select web application and then I will add the name here. 06:06.900 --> 06:07.920 We can call it whatever we want. 06:07.950 --> 06:09.780 I'll just call this sleeper. 06:09.780 --> 06:17.250 And finally, under the authorized redirect Uris section, click add Uri and then paste in this URL 06:17.280 --> 06:24.420 here, which is the OAuth playground for Developers.google.com, which is what we're going to use to 06:24.420 --> 06:28.860 obtain a refresh token with this OAuth application we're creating. 06:28.890 --> 06:31.710 After we've done this, go ahead and click Create. 06:31.710 --> 06:36.960 So after creating, we can see we now have credentials for this application, so let's copy them now. 06:36.960 --> 06:43.110 Well firstly, copy the client ID and head to the dot m file for our notification service where we'll 06:43.110 --> 06:49.050 add the Google OAuth client id M variable and paste it in here. 06:49.050 --> 06:52.020 And secondly, do the same thing for the client secret. 06:52.050 --> 06:57.450 We'll copy this and paste it in as Google OAuth client secret. 06:58.530 --> 07:04.620 We can now close this and head over to the Google OAuth two playground where we can obtain a refresh 07:04.620 --> 07:05.420 token. 07:05.430 --> 07:12.090 Okay, so now that we have our OAuth client configured, we're going to head to Developers.google.com 07:12.090 --> 07:14.160 slash OAuth playground. 07:14.160 --> 07:18.660 And once we're here, we're going to go and hit the settings cog up to the side here. 07:18.660 --> 07:21.750 And then we click use your own OAuth credentials. 07:21.750 --> 07:25.650 Next, you can see we have a section to fill in our client ID and client secret. 07:25.650 --> 07:29.910 So you can get these from our M file, which we just added. 07:29.910 --> 07:35.640 So go ahead and get the client ID out of here, paste it in, and then let's do the same for the client 07:35.640 --> 07:36.630 secret Now. 07:36.630 --> 07:42.360 So after we have our OAuth client configured on the left hand side here where we can authorize APIs, 07:42.360 --> 07:50.940 scroll down until we find the Gmail API, V1, click onto here and then click Mail.google.com. 07:50.940 --> 07:53.670 Lastly, click Authorize APIs. 07:53.700 --> 07:57.420 This is going to allow us to connect our auth client credentials. 07:57.420 --> 08:00.900 So go ahead and sign in with the account that you created earlier. 08:00.900 --> 08:06.360 After we sign in with our current Gmail account, we'll go ahead and click Continue and then go ahead 08:06.360 --> 08:07.470 and click continue. 08:07.470 --> 08:14.010 When it asks if we want to ask Sleeper to be able to read, compose and send emails from our Gmail. 08:14.010 --> 08:15.840 So we'll go ahead and click continue. 08:15.840 --> 08:19.710 And now we can see exchange authorization code for tokens. 08:19.740 --> 08:21.870 Go ahead and click this button. 08:21.870 --> 08:28.560 And now importantly, we can get this refresh token, which is the value we need to plug into our application. 08:28.560 --> 08:35.100 So go ahead and copy this, refresh token, we'll copy this refresh token and paste it in here under 08:35.100 --> 08:41.190 Google, OAuth refresh token, paste it in. 08:41.340 --> 08:47.820 And lastly, if we remember back in the notification service, we also had to define the Smtp user, 08:47.820 --> 08:52.320 which in our case is going to be the Gmail email we're sending from. 08:52.320 --> 08:57.840 So we'll use Smtp user and set this equal to the Gmail account you created. 08:57.840 --> 09:03.990 And in my case, I'll use my other Smtp account Sleeper Nest app at gmail.com. 09:03.990 --> 09:09.930 Now that we've added these additional environment variables to the dot m file, we need to go back to 09:09.930 --> 09:16.770 the notifications module and update our validation schema to include the rest of these Google variables. 09:16.770 --> 09:18.810 So let's go ahead and add these. 09:18.810 --> 09:25.050 So I've gone ahead and copied over the new environment variables, the Google OAuth ones, which are 09:25.050 --> 09:31.440 all required strings as well as the Smtp user, which is also required string. 09:31.590 --> 09:36.030 Feel free to pause now and fill out the rest of the schema before we move forward. 09:37.900 --> 09:43.000 Okay, so now that we have everything we need in our notification service to configure our node mailer 09:43.000 --> 09:45.640 transport, let's go ahead and test things out. 09:45.670 --> 09:52.060 Back in Postman, we want to make sure we create a user that leads to an email we can actually test 09:52.060 --> 09:52.660 out. 09:52.660 --> 09:55.810 So make sure we actually have created a user. 09:55.810 --> 10:03.160 So let's go ahead and create an user by hitting localhost 3001 slash users and this will be a post request. 10:03.220 --> 10:08.530 I'll go ahead and change the email to where I want to be notified when I create a new reservation. 10:08.530 --> 10:11.380 In this case, I'll use the Gmail account we set up together. 10:11.380 --> 10:16.570 But you can feel free to change this out with your own email address and I will keep the password the 10:16.570 --> 10:17.200 same. 10:17.200 --> 10:22.720 So after we create this new user, let's go ahead and actually log in with it first. 10:22.720 --> 10:24.640 So we have our JWT set. 10:24.640 --> 10:28.990 I'll send a request to all slash log in and keep the payload the same here. 10:28.990 --> 10:34.750 You can see we succeeded and we should have our Json web token cookie in here. 10:34.840 --> 10:38.870 And so now let's go back to localhost 3000 slash reservations. 10:38.870 --> 10:39.110 What? 10:39.110 --> 10:40.910 We're going to create a new reservation. 10:40.910 --> 10:46.220 After we charge this card with Stripe, we know we're going to be emitting event to the notification 10:46.220 --> 10:54.530 service to notify the user associated with this request on that JWT, which we know is the newly created 10:54.530 --> 10:55.190 user. 10:55.190 --> 10:58.670 So let's go ahead and send off a new reservation. 10:58.670 --> 11:01.010 We can see the reservation was created. 11:01.010 --> 11:06.980 So now that the reservation has been created back in the Gmail account that I associated with this user, 11:06.980 --> 11:12.890 we can see we have a new email titled Sleeper Notification from the Sleeper Nest app. 11:12.890 --> 11:16.760 And importantly, we have the test text that we included here. 11:16.760 --> 11:24.380 So lastly, let's extend our notify email DTO to take in text so that this can be customized. 11:24.410 --> 11:29.900 I'll go ahead and add a new is string field called text of type string. 11:33.760 --> 11:39.480 Lastly, let's open up the payment service where we know we're actually calling notification service 11:39.490 --> 11:42.450 and we'll now include a new text property. 11:42.460 --> 11:47.830 So inside of this text property, we'll go ahead and open up a template literal here and say payment 11:47.860 --> 11:50.830 of and then open up a variable here. 11:50.830 --> 11:59.140 We'll say amount times 100 has completed successfully and we'll go ahead include a dollar sign before 11:59.140 --> 11:59.380 this. 11:59.380 --> 12:04.300 Just for some formatting, you can actually go ahead and get rid of the multiplying by 100 here because 12:04.300 --> 12:08.680 we know the value we're supplying is already going to be in dollar amounts. 12:08.680 --> 12:14.290 So now that we've completed this, let's go ahead and back to Postman and send off another reservation 12:14.290 --> 12:16.630 so we can test out this text. 12:16.870 --> 12:17.260 Okay. 12:17.260 --> 12:22.810 So now back in this Gmail, I can see we have a new email from Sleeper and now we can see our text which 12:22.810 --> 12:26.290 says Your payment of $5 has completed successfully. 12:26.290 --> 12:32.320 So now we're able to notify users from anywhere in our system by calling our notifications microservice 12:32.320 --> 12:34.820 and having Gmail send emails for us.