[FREE PLUGIN] Easy OTP Input

Showcase Plugins
1

Hello friends! Made a sweet and sleek OTP input. 100% Free.

I noticed there were other options, but not as responsive or flexible. I wanted to make one on my own without any libraries, so I used my own Javascript and CSS to do-so. This was solely intended for private use on a client but wanted to make it public.

Easy OTP Input

PLUGIN PAGE | DEMO | EDITOR | WEBSITE | DISCORD

Features

  • Keyboard support
  • Fully customizable
  • Reacts to a valid code
  • Paste support
  • Allow characters or force numbers
  • No libraries, no conflicts
  • Reset and auto-focus
  • Full native support

States :

  • Validated code (true/false)
  • Input value (text)

Triggers :

  • Input entered
  • Valid code entered

Let me know if there is anything else I can do to improve it.

3 Likes
2

NEW UPDATE!

version (1.0.6)

Enhancements

  • Event added: Input filled (triggers when your max characters is filled).
    – This was added to allow users to implement their own validation logic.
  • Action added: Reset
  • Debug mode added: see where your errors are happening, or how triggers fire.

Bug fixes

  • Now resets when backspace is triggered on the last character.
  • UI fix on the last character when you backspaced and entered in a character again.
  • No more misfires or duplicate events.

1.0.7 - HOTFIX:

  • Fixed state clearing wrong on backspace
  • fixed arrow keys not working correctly
  • more debugging.

1.0.8 - HOTFIX:

  • Fixed validation issue
  • Now has a disabled option
  • Validation uses its own class instead of the “disabled” class (“.validated”).

1.0.9 - HOTFIX

  • Fixed autofocus issue
  • Fixed double-backspace issue
  • Pasting works as intended again
3 Likes
3

Great plugin! Just noting the plugin page shows this as a paid plugin. I’d still happily pay for this in one of my upcoming apps :slight_smile:

1 Like
4

That is weird… shows as paid plugin but then lets you see the source code like a free one :thinking:

5

I saw that earlier… I thought that was some issue Bubble was having.

THIS PLUGIN IS FREE

image
image733Ă—163 10.1 KB

Still shows up on the plugin list as free at least.

I’ll submit a bug report if it still says it’s paid later.

1 Like
6

Does this show up on the frontend? Trying to figure out what the purpose of this would be. Can you backend email it and validate it?

7

The “valid” code you predefined in the properties? No, it won’t show up on the front-end (at least it depends on how you produce this code).

I currently use email & SMS with it.

The main purpose is to modernize your validation flow.

Once the correct code is entered or a full value is reached, an event will fire allowing you to either;

a) incorporate your own validation and customization
b) use the built in validation with a predefined code.

1 Like
8

Yeah, ive been looking for a way to just have users sign in by texting them a code but not exposing the code to the front end.

9

Simple enough.

image
image840Ă—580 21.6 KB

You can easily do that with “Calculate”.

For this instance I am making a temporary code that will delete upon refresh.

For your instance, I would create a new thing called “Some Token” (like security token or something, in my case I use 2FA Token).

image

I am able to generate a token with the same method as above, but I end up saving it. This way I can validate the token later.

I use a backend API workflow that checks for an email & password that matches, and if it does, then returns valid.

The same logic can be in place for just a code as well.

1 Like
10

Awesome. Im trying to make a passwordless flow for customers similar to a lot of newer apps. They just text you a code now. I havent figured out how to do this in bubble as a way to stay logged in.

11

You can just email a magic link. OR save the link, and setup a workflow when a valid code is achieved, then navigate the user to that link.

I haven’t tried that method yet but I’d assume it would work.

Hell… maybe I’ll just do that for my own app.

My goal right now is to allow users to login with two methods (requires at least one).

  1. SMS - sends a code to them anytime they make a change to their account or security info | users need a password still to login, but after they login, they are locked until they validate the code I generate
  2. Email - when a user tries to login and their account is set to email, it will send them a magic login link OR a code to login. If they use the magic link from the email, all is good. But here is where passwordless comes into play.

The logic:

  1. Save the magic link when they hit the button, and generate a code at the same time. Change a state on the page to allow them to input a code or tell them to click the link they got from their email.
  2. Send an email with the magic link and the code.
  3. If they click on the magic link, no problems there.
  4. If they want to enter the code in, the same logic I explained above with matching emails and codes will apply. We will create a backend API workflow that will validate the code they enter, and the email address they have on the current page (they’ll require another code if they leave the page – can introduce session based logic as well later on).
  5. if the code is right, then push them to the URL that you have saved from earlier generated from the Magic link action.

With this logic in place, you should theoretically be able to setup passwordless with email.

1 Like
12

Hmm… i see. So basically its still a magic link but the ux only knows theyre entering the code sent to them. Id like it to send a text as soon as page loads.

1 Like
13

This is awesome @GH5T

1 Like
14

Thanks @mac2 . Are you using it on your projects?