So before we deploy our project, I just want to go ahead and add a couple of improvements inside of our app. So sign out of your application and yeah here's one thing whenever you're signing out make sure that you don't have two tabs open of the same application because then you're kind of not going to be signed out completely. So just always make sure when you sign out using NextOut that you only have one tab open of your session otherwise it's just going to be a little bit weird. So sign out of your application make sure that you can see the login screen and let's go to localhost 3000 where we can find the sign in button. And in here what we have to do is we have to install a dialog component.
So let's go ahead and shut down the app and run ntx-chatcnui-add-latest add dialog like this. So this will add the Dialog component inside of our app. Let's do npm run dev and then let's go back inside of components, auth right here and let's go inside of the login button and now we have to handle this case if mode is model right so we can do that by importing the dialog So let's go ahead and import everything we need from add slash components UI dialog. So we need a dialog itself. We need the dialog content and we need the dialog trigger like this.
And then inside of this mode model, all we have to do is render the dialog. Then we have to render the dialog trigger and let's give this dialog trigger our as child prop and inside we are simply going to render the children and then dialog content is going to render our login form from .slash login form or components auth login form. So that's how easily we can reuse our form. So if you want to do the same thing for register, feel free to do that. And let's just give this a class name of padding zero with auto BG transparent and border none.
So now if we go back to page.csx where we use our login button and change the login button mode to model. We can go ahead and click sign in and let me just refresh my page to confirm that this is up to date. Yeah, if you shut down your app, make sure you run it again. And there we go. Now it's in a model and to fix this hydration errors which we have all we have to do is also pass the prop as child right here.
There we go. So now no errors and you can see that I am opening this inside of a model instead of a redirect. So if I remove this mode and click sign in then it will redirect me to the page. Great! So we have that covered.
Now here's another thing that I want to cover. So currently when I log in into a specific page right here and when I get redirected, sorry if I go for example into admin and if I log out in my URL it's just a slash it says slash out slash login but what I wanted to do is I wanted to tell me what's the last place I visited so that when I log in back again it will redirect me back to that path. So let's go ahead and visit our middleware.ts where we can modify that. So find this if clause if we are not logged in and if this is a public route and in here let's define let callback URL to be next URL dot path name and then if next url already has a search let's do callback url plus equals next url dot search and then let's encode our callback so encoded callback url is equal to encode URI component with the callback URL and all we have to do is append that to this new URL here. So let's go ahead and do that.
Let's change this to use backticks and let's add a question mark and encode it call back URL query. So now make sure that you're logged out so when you refresh it should not show you the settings. If you log out and it's showing you the settings page again it means that you have another tab open of this page so make sure you close all tabs and then log out. So now I'm logged out and if I manually go to slash settings you can see that I'm redirected back but this time I have a query from where I came from. So if I try to access admin now that is saved in the URL so when I log in I will be redirected back to that page.
So what we have to do is we have to use that callback URL inside of our login form. So let's go inside of components, let's go inside of auth, login form right here and let's go ahead. We already have the search params, great so now besides the URL error let's also get the callback URL to be searchparams.get callback URL inside of our URL and Then we can pass that as the second argument of the login server action, like this. And let's go ahead and go inside of login here. And the values are gonna be the first argument, but the second argument is gonna be the callback URL, which is gonna be optional and a type of string.
And then we can go ahead and add that to the redirect too. So callback URL or the default login redirect. So that's why we use that here. So let me try this out now. So tutorial mailing at gmail.com 654321.
I have two-factor authentication on so I'm going to get an email so usually once I log in I'm redirected to the settings page but now since I have this inside of my URL, once I confirm this two-factor token, I should be redirected back to the admin page. So let's just try that out if it works. So looks like I made some mistake here. So let's go ahead and see what I did wrong. Callback URL here.
How about I try logging out and console logging the callback URL right here. Oh, I think what we did wrong inside of our middleware here is that we forgot to add the callback URL here. So make sure that in your response redirect new URL you add the callback URL like this. So let's try it out now. So make sure you're logged out.
Let's attempt to enter admin for example and there we go now you can see how our query has the callback URL and it seems like we are having this little type error here in the login. So let's change this to be string or null. There we go, that will resolve the TypeScript error. So if I try this again, tutorialmailing at gmail.com, 654321, and I log in, I'm gonna get a new two-factor authentication code now. There we go.
Let's go ahead and use this. And now I should be redirected back to slash admin instead of slash settings because that's the last page I visited or attempted to visit while I was logged out and there we go. It's finally working. Perfect. So now we just have to do the same thing for the social buttons here.
So let's go ahead and try that out. So go inside of your components out and find the social button here. And in here you can do the same thing so import useSearchParams from NextNavigation here get the search params from useSearchParams and then get the callback URL to be searchparams.get callback URL And finally you can do this here so callback URL or the default login redirect. So if I try logging in with GitHub now I should also be redirected to slash admin instead of slash settings. There we go.
Perfect. But there is one more thing we have to take care of. And that is inside of our mail library. So in here, we are hard-coded to localhost. So we have to change that to dynamically use our environment variable so let's go inside of .environment and let's create next public app URL to be HTTP localhost 3000 So don't add a slash at the end.
So just a localhost 3000 and make sure it's HTTP. And then let's go ahead inside of here and let's add const domain to be process.environment.next public app URL. And then we're simply going to change this from instead of being hard-coded to use the domain variable so domain slash out slash new password which will translate to localhost 3000 slash out new password. So later when we deploy, we can easily change the environment variable to our new deployed URL. So let me just try this out.
I'm going to go ahead and attempt to log in. And now I should get an email and the redirect link, oh sorry this is to factor out, not this, let's try new password. So let's try new password. So now I should get the new email being sent here. But let's see if it's going to lead us to undefined or to localhost.
There we go. It's still working. It's leading us to localhost. Perfect. So we wrapped up everything we need for our app.
Make sure again that you're only using one application open for this tutorial. Great! So we've wrapped up the entire tutorial now it's time to deploy. So the first thing we have to do is we have to create a new repository in the GitHub. So I'm gonna give this tutorial next 14 out master class.
I'm gonna make this a private repository and I'm gonna go ahead and click create repository. Then what we have to do is go inside of our terminal here and we can shut down the app and run git add and then git commit and I'm gonna go ahead and call this for example deployment. And I'm gonna now run this three commands, which we have. So this is if it's a new repository and this is if it's an existing repository. So let's use this three commands here, copy them and paste them here.
And after you push and when you refresh this project right here, project deployed, sorry, not deployed, you should see it in GitHub right here. Perfect. So now let's go ahead to vercel.com. Let's click add new project and let's select our new github repository and now we have to assign the environment variables so let's go to dot environment like this and let's copy everything and let's paste them inside So obviously we're gonna have to change the next public app URL but we can only do that once we deploy. So I'm going to click deploy, I'm going to pause the video and we're going to see if I get any errors.
If we do we're going to go ahead and fix them together. So I got an error with my deployment and I believe I know why. Yeah, I forgot to add that we need to initialize our Prisma client. So let's go ahead and go inside of package.json here. And in here, let's add a post install script and let's run Prisma generate and here's another tip for you if you don't want to wait until Vercel does the build you can manually do npm run build so this is not going to deploy or anything, this is just locally going to attempt to build, so run this and we're going to see if we have any problems here so we don't have to wait for Vercel.
And there we go here it looks like everything is okay. So now what we have to do is we have to redeploy. We can do that very easily with Vercel. All we have to do is run git add, git commit, I'm gonna call this fix and git push and once you push the new deployment is going to automatically start. So if you take a look at here, go inside of your projects here, select the new project and in here if you look at the deployments tab you can see that it's building a new one right here.
So you can click on it and then you can expand it again. And there we go. This time it was successful and you can see our page right here. So let me just go ahead and expand this. I want to go to the root of my project in the project so I can get the actual domain.
So don't use the deployment domain, use the actual domain right here. So when I visit this, there we go. We have our login here, but our GitHub and Google are not going to work. So let's go ahead and do the following. Copy the URL like this, this one, and let's go back inside of your github OAuth where you defined your client secret right here you can find you know in the beginning of tutorial where I did that change the home page url to be that new page and replace the backslash And now you have to change the authorization callback URL as well.
There we go. So your new domain URL slash API out callback GitHub. And go ahead and click update application. And you don't have to update the keys. So just make sure that you have those new URLs here.
And then you have to do the same thing in the Google Cloud. So find your project, go into credentials here. Let's go inside of web client. Let's change the URL to be that, remove the backslash and in here also replace this to go to slash API out callback Google with this URL here. And let's go ahead and click save here as well.
And now you have to go to the OAuth consent screen right here. And in here you have to add, let me close this. You have to add, where is it? So click edit app and you have to add authorized domain. So for me, it automatically added this domain right here the moment I added the credentials.
So just confirm that in your authorized domain, you have that domain and you can just confirm and save and continue. Great, so now let's go ahead and try it out now. So I'm going to go ahead and attempt to log in with GitHub here. Let's see if that's going to work now. So there we go.
I'm logged in. Perfect. And let me try Google. And there we go. Google is working as well, perfect.
Great, so you're officially deployed. What we have to do now, well if you want to, you can continue watching the video where I'm going to show you how you can add the domain to resend so that you can send emails to anyone and so that inside of your lib mail.ts you can change the from to be from whatever domain you want. For that you're going to need to purchase a domain, right? You can find very cheap ones for I believe $5. So I'm going to do that.
I'm going to purchase a domain and I'm going to show you how to change the DNS settings. So there we go. You can see you can find very cheap ones. So I'm going to go ahead and purchase this one and then I'm going to show you how to modify the DNS settings. So after you've purchased a domain or used whatever domain you want, go ahead and go to recent, go inside of your account, go to domains and I'm gonna go ahead and add this domain so auth master class tutorial right here.
I'm gonna click add and now we have to add this DNS records and then we have to verify them. So let's go ahead and do that. So I'm gonna go ahead go inside of your DNS I'm using GoDaddy and let's click add a new record. So the type is MX for the first one I believe, the host is send and let's go ahead and copy the value right here to be the value. Let me zoom out so you can see and the priority it says 10 so let's copy 10 as well like that and let's add more records so the second one is txt it's also send So txt send and the value is this one.
And let's add one more domain also txt. This is the name and this is the value. And let's click save all records. So make sure you've added all of those to your DNS right here. And then what you can do is go ahead and click on verify DNS records.
Sometimes it can take a couple of minutes, maybe even hours for DNS to propagate. So this is quite optimistic of me trying immediately. So if it doesn't work immediately, I'm going to wait a couple of minutes and then try verifying again. If it's still not working, perhaps we did something incorrectly. But it's just a matter of copying these values and adding them to your DNS records.
So this is the same process if you're using any other, I'm using GoDaddy simply because I know how to use it and access the DNS settings. You can use Namecheap or Cell, whatever you want to do, wherever you add your DNS variables. So I'm just going to pause the video and see where this is going. There we go. So my domain was officially verified and what we can do now is we can send the domains we can send emails using that domain.
So let's go back inside of our lib folder, mail right here. And I'm going to change this to send from, for example, you can do anything you want. I'm going to use mail at outmasterclasstutorial.com. So from now on, that's going to be my from domain. Let's go ahead and change that here.
And let's go ahead and change that here. So I'm going to go ahead and first attempt this locally if it's working and then we're going to go ahead and deploy again. So I'm gonna npm run dev here. And I should also be able to send emails to anywhere now, not just my logged in account. So we're gonna attempt to do all of that.
So I'm gonna go ahead and sign in. I'm gonna use tutorialmailing at gmail.com 654321 and I'm gonna check my email now. And let's check my email and there we go. You can see that the name is mail and it's coming from mailoutmasterclass.com. So we officially linked our mail.
What I wanna try now is whether we can send the emails to some other mail. So let's try that by creating an account. So I'm gonna call this test and I'm gonna go ahead and use, I don't know, something at example.com. So I think this should fail now, but I still believe that we should see it inside of our resend as something that has failed so let me just go ahead and refresh and there we go you can see how now we can send emails to any account that you want any email that you want perfect So this is now full on production, everything is working. And to push that to production, all you have to do is do git add, git commit.
Let's add domain and git push. And that's going to re-trigger the deployment but we didn't even add anything here right except changing our mail of course to use this one so you can do anything you can make this send you can make this whatever you want all that matters is that you have your domain here. Perfect, great, great job. You've wrapped up the entire tutorial. Thank you so much for watching.
Remember to leave a like, share and subscribe and watch my other videos if you like them. So just one thing that I forgot to cover. If you use the domain right here from Vercel, and for example if you try to log in, use your password and get the two-factor authentication token, the domain that will be sent to you, sorry, not this one, new password. Let's try this again. So new password for tutorial at tutorialmailing at gmail.com.
We forgot to change the environment variable of next public app. So let me just wait for this to come. There we go. And when I click here, you can see that it leads me to localhost 3000 instead of this domain. So it's quite an easy fix.
We just have to copy the URL. We have to go inside of the settings of the project inside of environment variables here and we have to find next public app URL so right now you can see it's localhost so our mail system is going to add URL links with that so just change it not with the slash to go to HTTPS your Vercello link and don't put the slash at the end and click Save and after that you have to go in your deployments select the last deployment and click redeploy like that and then we're going to demonstrate this again just to prove that it is working. Alright, the app has been deployed so I'm going to visit it on Vercel again and I'm going to send myself an email And let's just confirm that this time the URL link is correct. So let's see if this is the correct email. Looks like it is.
So this time when I click here, I'm redirected to the correct website. Perfect. So that's it. We've wrapped up the entire tutorial. We fixed the bugs, we enabled Resend, we enabled absolutely everything.
Thank you so much for watching one more time and see you in the next tutorial.