Throughout this guide, you’ll learn how to build your own user registration and login feature entirely out of no-code using Bubble.
The steps to building a user sign-up/login feature within Bubble include:
- Designing your app interface
- Building the workflow to register a new users account
- Building the workflow to log an existing user in
Full Transcript of Tutorial
1. Designing your app interface
Let’s open up a Bubble editor and I can start walking you through the process. Over in my Bubble editor, I’ve just created a sample version of a home page. At the top of my page, I’ve created a group with a few different headings, as well as two buttons within the top right-hand corner. These buttons are, of course, our ‘login’ and ‘sign-up’ buttons we’ll be using to register a user’s account.
Whenever one of these buttons is clicked, what I’d like to do is create an experience that displays a popup in the middle of our page, which will include the necessary fields for a user to add information like their email and password.
Back on my page, the first thing I’d like to do is add a popup element to my Bubble application. If I scroll on down to the ‘containers menu’ on the left-hand side of our page, I’ll select to add a popup to our app.
As you’ll see, the popup will be placed over the top of our page. This also replicates the real-world functionality of this popup with our app.
Before I add any element into my popup, I’m first going to update the name of the element. This will allow me to easily reference this popup when I build my user registration workflow.
For the sake of our tutorial today, I’ll call this popup our ‘popup-signup’.
Now, we can start adding the elements and input fields we’ll need for a user to sign up or register a new account in our application.
I’m going to scroll to our visual elements menu, then choose to add a text element to this popup. I’ll display this text within the center of the popup itself.
We’ll then update the contents of this text to display the words, “Register a new account.” While we’re here, I’ll also update the style of this just to be the default ‘H2 dark heading’ theme that Bubble provides.
To do this, I’ll remove the default style. From here, I’d then like to center this text within the overall element itself. I can then just reduce the height of that element, and I might just move that across because I’d also like to reduce the width of my popup element.
After adding the text heading to our popup, I’ll then choose to add yet another text element into our group. This second text element will act as a sub-heading.
When it comes to registering a user’s account, the information I’d like to store in our database is going to be pretty minimal. In my case, I’m just going to store the user’s name, email address, and password.
To clearly label our input fields on the popup, I’ll add a sub-heading to our group and call this element the ‘users name’.
I’ll then choose to bold the style of this heading, so I’ll open our rich text editor, then highlight all of the text and select to bold the formatting of this.
After adding this sub-heading, I’m then going to add my first input field. This field will allow users to store their full name.
Once I’ve dragged the input field into our popup, I’ll update the name of this element to be called ‘Input Name’ because when I create a workflow in a moment, I’d like to easily be able to reference which particular input will is storing the data I want.
After configuring the input field for the user’s name, I’d like to copy both the input field and the heading above it. I’ll make a duplicate of these elements, then position these below within our popup. I’ll update the title of this new field to be called ‘email’, because this is where I’ll allow a user to register their email address.
I’m going to then click on our input field and I’m going to update the name of this to be called ‘Input Email’. What I’ll also need to do is update the content format of this input field, because it’s currently set to register a text property. In this case, I’d like it to register an email property. By selecting the email value, Bubble will validate that the text added into this field will need to be structured like an email, so it’ll need to finish in things like @outlook.com or even @gmail.com.
After constructing this input field, I’m going to make one last copy of my heading and my input. I’ll position these elements at the bottom of our popup, then update the text displayed within our heading to ‘Password’.
From here, I’ll also update the name of the input field itself. I’ll give this the title of ‘Input Password’. Now, in this instance, I’ll need to update the content format to be a password, which just means that Bubble’s going to hide whatever characters are added into this field.
Finally, the last thing I’ll need to add to my popup will be a button that triggers a workflow. This workflow will register a user’s account within our database.
I’ll drag a button element into my popup, then update the text that’s displayed in this button to display the word ‘Register’.
I’m also going to remove the style of this button because I’d like to make a few quick changes. The first is that I’m going to update the color of this button, just to be my personal orange color code that I always use.
I’ll also update the roundness of this buttons borders to 20, so that way it has some curved edges. If I would like, it’s also possible to right-click and center that horizontally within my popup here. And now that’s all of the input fields we’ll need to add within our popup. I might just quickly close off the width of this popup so there’s not as much empty space between the borders and the input fields.
2. Building the workflow to register a new account
Now, that’s everything I’ll need to build for my popup element. At this point, I’d like to explain how we can now actually register a user’s account every single time this button is clicked. To do this, I’ll select our register button here, then choose to start a workflow every single time this element is clicked. Within this workflow, what I’m going to want to do is head to our ‘account’ tab, then I’ll select from the first available option called ‘sign the user up’. Within this workflow step, we’ll just need to match the data fields in our database with the relevant input fields stored on our popup form.
When it comes to actually registering a user’s account in our database, I would just like to open up our data tab and quickly zoom in so I can show you that by default, Bubble will automatically add a user data type to any application that you create.
Within this data type, it’s already going to have a prebuilt field which is the email field – so you won’t need to add that within your database. It is also going to automatically store a password field by default, but you just won’t be able to see that within plain text.
This means that the only additional field you’ll need to create in your database is a field for the user’s name. I’m going to add another data field called ‘name’, and this will just be a standard text field type because I just want to store a user’s name in our database. I will create that.
If I jump back into our workflow tab here, what I can do is now register the relevant input fields on our page with the relevant data fields in our database. So for every user account that’s created, I want the email field in our database to match this same value as the input email field on our popup. Then, for the password, I’d like the password field in our database to be the value of our ‘input password’ on our popup. Now, that’s all we’ll need to add when it comes to registering a user’s email and password credentials.
While registering a new user’s account, what I also love about Bubble is that it gives you the ability to store any additional fields you’d like within your database. In our application today, I’d also like to register the name of the user creating an account.
To do this, I’ll select to register another field within my workflow step. The field will be the ‘name’ data field in my database, and I’d like this to equal the value of my ‘input name’ on my page.
By all means, if at this point, you’d like to register any additional information for a user in the registration process, you just need to add as many different fields as you would like to match the fields you have stored in your database.
At this point, this is actually all you’ll need to add within this step of our workflow.
What I would like to do within this workflow though is just add one additional step. As it stands right now, if a user was in our application and just registered a new account, that workflow would run and our database would update successfully by creating a new account for them. Unfortunately, though, nothing would actually change on the interface of our page.
The experience I’d like to create would actually redirect a user through to a dedicated settings page once they’ve registered an account. On this settings page, it would allow them to update any additional information for their profile.
Over in my application, I’ve gone ahead and created a new page called ‘settings’. As you can see, this is just a generic page that stores some additional information like a user’s profile photo or address.
And so what I’d like to do is add an additional step to my original workflow. So if I jump back to my home page and open up my workflow editor, I’ll select the existing workflow we had just created.
Within this workflow, I can add an additional step after a user has successfully registered a new account. For this step, I’d like to select from a ‘navigation’ event. The specific action I’d like to choose will be the ‘go to page’ function. The page I’ll be sending the user through to will be our settings page that I’ve just created.
At this point in time, won’t need to worry about sending any data through to that page. But that is all we’ll need to do when it comes to actually building out the workflow to register a new user account.
Before we take a preview of our application, I’d like to open our home page once again. At this point in time, you’ll now notice that the popup element is no longer visible.
The way popups function in Bubble is that they’re hidden by default. They’ll only be displayed when they’re given an action through a workflow.
What we’re going to do is just double-click our ‘sign-up’ button within our header menu. We’ll then choose to start a workflow every single time our button is clicked. Within this workflow, what I’d like to do is show our popup element.
If we scroll on down to the ‘element actions’ events here, you’ll see the very first option allows us to show an element. The element I’d like to show is, of course, our popup. Now if I was to preview the application for our home page, what you’ll see is that if I select the sign-up button, that workflow will now run and it will display our registration popup.
In order to close a popup, however, you’ll also need to create another workflow, but we’ll get to that in a moment. The reason I’m mentioning this is because we’re now going to need to create a separate popup on our page that allows a user to log in to their account, not register a new one.
3. Building the workflow to log in an existing user
If I open my design tab, I’m going to make a copy of the existing pop we’ve already created to register a new user’s account.
After creating a duplicate of this popup, I’d like to update the name of this element to be called ‘popup log in’. This will allow me to clearly differentiate between the two popups we now have on this page.
On our new popup, I’m just going to need to make a few changes to the input fields that are displayed. For our title, I’m going to update this text to display, “Log in to an account”. Now, when a user logs into an existing account, they’ll only be required to use both their email and password, so we won’t need to register their name. This means that we can actually delete the name heading and the field from our overall popup. I’m then going to select the rest of our fields and move these up on our popup.
The last element I’ll need to update is the button on our popup. I’m going to change the text to display the word “login”.
From here, we’ll now need to create a separate workflow that runs every single time our ‘login’ button is clicked, To do this, I’m going to choose to start a workflow whenever this button is clicked. Within this workflow, I’m going to once again select from our account option, only this time, instead of signing the user up, I’m just going to choose to log the user in.
When it comes to building out this workflow, we’ll only need to reference the user’s existing email address and password. This means I’ll be required to match the relevant input fields on our page with the fields within this workflow step.
Within this workflow, the last step I’ll need to add is just a way to automatically close this popup by default once a user clicks the ‘log-in’ button. This will allow them to return to the home page they were previously viewing.
When it comes to manually closing this popup, I’ll just need to add an additional step within my workflow. For this step, I’ll select from the ‘element actions’ tab, then choose the ‘hide an element’ option. Now, of course, the element I’d like to hide will be our newly created popup.
After building out this workflow, there’s one last feature I’d like to cover within this guide, and that’s how we can create an experience that allows a user to switch between both of the popups in our application. So let’s say a user clicks the ‘sign-up’ button, but they then realize that they’ve already previously created an account before. What I’d like to do is display some text at the bottom of our popup that would display the appropriate popup when clicked.
In order to create this experience, I’m going to add a text element to our popup here. And for our registration popup, I’m just going to display the text, “Already have an account? Login”.
Now, if a user determines that they would like to log in to an existing account, we’re going to need to create a workflow to not only hide this popup, but then show our login popup. So I’m going to start a workflow every single time this text is clicked here. Within this workflow, the first thing I’ll need to do is hide the registration popup that they’re currently viewing.
We’ll select from our element actions and choose to hide an element. The element in this case will be our ‘popup sign-up’. From here, I’ll then need to add an additional step that displays our ‘login popup’.
Now, I’ll just need to replicate the exact same experience across our second popup element.
If I open our ‘login popup’, I’m going to add a text element at the bottom of our group. This text element will display the words, “Don’t have an account, sign-up here”.
From here, I’ll then create a workflow every single time this text element is clicked. Within this workflow, I’ll once again select from our ‘element actions’ tab. The first thing I’d like to do is hide our existing ‘login popup’, the display our ‘registration popup’.
After creating a way to hide and display our relevant popups, we’ve now completed the process of building out a custom user registration and login feature.