Created email confirmation system

Hi there,

I just love working with Bubble. It’s been about 4 years and I’m always amazed at what I can get it to do with a little thought.

Yesterday I created this email confirmation system for one of my apps…

The app lets people signup/log in with the usual OAuth mechanisms such as Google, Facebook, LinkedIn, Microsoft, etc., but also gives an option for people to just signup using their own email & password combination. However, I want to make sure that those emails are legit of course, and so this system generates the 6 digit code, sets a 24 hour expiration and emails it to them.

Then they go through the process in the usual fashion, checking the code, the expiration and so forth. The form behaves just as you would expect, typing in a number and then the field automatically focuses on the one to the right so no tabbing required. Fields highlight upon focus and give a nice experience as one would expect.

It runs through a myriad of error checking of things that could go wrong and alerts the user to them under the Verify button. The whole thing works a treat and integrates very smoothly into my app’s overall workflow.

Another cool example of what you can do with Bubble.

Cheers,
Dan Underhill
Data Designs, Inc.

2 Likes

Dan,

Thanks for sharing. Just wondering why you didn’t want to use Bubble’s built in confirmation feature?

I find it more and more common that websites don’t let you paste the confirmation code into different boxes (truncates after the first number) which is super annoying. Were you able to solve for that?

1 Like

Hi there,

I didn’t use Bubble’s built in feature because I’ve never used it before and I have a very specific vision of what I wanted and so I just got on with building what I had in my mind. I’ll circle back and learn a little bit more about their solution.

As far as pasting goes, my solution doesn’t allow a 6-digit paste to occur. Each digit needs to be entered manually, and using the Input Formatter plug in, each input can contain no more than 1 character. When a character is typed, a workflow is triggered to set the focus to the next field to the right.

I’m sure if I thought about it, I could come up with a system that would allow a single paste of the 6-digit number and populate the boxes just fine. In fact I could have easily used a single Input to accept the entire paste, but chose this method because it seems to resemble what I’m commonly seeing out there. Always open to ideas though.

Cheers,
Dan

Got it. Well good job.

Yeah goal would be to have the separate boxes for each number but still fill them all in on paste.

1 Like

Challenge accepted :wink:

I never used the inputter plugin, but off the top of my head, the solution may work something like this:
Don’t set a character limit on the first box (but only allow 1 digit to be viewable) and then on input change →

  • IF input length = 1 → focus on next box;
  • ELSE (input length = 6) → extract digits 2-6 and put them in boxes 2-6 and focus on verify button.

I was thinking essentially the same thing, using regex to extract digit #2, digit #3, but I couldn’t find the right regex formula to get it

you can always use splitby: or openAI should help you with the regex.

1 Like

I definitely checked out GPT for the regex, it got me close but didn’t nail it. I noticed that sometimes regex formulas will work outside of Bubble, but then within Bubble it doesn’t quite get there without some subtle tweaks.

I had to try this out. Here is the best I got.

Editor: testApp42wCleanDB | Bubble Editor

Preview: https://testapp42wcleandb.bubbleapps.io/version-test/email_confirmation_code?debug_mode=true

What do you guys think? @code-escapee @underhill.dan

This solves for copy and pasting, or typing in one by one.

I tried this, but there were issues with focusing on the next input/button, so I just with the input formatter and it seems like a good solution.

Nice job and creative solution. I’d potentially be concerned about it being a little too wonky in certain situations (see image :point_down:) but this is def functional. Nice!

image

I just made it fixed width, I think I would just make it fit on a mobile screen and keep it fixed width for that size. That would probably fix it. Does it look better now?

hmm. I think it’s more the ability to add a space after last number (can’t show you a screenshot as the cursor disappears every time i try.

Yeah, I know what you are talking about. I think that is a Bubble issue. I am not even copying any spaces but it is showing up as a space for a moment when pasting.

Yup a Bubble wonkyness but nice!!

1 Like