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.
Handling duplicate sign-ups: Learn the secret to creating personalized error messages for better user experience.
Toast notifications made easy: Discover how to implement stylish in-app alerts without the hassle of browser pop-ups.
Supercharge your Bubble app's registration process with error handling and custom 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.
Get the Complete Bundle for Just $99
Access 3 courses, 390+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 390+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Save over 70%!
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
We're here to help you launch your no code SaaS. Reach out to the team and we'll double check our vast library for useful content. We'll advise you on how we'd tackle the same problem and there's a good chance we'll record the video to help the wider community.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.