Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Handling Duplicate User Sign-ups with Toast Notifications

In this Bubble.io tutorial we demonstrate what happens if a user tries to sign up to your Bubble app but there is already an account with that email address. We'll teach you how to handle Workflow errors and improve your Bubble app's UI using Toast notifications instead of browser alerts.

What happens when someone signs up to your Bubble app and an account already exists with their email address? Thanks to our subscriber who requested this video. I'm going to show you, and I'm going to show you some neat tricks you can do with it too.

Browser alerts

So we already have a user in the database with this email address. And so when I click Register, this is what happens. Bubble doesn't allow a new account to register with the email address because for all purposes, the email address is like the unique identifier for a user's account. But we get this rather nasty and unpersonalized, unattracted browser pop up. So we can use workflow error handling to put an alternative up. So if I clear that and then go into my app, you can see here that my registration workflow is simply to sign the user up and then to take them to a new page. But to handle an error, I go to my workflow editor here and select under general, an unhandled error occurs. And this can be used to do something differently whenever you get that browser prompt. So it could be an API error. It could be that users trying to change their password and their passwords don't match.

Unhandled error workflows

This is your way of personalizing that error experience. So I can say here, only when current workflow error code. And in order to understand what to put in this field, I can go into settings. And here are all of the different pre set codes error messages that Bubble gives you. And I can see that the one I need to use here is called USED_EMAIL in capitals with an underscore. So if I go back to the workflow, the code is used email. And then let's try that again. Code is used email. And then let's try that again. Code is used email. And then this workflow will run whenever that code is triggered, and it won't display that browser error message. So I can do something like this. So in plug ins, I've got Open Toast. Toast or toasty is a very popular library of notifications. It takes all the heavy lifting out of styling and notification on alert. So I'm going to use a Toast notification. So I go toast, and then background, I'm going to go for red because it's an error message. I'm just going to say account already exists. Use a different email address.

Let's see what difference that makes. So if I put in the same email address and click Register, there we go. There is my much better looking Toast in app notification or alert instead of the nasty looking browser.

So quick recap, first of all, Bubble is not going to let you register a user with the same email address. If you are demoing your apps, testing apps, and you want to be able to receive email, then you can do things like check if your email provider. This definitely works for Gmail. So if this is a Gmail account like that, you can put plus and you can... So that's your email address, your Gmail address, and you could put plus and you could put test one. And then you could do test two, test three. And that way you can have all of these demo accounts in your development app, but all of the emails will arrive through to your Gmail inbox. So there's that. And then there's also we can use the error handling in our workflows to display a much more beautiful, much more user friendly experience when those nasty browser pop ups come up.

Latest videos

lockmenu