 In this video, we'll be building out a functionality for users to be able to verify their email addresses using PocketBase's request verification API, and you can look for more details in the PocketBase docs, but this is not that straightforward in that you have to set up an email server to be able to send emails out to users so that they can verify their email addresses. So to start off, let's go over to our PocketBase control panel here and go to settings and click on mail settings. So here are a few customization options that you can use to customize your email templates and stuff like that. But the most important option in this page is this option right here to use an external SMTP mail server because if you don't specify, you don't configure an external SMTP mail server for PocketBase to use. PocketBase is going to try and send the emails out from your current server to server you're using to host PocketBase on and it's not guaranteed to work and most of the time it doesn't work anyway because you don't have an SMTP mail server on your, especially if you're hosting this and you're developing it on your local machine, there's obviously no mail server running on your local machine. So what I'm going to do is enable that and then here we can set up our SMTP server host, port and everything else. So there are a few external SMTP mail server providers out there that you can use and some of them you can use for free. There's like a free tier, a free number of emails that you can send before they start charging you and I recommend using send in blue as a start because I think you have 300 emails that you can send for free before they start charging you and to test out your app or develop it I feel like 300 emails is it's enough for your usage as a beginning. Yeah I just checked their website for their plans and there's a free plan that allows you to send 300 free emails a day and that's a lot of emails just for a testing server so I'm pretty sure that's sufficient for you. So once you have a send in blue account go and click on transactional on your dashboard and then here under transactional click on settings and then go to configuration here just click on that and it'll have a link there that you can use to get your SMTP key so just click on that and it'll bring you to this site where you can create a new SMTP key so just click on generate a new SMTP key you can name this whatever you want pocket base maybe pocket base click generate and it's going to give you this key that you can just copy just copy that don't lose that key just copy it and then go over to your pocket base dashboard and just paste it in the password field and then go and close this up and then click copy your your login and put it in your username field here and then you have to provide it with the SMTP server host URL and just go and copy the SMTP server domain here from sending blues page just put it here and pocket base so you're going to notice that the ports probably right by default it's the correct port of 587 and just go ahead and save the changes and once that's done you can always just click send test email and then you can just specify an email address to send it to you can choose any of the options here just click on send and then you should be able to just go to your inbox and just refresh and hopefully you'll see it appear if it's working and there we have our test email if it appears it's working it's not then something went wrong and you might have to check and see there are a few customization options that you can change in pocket base for example the name here and the email that you're sending from and the template for the html in the email you can all you can change all of that if i just go back to a control panel and just make sure i hide my username properly and all right let's scroll up here you can change the sender name to something else like whatever your name is and there just set the sender address and then you can just save the changes again and then send test email send it again and then just see if it worked so i should be able to just oh it's in promotions now and you can see that it's successfully updated and we have our new email address showing up here in the subject line all right time to make the ui component in react to be able to send verification emails from our app so i'm going to go to vscode let's make a p tag here to say verified should be false for now it looks like that we can refactor our code here just to make it a little neater components just i'm going to put off inside of components and then we should have to update this to components slash off see if everything still works so in pocket base there are two different types of collections there's a standard normal collections that you use to store data and there's an off collection type that you can use to store off tables so this is an example here of an off table by default pocket base has a collection called users and it's an off collection and off collections have this field this this field called verified and that's the field we can use to query if a row a user is verified or not and because the verified column is just like any other column in pocket base collection tables you can query the value of this column just like how you would query the value for any other columns in pocket base and there's the code for that in the view record section of the pocket base docs and the code is here but i'm just going to guide you through it and we can just make our own hook for the functionality to detect if we're verified or not so let's make a hook here called use verify.js export default function use verified and then let us go and use effect i will also preemptively make a state variable here called is verified set is verified and then use state of false will import use state from react and here let's return is verified to the hook which we can get from our auth component so let us go ahead and do const is verified equals to use verified and then here instead of hard coding false we can do is verify now that's going to be a boolean it's going to either be true or false and we can't just throw that into the html so we have to do two string and then here in our use effect hook that is just right and asynchronous function async function check verified and in this function i'm going to just copy this here and just paste it and here instead of record one that's renamed is the user data pb you have to import that so import pb and then here instead of the collections posts we use the users collection and then record id so let's get a user id so const id equals to pb.authstore.model.id and just put that here id and we can get rid of the optional options here so we're just passing the id here into the get one method and then we can go ahead and just set is verified so remember that here we're actually getting all the user data of the emails the avatar profile picture url all of the unnecessary things that we don't need so we can just extract the user data dot verified field and just set that to state now just for understanding purposes i'm logged out to the console i'm gonna log the entire user data object so you can just read what's what this code is actually doing and now what we have is a function definition inside of the use effect hook and this function isn't being executed so we have to go ahead and call it if we are logged in this is basically just if we're logged in i can just refactor the code and just take that out const is const is logged in equals to this so if we're logged in then we just want to check if it's verified on or not because we can't do this function if we're not logged in yet because the id will be undefined.authstore.model is undefined when we're not logged in so we always want to make sure we only run this function if we're logged in and now we can just go back to here the auth component and then we have is verified we can just yeah everything should work if i go back to my browser and just refresh you can see that it says verify is false and then we log this to the console it has all of the user properties we have avatar collection id blah blah blah email so that's our email and then we have our verify here false let's come back to the code here and make a conditional button here that says if we're not verified so if not verified we want to make a button appear and this button is going to be called send verification email and that should appear to trigger a verification email request in pocketbase there's this method you can call call request verification i'm just going to take this entire thing and you can you can always put that in your auth component here in the ui as well but i prefer to have the functionality code separated into the hooks so here we have our use verified hook right we can just go ahead and just make another async function um request verification and it takes in an email so this is the email that we want to verify or rather we can just do const email equals to pb dot off store dot model of email and then i'm gonna just do const response equals to await pb dot collection that users dot request verification and then let's put the email in here so if the response is true which means if it succeeded we'll just alert the user and tell them verification email sent check your inbox and just save that and then we can include request verification in our return object as well so that way we can destructure request verification and then just go to our button here yep and then do on click equals to request verification now fingers crossed it will work in our ui now obviously i can't test this just yet because we're logged in as user at gmail.com and i don't have access to that gmail account someone else probably has that username registered already right so i'm gonna just make a new record to an email that i actually have access to and we can test it out that way and verify this false you see that we can click on create now if i log out and just log in with my email and then let's click on send verification email we get the alert that says verification email sent i'm going to go to my inbox and just refresh this look we get our verification email that's working so i'm going to open that up and just copy the link to the verify button and just paste it in my browser here let's just paste this here and just click enter and it says successfully verified email address so if i went back here and refresh the page you can see verified is now true and the send verification email button has disappeared and if i were to go to my dashboard my control panel and pocket base you see the verify check mark appear next to our user record one interesting detail about pocket basis email system that i like to point out is that if i went and copied the link for the verify button and pasted a link here you can see that it's a weird link linking to some weird domain probably owned by pocket basis maintainers if i copied the link here and use a command like wget to extract the details you can see that the ip address here is something like this i can copy that and go to geo ip and just see where is ip is coming from it's summer in paris so probably the maintainers because it's definitely i'm not in paris so it's not my ip address but we know that this url is redirecting us this location and it's basically local host port 8090 underscore hash so that's like pocket basis default verification confirmation handler i believe and where that's coming from is here in your mail settings in your default verification email template you can change your action url and that's pretty much matching up with whatever is outputted here in our location and so what that means is that if you don't want to use pocket basis default confirm verification handler you can use something like react router or nextjs and make a custom route and you can do something like confirmation and slash token or you can do some parameters here like token equals a token and you can get that token and just manually confirm your user's verification status using this dot confirm verification method here and you can just pass the token in there