Handling Duplicate User Sign-ups with Toast Notifications

Understanding Duplicate User Sign-ups in Bubble

What happens when someone signs up to your Bubble app and an account already exists with that 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. So we already have a user in the database with this email address and so when I click register this is what happens. It 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, unattractive browser pop-up.

Implementing Workflow Error Handling

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 and Unhandled Error Occurs. And this can be used to do something differently whenever you get that sort of browser prompt.

Customizing Error Messages

It could be an API error, it could be that users trying to change their password and their passwords don't match. 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 preset 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.

Setting Up the Error Workflow

So if I go back to the workflow, the 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 plugins I've got open toast. Toast or toasty is a very popular library of notifications. It means it takes all the heavy lifting out styling and notification on alert.

Implementing Toast Notifications

So I'm going to use a toast notification. So I'm going to toast and then background I'm going to go for red because it's an error message and 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.

Recap and Additional Tips

So a 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. If this is a Gmail account like that, you can put plus and you can put plus and you can put test one and then you can 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.

Conclusion

So there's that. And then there's also we can use the error handling and our workflows to display a much more beautiful, much more user friendly experience when those nasty browser pop ups come up.