How To Setup Passwordless Authentication In Bubble.is

I won’t go into the “why” of passwordless authentication. ¹

Bubble has a built-in authentication system that only works with passwords. It does heavily leverage 3rd-party authentication (OAuth, Google, Facebook, etc) which has a similar UX to passwordless authentication, which can work instead of, or in addition to, this approach.

Here’s how to “hack” Bubble’s native password-based login system to provide a passwordless experience for your users.

The signup process is mostly unchanged, with the minor exception that you’re not going to collect a password from the user. You’re just going to toss a random number in there. You’re going to skip the normal log in process entirely. Any time a user wants to log in you’re going to send them one of Bubble’s built-in password reset emails, which return them to Bubble’s built-in password reset page. Bubble will create a new random temporary password and log them in. They’ll remain logged in for a while, but no longer than one month.

The following instructions assume a basic familiarity with Bubble’s interface.

1. start with a new, blank app
2. insert the default header into the index page
3. add a new page by cloning the index page; name it “profile”
4. open the header for editing
5. expand the elements tree; expand group B
6. copy and paste the login/signup group so that group B now has two identical groups under it
7. change the names of the two button groups to something meaningful
   1. I suggest “login/signup” and “logout/profile”
   2. change the names of the buttons themselves to reflect this
   3. I suggest that the button next to “log out” be set (using dynamic data) to the “current user’s email:extract alias”
8. Set visibility conditions
   1. under both button groups, uncheck the “this element is visible on page load” box so that the buttons default to invisible
   2. under both button groups, on the conditional tab, create a new condition
   3. set the condition to “current user is logged in” OR “current user is logged out”
   4. set the property to change to “this element is visible” and check the box so that the appropriate group will set itself back to visible. That way the user will see the correct buttons for their logged in/out status
9. open the header’s workflows for editing
   1. go ahead and create a workflow that navigates to the index page when the header’s logo is clicked (just one of those design best practices that Bubble’s default app ignores)
   2. add a workflow that logs the user out when button “log out” is clicked (also might as well navigate back to the index page)
   3. add a workflow that navigates to the user’s profile page when the button displaying their email is clicked
   4. you should see 5 workflows: button current user’s email is clicked, button log in is clicked, button log out is clicked, button sign up is clicked, logo is clicked
10. make sure that the header has “signup / login popup A” in its element tree. If it doesn’t, then insert that popup from the reusable elements
11. open reusable element signup / login popup for editing
    1. in the element tree, make group “signup” visible if it isn’t already
       1. all you need here is an email input and a “confirm email” button
       2. delete the email and email confirmation fields
       3. change the name of button “sign up” to “sign me up”
    2. under the element tree, make group “signup” invisible and make group “login” visible
       1. again, all you need here is an email input and a button
       2. delete the “password” input, the “remember me” checkbox, and the “forgot password” button
       3. change the name of button “log in” to “send me a login link”
    3. under the element tree, select group “reset password”
       1. select “delete” in popup reset password’s parameters
12. open the workflows for reusable element signup / login popup for editing
    1. workflow: button sign me up is clicked
       1. first action: sign the user up
          1. email should be input email’s value
          2. change password to “calculate formulat” and “generate random string” and just set it to like 100 characters with all boxes checked
          3. uncheck require password confirmation
          4. uncheck send an email to confirm the email
          5. change remember the email to yes
       2. next action: send password reset email
          1. email to reset should be input email’s value
          2. change the subject and body to something that makes sense
          3. leave an empty line under the body text so that the reset link isn’t jammed up against the body text
       3. next action: hide signup / login popup
       4. next action: go to page index
    2. workflow: button send me a login link is clicked
       1. delete the log the user in action
       2. first action: send password reset email
          1. change email to reset to “input email (log in)’s value”
          2. change the subject and body to something sensible and be sure to leave a couple empty lines after the text so that the link is on its own line in the email
       3. next action: hide signup / login popup
       4. next action: go to page index
    3. leave the workflows for “switch to login” and “switch to signup” alone
    4. now you should see four workflows: button confirm my email is clicked, button send me a login link is clicked, button switch to login is clicked, button switch to sign up is clicked
13. open the app’s Data for editing
    1. under tab data types, click on “user” (it should be the only data type anyway)
    2. create a new field and name it “trust_time” so that we can set an upper limit on the length of time a user can remain logged in
14. open page reset_pw for editing
    1. change text “reset your password” to “confirming email”
    2. delete the “password” and “re-type password” inputs
    3. change text “this page lets you reset your password” to “If you are not redirected automatically, please click this button.”
    4. change the name of button “CONFIRM” to “click me”
15. open page reset_pw’s workflows for editing
    1. under workflow “page is loaded” add constraint and when “is reset password token valid = yes”
       1. add first action: assign a temp password to a user with user = Current User
       2. next action: reset password with both password and confirmation set to “result of step 1”
       3. next action: make changes to current user. click change another field. enter trust_time = current date/time
       4. next action: go to page index
    2. build the same actions under button click me as a backup in case the automatic workflow doesn’t run
16. open page index’s workflows for editing
    1. add a new event, user is logged in
       1. and when [current user] [‘s trust_time] [+(months):] [type 1 and then click to the right of the box so 1 turns yellow] [<] [current date/time]
       2. so this takes the date/time stored in trust_time (back when the user’s credentials were reset), adds one month to it, and tests to see if that date is less than (older than) the current date/time. Or, in human-speak, it tests to see if the trust_time is more than one month ago
       3. create action log the user out
17. make up a test email and use Mailinator to try signing up.