How to Build a Signup & Login Feature in Bubble.io

In this tutorial, I'll cover everything you need to know about building a signup and login feature within your Bubble app.
Bubble is one of the most powerful no-code tools available. It gives you the ability to create fully-functional web apps, all without touching a single line of code.
If you're building in Bubble, one of the first core features you'll often need is the ability to register user accounts. Throughout this tutorial, I'll cover:
1. How to create a signup & login popup
2. The workflows you need to power each feature
3. How to store user account information within your database
After watching this tutorial, you'll be able to easily create your own user registration feature within Bubble.
---
About me:
In 2020, I worked directly with the Bubble team to write their 'How-to build' blog series. Each installment shared written instructions on how to recreate popular products using their no-code tool. Since the beginning of 2021, I've focussed on creating my own video series to teach no-code makers how to get the most out of Bubble's platform.
Note: This video series has no direct affiliation with Bubble themselves. This is something I've created on my own.
---
Timeline:
00:00 - User registration overview
00:47 - Signing up new users
13:30 - Logging existing users in
20:36 - Live demo
21:37 - Additional insights

[@Sora-fo5ml]

Thank you for all these great tutorials, you've helped me fix bugs I thought I'd never fix, other Bubble tutorial youtube channels assume that everyone knows how all Bubble features work (how ironical) so they don't explain why something works the way it works and overall don't explain everything in so much depth, I always choose your videos over my go-to 5 minute vids, with your content I'm sure that I will be able build the app exactly as I want it :)

[@BuildingWithBubble]

Glad it can help! I remember how challenging it can be to learn Bubble in the beginning, so I try to spare no detail when explaining each concept. You've got this 🙌

[@folrry]

As someone who bought one of your course, this gave more clarity to some of my questions...

[@BuildingWithBubble]

Glad it could help 🙌

[@benedictwallis5820]

Thank you so much for this! Your guides are so valuable! You’re a life saver :)

[@BuildingWithBubble]

Always glad they can help ✌

[@yanathelama1]

this tutorial was super helpful! thanks :)

[@BuildingWithBubble]

Glad it could help 🙌

[@EastMaines]

Thank you! This was perfect.

[@BuildingWithBubble]

My pleasure 😎

[@InternationalCollaboration-hub]

Thank you very much!

[@BuildingWithBubble]

My pleasure ✌

[@ryzeonline]

Very helpful, thank you!

[@BuildingWithBubble]

I got you ✌

[@strauss7151]

Love these tutorials. Although I wish you posted the 'clone' tutorials more often, since they really provide clarity on how to apply these skills in a real environment.

[@BuildingWithBubble]

Glad they're helpful! I recorded a few of these introductory tutorials and scheduled them before I went on holidays over Christmas. I just got back to work today, so I've got plenty of clone tutorials in my backlog now 👍 Was there any particular tutorial you'd like to see?

[@getjob3662]

@@BuildingWithBubble And the owner of the application automatically takes a commission while making transactions. Buying and selling land. Also add money payment methods because all land. Also, whoever wants to buy the land can specify the area he wants to buy, and then did not buy the plot, his name and the sale sign should be placed if he wants to sell. Regarding a chat, a person puts on a person’s profile how much he bought and how much he has, and if he offers land in the auction, and adding messages to communicate with him.

[@scaffeoa]

@@BuildingWithBubble how do u do a login for the quora clone one - I cant login in lol only registered lol

[@BuildingWithBubble]

@@scaffeoa Hey, you could replicate the steps within this tutorial into the Quora clone. Instead of using popup elements, you could create a separate page which is used to log the user in (not register a new user. Then when someone clicks the 'I already have an account' text, redirect them through to the login page. Let me know if this helps.

[@scaffeoa]

@@BuildingWithBubble done....got it and works!

[@prakashm.s8134]

Thank you

[@BuildingWithBubble]

My pleasure ✌

[@faysalkareem7621]

Great video,helped me a lot

[@BuildingWithBubble]

Awesome to hear ✌

[@chris2hamilton]

Awesome video, thanks! Noticed that if you make the popup a reusable element and the copy the Register PopUp for the LogIn PopUp as a reusable element, the LogIn PopUp doesn't show up in the workflows.

[@BuildingWithBubble]

When you make a copy of the reusable element, it's also important to update the name of that element (if you haven't already). If you don't change the name, it might be difficult to see which element you need to reference. Hope this helps!

[@blogshack8469]

Reusable items have their own separate workflows.

[@jaafarwahbeh9031]

Hey! Great vid. I am working from my iPad and the buttons I add oil the popup are behind it. They aren’t in the popup; they are in the homepage. Idk what to do.

[@BuildingWithBubble]

Thanks Jaafar. I'd recommend trying to delete the popup, then add a new version on the screen. This can sometimes help reconfigure the elements position. Hope this helps.

[@damodardy5761]

Nice Video!!.. Thanks Just wanted to confirm if I can build login page without building the signup? will that work

[@BuildingWithBubble]

Glad it could help! You'll need a way to register users before they can login to their accounts. If you really wanted, you could also create these experiences on popups instead of having dedicated pages. Hope this helps!

[@Outskirts4ever]

Hey Lachlan, great video. Do you have any videos or advice regarding an admin verification process? For example, part of the user sign-up process involves a user uploading a document that needs to be reviewed by an admin of the site/app, and the user can't continue through the sign-up process until the admin has 'verified' the user? Or the user can't access certain features of the site/app until they are 'verified'? I appreciate all the help you may be able and willing to give. Keep up the great content!

[@BuildingWithBubble]

Great to hear the content has been helpful so far! This is definitely possible. Under the user data type, I'd add a data field called 'approved'. This field should be set to a yes/no type with a default value of no. Then, when a user registers an account, store their information (like their email, password, name, and the additional document) like normal. From here, you could create an admin dashboard page. On this page, add a repeating group that displays a list of users where the 'approved' status = no. In each repeating group cell, you could add the users information, a link to their document, as well as an approval button. When this button is clicked, update the current cells users 'approved' field to now = yes. Hope this helps point you in the right direction. I'd be happy to record a video tutorial on this, but I've already got a backlog I'm working my way through at the moment.

[@Outskirts4ever]

@@BuildingWithBubble Amazing, thank you! Would I then add a condition when navigating to the home page of the app that the verification status is on yes to ensure that unverified users can't use the app until verified, and redirects them to the verification page?

[@BuildingWithBubble]

@@Outskirts4ever Yep, you nailed it 👌

[@Outskirts4ever]

@@BuildingWithBubble Thank you so much! Very helpful! Do you have any advice on how I can submit feedback to a user if they haven't provided the right documents? Is there a way to fill out a text box and have that automatically e-mailed to the user?

[@BuildingWithBubble]

@@Outskirts4ever For sure. In the repeating group that that displays your list of yours, you could add a text box, as well as a button. When the button is clicked, use the 'send email' workflow action to send the current cells user a message. The message will be the value within the text box. Hope this helps!

[@Trend_forecast]

Hi, Thanks, Can you make a tutorial regarding email confirmation and password validation

[@BuildingWithBubble]

Yes, happy to add this to my list 👌

[@benedictwallis5820]

Hello mate :) do you have a video on the settings page at all? Trying to create a page where users can edit and add data about them but a little lost :) thanks!

[@BuildingWithBubble]

Great question. I actually cover this within an old tutorial on my channel here: kzbin.info/www/bejne/pH2khGOdaZ2Sipo If you watch from the 13:45 mark, you'll see everything you need to know 👍

[@lexapix7703]

Hi, I'm new to your channel and Bubble. Silly question probably, but the drag handles you use at 7:16 to resize the popup do not show on mine. I just see red edges as if the size was locked and have to manually type in the px size to resize it. What am I doing wrong? Thanks so much for your answer :)

[@BuildingWithBubble]

Hey, great question. You're not doing anything wrong here! Since recording this video, Bubble updated how you build responsive apps with their editor. The change was called the flexbox responsive engine. I'd recommend checking out this tutorial of mine here: kzbin.info/www/bejne/hHLGkmiglNOaidk Within this video, it explains everything you need to know about changing the design and size settings for elements. Hope this helps!

[@ItaintmeCCC]

What do you press @4:55 to join the text and input fields together before you copy and paste it?

[@BuildingWithBubble]

Great question. After selecting the first element, I hold the shift key, then click on the next element. This then allows you to grab both. Hope this helps!

[@Squire-Collective]

Can you do a video on a sign up workflow? For example, for a site that is a listing site/directory/, like Yelp, The Knot, AirBnb, etc. users can sign up, but what happens if they don't fill out their profile or their listing? Can you create a video explaining how to make their account unverified until they fill out the minimum information like their business name/property type, etc.?

[@BuildingWithBubble]

Happy to add this one to my list 👍

[@robertmeanor8026]

Hi! Great tutorial. My PopUp appears in the REUSABLE ELEMENT area of the bubble editor, which I think is correct. But, In the SignIn buttons workflow when I press show an element the box that appears does not give me the option "Popup-signIn". It should be there but its not. Any ideas on how to fix?

[@BuildingWithBubble]

Glad it could help! And great question. After you build the reusable element, you'll need to actually add that element onto your page. If you down to the bottom of your elements menu on the left-hand size, you'll see a dedicated section that contains all of your reusable elements. Hope this helps!

[@robertmeanor8026]

@@BuildingWithBubble Ahh! It works now. I Right Clicked on the popup and converted to a reusable element. I had forgotten to do that. Thanks for the help!!

[@mattjohnson8009]

Can you explain that "settings page" that it redirected you to after logging in?

[@BuildingWithBubble]

When i build any app, I create a settings page that allows users to make changes to the data stored within their account. On the settings page, I just add a series of input fields that match the data fields under my user data type e.g. name, bio, profile photo, etc. Hooe this helps!

[@lovelivelaugh4542]

how do i get ride of the index, header and footer that comes with bubble

[@BuildingWithBubble]

Great question. Both the default header & footer are built using a reusable element which can be edited or deleted. I'd recommend checking out this tutorial here to learn how it can be deleted: kzbin.info/www/bejne/l6Kko4WCoMqbrpo Hope this helps!

[@D3TR0XGaming]

I know I'm late to the video, I'm trying to get the Sign up and Login to work, I've made the workflows work fine, though I don't feel like the login workflow is really login the user in since I can login with another account at the same time, I'm not using any popups for what touches the sign in and login, i'm just using different pages for the sign in and login, will it still work the same if I follow your steps without including the popup option?

[@BuildingWithBubble]

Yes, it'll still work without using popups. I just use popups as I prefer the user experience. You could recreate both experiences on pages if you really wanted.

[@D3TR0XGaming]

@@BuildingWithBubble perfect, thanks, apparently I already figured it out about the sign in and login thing, I just couldn’t confirm that I really was logged in, so I just added a text, and in the text description, I’ve put “dynamic input/ current user/ ‘s email or name” and it showed that I really was logged in! Learning fast in only 7 hours haha

[@GiorgioDiMartino]

Hey 👋 it's super interesting! Is it possible to create a sign-up with telephone number? Thanks

[@BuildingWithBubble]

Great question! I've never done this myself, but I've seen a post on the Bubble forum that explains a potential solution: forum.bubble.io/t/how-to-signup-login-user-using-something-other-than-email/78526/4 Hope this helps point you in the right direction!

[@robertmeanor8026]

Hi! Enjoyed this tutorial very much, but have one small thing to fix. On the popups, when I press "Already have an accout? Sign in" it does as it should and the alternate popup appears. But on the Sign in popup when I do the same and click "Don't have an account? Sign up" I get a popup with this: "This is a circular Reusable Element... Reusable Elements cannot contain themselves (or other Reusable Elements that contain them). " This appears when I try to toggle back and forth between the popups. Do you have and advice about this? Once again thanks very much for your time!

[@BuildingWithBubble]

It sounds like you're using a series of reusable elements that are stacked within each other. Can you just double-check that your signup reusable popup element is separate from your sign-in popup reusable element. One shouldn't be placed within another. They should be two different elements on a page. Let me know if this helps.

[@robertmeanor8026]

@@BuildingWithBubble Hi! i'm still having the same problem. The 2 popups seem to be on the same page. I can only view one of them at a time. I think I've tried everything but to no avail. Any other thoughts??

[@Thenewcarrency]

Hey there, great video you gained a sub ! However I did everything correctly but I'm stuck at 9:23 because when I link the inputs we created to the "Sign the user up" page it shows errors on every input, saying "X should be text but right now it is a element"... I can't continue the video, and I did everything you said, I even started all over again but yeah, same result 😢

[@BuildingWithBubble]

That does seem strange. Happy to help! Could you try and delete the input field, then re-add this in. This might reset the configuration and fix the issue. Let me know if that helps ✌

[@Thenewcarrency]

@@BuildingWithBubble I will try this when I get home, apparently a lot of people have this issue according to the help center and forums from bubble 🥲

[@trayoray493]

Tips for error handling when user types in incorrect credentials or invalid input validations

[@BuildingWithBubble]

You can use a series of conditions to display an alert message when someones credentials aren't accurate 👌

[@brandcrafteredinburgh]

how do i signup with different identity user and allow them see different page?

[@BuildingWithBubble]

It's always possible to add conditions on a workflow to cater for different user types. A great example would be if you're building a ride-hailing app like Uber, and you allow users to select their account type (rider or driver) on the registration page. It's possible to create two separate workflows that run based on what the user selects their account type to be from a dropdown menu. After they register an account, you can send each unique user to the most suitable page. Hope this helps.

[@DanteKali]

4:58 how did you copy the input field and heading? I know the command shirt cut i cant select more than 1 at the time.

[@BuildingWithBubble]

On a mac, I just hold the command key while clicking multiple elements. If you're using a Windows PC, I'm under the impression you can do this by holding the shift key and selecting. Hope this helps!

[@DanteKali]

@@BuildingWithBubble Thats it im buying this course! How did you drag and drop both of the items now? I can only carry one even tho both are selected.

[@BuildingWithBubble]

@@DanteKali From memory, I'm under the impression you can only move one item at a time - even though you can copy and paste multiple at once.

[@lemoneyd_]

Hey man, may I know how to add an image uploader that shape is circle? :)

[@BuildingWithBubble]

Hey, this is relatively straight-forward. Just update the style of the image uploader element and set the roundness of the border to be 100. This will make it a perfect circle 👌

[@lemoneyd_]

@@BuildingWithBubble Hey man, Thanks a lot! We're actually bunch of students wanted to learn no code and we are binge watching all your videos! Thank you from the Philippines!

[@BuildingWithBubble]

@@lemoneyd_ Glad the content can help ✌

[@tahzib1451]

not using the new responsive UI?

[@BuildingWithBubble]

Hey, I originally recorded this tutorial back in November of last year. I have few more scheduled tutorials coming out over the upcoming weeks, then all of my tutorials from then on will be using the Flexbox engine. I was also planning on creating a dedicated tutorial for the responsive engine itself 👍

[@jadesh8962]

Can i make e-commerce app with bubble.. I'm starting a new start-up so..

[@BuildingWithBubble]

Yes, this is definitely possible with Bubble. I'd recommend checking out my Etsy clone course here: kzbin.info/www/bejne/gYu9fYFspMp3g5o This covers a lot of the same principles as an e-commerce store/marketplace. Hope this helps!

[@christopherjewell4311]

@@BuildingWithBubble 19:52