What exactly happens with a Bubble app when a password is forgotten? In the previous tutorial I demonstrated how to create a login form like this that has a forgotten my password button, shrinks the form down just to the email address, and then when an email address is entered and send password reset email is clicked. We run this workflow here. So step one is perhaps where the magic happens that generates an email and the email is sent using the email settings that you set up through here. So if you don't have a domain linked to your Bubble app, so you're still on the free plan.
Sending emails with Bubble
For example, you can still send emails through your Bubble app. These emails, known as transactional emails, transactional emails are different to mass or bulk emails. The transactional email is 99% of the time triggered by an action taken by a user and it is sent to one user rather than a group of users. And you can still send transactional emails through Bubble, but they kind of go out through like a pulled service and they don't appear as if you are the sender. It's more of a generic Bubble identity, so it's suitable for testing.
Transactional email providers
But when you send your app live or you've got users testing it, you really do want to set up your own domain and then set up the transactional email provider that Bubble gives you details for here, because that's going to increase the chance that your emails are delivered reliably and decrease the chance that they end up in spam. So that's what happens at this step here. Now, if you do have your own transactional email provider, say you set up your own API integration, or you're using a plug in for another service like Mailgun or Postmark, then you can tick the button here and then it just generates the token. And you can retrieve that token by referring back to step one and inserting it as dynamic data into a plugins action workflow.
If you've got that API or that plugin set up, but as it is here, this email will be sent to your user and they'll receive a link. And if we look in the Bubble documentation, you can see that the link is to a page on your site reset underscore password, and the link contains a parameter here of reset equals. Then this is the unique ID that gives the user permission to reset the password. So it's single use, it's completely unique. The user will click on that link and they'll go through to your reset password page.
And I think that it's likely all too common that lots of people launch their Bubble apps without bothering to style this page. But as you can see, if you don't style it, you end up with a lot of the default Bubble UI elements. So you'll want to restyle this page, but let's have a look at what happens when the user arrives. They click a button. And then there's a workflow action of reset passwords and it refers to two fields and that then resets the user's password.
You might want to also add on to here just a suggestion of a step two, direct them to the main area of your website, otherwise they could end up stuck on this page.
Password reset tokens
So if you are using your own transactional email provider, we go back into login demo and you have generated your token, you'll need to construct this URL. And so the way to do that would be in dynamic data.
If I express it in here, obviously you won't be putting it in here because this isn't sent. If you tick this box but just so I can display some dynamic data, you can go for home and then we copy and we reconstruct this address.
And then here is where you would refer back to your step one and put the token in. And that way you can still present your user with the onetime link to reset their password without having to use the default transactional email provider. That Bubble lets you set up in settings. My personal favourite is Postmark and there'll definitely be a video coming out soon of how to set up your own custom integration in with Postmark and understand their layouts and their templates because it's really reliable. They've got a fantastic dashboard and once you understand how to do the API connection, you can really quickly have some fantastic looking templates for all of the ones you expect, like your password reset, like welcome, you get the picture.
So watch out for those videos in the future.