Create an Account for New Users in Your Bubble.io No Code Web App

Simplify Onboarding Process for Your New Users!

There are use cases where you’ll need to create a User account for someone else in your Bubble.io no code web app. For instance, as part of the User onboarding process you may need them to answer pre-screening questions before their account can be approved and created. Or you may have a business to business (“B2B”) type of account where the Users are Employees and accounts need to be setup on their behalf. You get get the idea.

Bubble.io provides all the capabilities you need to create a User account on behalf of someone else, including a temporary password. And you can create a Workflow to force the User to change their temporary password before they can login. These are very powerful capabilities you can implement in your Bubble.io no code web app. Let’s see the high-level overview on how this is implemented

NOTE: At the bottom of this post you’ll find the link to the how-to video as well as information on how to get FREE access to the Bubble.io design.

Workflow to Create a User Account for Someone Else in Your Bubble.io No Code Web App

The first Step in the Workflow is to create a new account for someone else. The “Email” field is required as Bubble.io uses an email address as a User’s login Username. As an example you’ll also see this Step has a field to capture the User’s “Firstname”. For your implementation you may want to capture more information on the User such as their last name and mobile phone number. Additionally, for a B2B type of app you may also want to capture what type of role the User has, ie Engineering, Accounting, Sales, etc. Just make sure you have your Data Structure setup correctly.

Create User Account

Next is Step 2 where you assign a temporary password to the User that was created in Step 1. Note you need to create an Account first (Step 1) before you can assign a temporary password to it.

Assign Password to New User

Now that you have created a User and a temporary password you can simply email the user with a link to your Bubble.io no code wed app and include important information such as their Username (their email) and temporary password. In the “Send email” Step below is an example of what the email Body content may look like (your content will look different to meet your needs). Note the Username is an Input Element with an email value and the password is a result of the temporary password created in Step 2.

For your Bubble.io web app you may have more information but the “Send email” Step will still be used. Additionally there’s a sentence telling the User to click a link for logging in. In this example the link is for the Index page

Example of Email Body

Those are the three Steps needed to Create a User with a temporary password and then email them with information on how to login. Now let us take a look at the login page.

Login Page Example

Once the User clicks on the link from the email the page you have designated (“Index” page in this example) will open with a login prompt.

Login Prompt Example

Once the “Login” Button Element is pressed a Workflow will start with the first Step to Log the user in. At this point the User is logged into your Bubble.io web app. However you need to a way to force the User to set a new password if this is their first time logging in.

NOTE: This example is forcing users to change their temporary password on their first login. You may not require this in your design. If not simply don’t implement Step 3.

Logging-in the User

To set a new password there needs to be a Step to see if the User has logged in before. In the image below for Step 3 you see “Current User’s First login is “yes”” which looks at the Bubble.io database for that User’s “First login” value. If the value is “yes” then a Popup will “Show” (open).

Verify User’s First Time Logging-in

In the database is a Data Field called “First login” (“yes/no” field type) with a default value of “yes”. This means whenever a User is created in your Bubble.io web app the value “yes” will be assigned automatically to “First login” (a nice data initialization feature from Bubble.io)

Data Field “First login” with Initial Value of “yes”

Since the “First login” value is “yes” a Popup opens requesting the User to set a new password.

Set New Password Example

When the User enters their existing password and a new password they will press the “Enter” Button which starts a Workflow to Update the user’s credentials. The credential in this instance being “Password” (see checked box below) though you would use this Step for changing a User’s email (username) too.

Now that the User’s Password has been updated you need to change to the User. Reason being – since the temporary password has been replaced with a new password the “First login” field in the database for the user needs to be changed to “no” (from “yes”)

Making “First login” Equal “no”

Now the next time the User logs in they will not be greeted with a Popup asking them to change their password.

Summary

As you can see creating a new User on behalf of other people, assigning a temporary password and emailing them a link to login is fairly straightforward to implement in your Bubble.io no code web app. While this was a basic overview of the design you can develop a more elaborate onboarding process for your particular needs.

Check Out The How To Video!

For an even more detailed overview on how to create new Users in your Bubble.io no code web app, check out the video below. Also scroll down and see how to get FREE access to the Bubble.io design

FREE ACCESS to this Bubble.io design when you join our email list!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s