Allow users to login with username or email

By default Bubble allows user to login with an email address and password. This was very straightforward to set up.

However, I am migrating accounts to Bubble that originally do not have an email associated to their account. To ensure a seamless transitions for my legacy users, I want to allow my login form to accept a username or email as the login. How do I go about that?

5 Likes

You’ll need to “code” some of this in Bubble. You’ll need logic for the account creation and registration. On registration, you’ll probably want to check whether the input field is an email or non-email (i.e., user name). If it’s non-email then log the user in by looking up that user’s email based on that user name (to input into the login action) and then, of course, use the password input field as the password. That should do it.

1 Like

If they don’t have an email address associated with the username, then it is going to be tricky.

So you either have to create a dummy email (which then makes password reset more complex) or bypass bubble’s account creation entirely (which is more complex still).

In the long run it will be simpler to tidy up the user database when you migrate, by gathering email addresses where they are not present.

2 Likes

@NigelG: That’s the plan, I can set up dummy emails for now until I get the actual ones. Regardless, I still would like to have users login with email or username as I can use this for another app that I working on.

@sridharan.s: When you say code, you’re just referring to the workflow? Do you have an example I can use as a reference?

Largely in agreement with what has been said so far.

You could create a “holding” email with your domain name for each user. (For example, [currentusername]+user@yourdomain.com. (+user or some other parameter so you can create a filter if you have a catch-all set up in your email admin).

Then, when a user logs into your system for the first time, you do a lookup of their current username and the entered password, then substitute the [currentusername]+user@yourdomain.com for the login workflow. If the password entered is successful, then log the user in and go to an intermodal that requires their email address. Then, once an email address is entered, update the database.

I would recommend putting a flag on the user profile as well to indicate that they’ve completed this step.

1 Like

Yes, but the issue is then how to reset passwords. As you don’t have an email address, you can’t send the link via email. The reset function needs a token (otherwise you could reset anyone’s password).

You can use the “Just make token, don’t send email” as a result of answering a “secret question” or something like that.

But it does need thinking about. Alternatively, you could do the admin of passwords yourself.

1 Like

Got it. This is the workaround that I’ve used that made the most sense to me. After you create two input fields for the login, make sure that the username/email input is set to Email as the content format in order for this to work.

Next, create another Input element. Then, go to the Conditional tab, add the following conditions. In this screenshot, the Input Username or Email that you see in the condition is the field where the user will enter their username or email.

After that, be sure to uncheck the option This element is visible on page load and check off This input is disabled

2 Likes

What should be the content format of the second input (Input convert username to Email (log in))?
And which should be in front in both of them?

Can you provide me live workflow for this solution, which will be very much helpfull for me?

Hello Ethan,

That’s not working for me, something must be missing somewhere along the lines but I’ve copied exactly what you posted in the screen shots and I get an error saying for example, can not find a user with the email “johndoe”. I also tried it another way, but it keeps telling me to input an @ into the Username/Email field?

The whole username concept is something I rather do need, it would be great it you could offer anymore help as to where I go from here.

I’ve even made it live and created an account with a username and the same thing happens, my database definitely contains a username etc, but it just won’t let me use it to log in.

Thanks,

Mike

I looked at a similar problem for someone else today. It turned out that their username input field was still set to have a Content format of email. Changing it to text fixed the issue. Note that you may need to refresh your browser or open in a new window for the change to take effect.

Thank you for your reply, changing the input to a text field is what I guessed was supposed to be done, however I just get an error saying (for instance my user name is johndoe) cannot find a user with the email johndoe?

Also I always refresh the browser after any update, bubble actually tells you to also.

I will have to try again at some point, I’ve removed the whole username part for now as it’s pointless if it won’t work.

Thanks,

Mike

Just a thought, would needing the log in Username/email field set at text also mean that my separate inputs on the sign up form for Username & Email also need to be text inputs?

Thanks,

Mike

Also I just noticed that in the workaround it says to have the username or email input set to email not text? How did you get it work using the text option? I’m rather confused by that, as whatever I do just doesn’t work.

Sorry for all the replies,

Mike

I don’t understand why it says this? I’ve tried the username or email input as both email and text, I’ve also tried the convert email to username as both as well and I either get this error or one, as I said before that says please enter an @ into the field

I quickly made a demo page for you to see how it is set up:

You create two input fields for the login that are set to Email as the Content Format. First one will be your standard input field where the user will enter the username/email

screenshot

Next, create another Input element. Then, go to the Conditional tab, add the following conditions. In this screenshot, the Input Username or Email that you see in the condition is the field where the user will enter their username or email.

After that, be sure to uncheck the option This element is visible on page load and This input is disabled.

Finally, when you add your login button, go to your Workflow tab and set the Email field to your second Input element that is converting the username to an email.

screenshot

10 Likes

Hello Ethan,

You sir, are a saviour! It turns out I wasn’t adding the workflow part to read the email from the convert to email input, I can now successfully log in via username.

A couple of questions though,

  1. This has been solved, I just wasn’t thinking :man_shrugging:t3:

  2. I cannot get the users username to show as text on the ‘My Account’ page of my site or anywhere for that matter. But the second I change it to read the current users email it works again, any thoughts on why that would be happening?

Many thanks,

Mike

@ethan , you’re indeed a saviour like @BassLab rightly said :smile:

@BassLab thanks for the PM letting me know a solution has been found. Took about 15 minutes for me to get the username working. It was really worth the sleepless nights :smiley:

@ethan like @BassLab I also can’t seem to reference the username on pages such as My Account page, profile page etc. I checked out each user’s record in the App data section and the username name field for each user is returning a “yes” entry instead of the usernames specified/chosen.

Would appreciate getting some insight on how to correct this issue.

To everyone else, @ethan solution works for switching your app from email login to username login or both :wink:

Hi ethan, thanks for the details and the solution, i’m newbie in bubble and i’m trying to build my 1st website with signup/login functionality using username instead of email. I checked your example, however, i didn’t get how did you allow users to sign up for a new account using only a username.
Thanks & regards,
Hussain

Thanks Ethan for a great solution. However, if you use Remember Me functionality, my browser remembered the hidden email address field.

For anyone interested, I was able to implement the username functionality in a different way.

  1. When signing up the users, you append the username to a fake email.
  2. On the login form, set the email input field to TEXT so it accepts email or usernames.
  3. Create 2 workflows:

a. If the text in the field has an @, then log the user in with an email.
b. If the text doesn’t have an at, search for the fake email that corresponds with that username.

1 Like

@jeffrey.j.obrien: Thanks for posting an alternative way. So when you use the Remember Me checkbox, does it remember the username or email that the user inputted?

While this is also another alternative for people to choose from, I didn’t want to resort to a fake email path because that’s Bubble’s only required field for a user. I just wish they had more flexibility on it especially if people are making apps that may not require an email (similar to Bumble or other dating apps).