# How to set up user registration and login in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Set up user registration and login in Bubble using the built-in Sign the user up and Log the user in workflow actions. Create a signup page with email and password inputs, add validation and error handling, build a login page with remember-me functionality, and redirect authenticated users to the dashboard while protecting pages from unauthenticated access.

## Setting Up User Registration and Login in Bubble

User authentication is the foundation of most apps. Bubble includes built-in signup and login functionality — no plugins or external services needed. This tutorial walks you through building complete registration and login forms, handling errors gracefully, protecting pages from unauthenticated access, and adding logout functionality. By the end, you will have a working auth system ready for your app.

## Before you start

- A Bubble account with an app open in the editor
- At least two pages: a login/signup page and a dashboard page
- Basic familiarity with Bubble elements and workflows

## Step-by-step guide

### 1. Build the signup form on your registration page

On your signup page, add these elements: an Input element for email (set Content format to Email), an Input element for password (set Content format to Password), an Input element for password confirmation (set Content format to Password), and a Button labeled 'Sign Up.' Optionally add Input fields for first name and last name. Group all elements in a Column container and center it on the page for a clean layout.

**Expected result:** A signup form with email, password, confirmation, and optional name fields is displayed on the page.

### 2. Create the signup workflow with validation

In the Workflow tab, create: When Button Sign Up is clicked. Add an 'Only when' condition: Input Password's value is Input Confirm Password's value (to ensure passwords match). First action: 'Account → Sign the user up.' Set Email to Input Email's value and Password to Input Password's value. If you added name fields, click 'Change another field' to set first_name and last_name. Second action: 'Navigation → Go to page dashboard.' For error handling, add a second workflow: When Button Sign Up is clicked AND passwords do NOT match → Show alert 'Passwords do not match.'

> Pro tip: Bubble automatically handles duplicate email checks. If a user tries to sign up with an existing email, the workflow stops and triggers the element error event. Add an 'An element has an error' workflow on the Sign Up button to display a friendly error message.

**Expected result:** Clicking Sign Up creates a new user account and redirects to the dashboard. Password mismatch shows an error.

### 3. Build the login form and workflow

On your login page (or the same page with a toggle), add: an Input for email (Content format: Email), an Input for password (Content format: Password), and a Button labeled 'Log In.' Create a workflow: When Button Log In is clicked → Account → Log the user in (Email = Input Email's value, Password = Input Password's value). Next action: Go to page dashboard. For failed login attempts, add an 'An element has an error' workflow on the Log In button: display a Text element with 'Invalid email or password' in red.

**Expected result:** Users can log in with valid credentials and are redirected to the dashboard. Invalid credentials show an error message.

### 4. Protect the dashboard page from unauthenticated access

On your dashboard page, create a 'Page is loaded' workflow with the condition: 'Only when Current User is logged out.' The action: Navigation → Go to page login. This redirects any user who tries to access the dashboard without being logged in. Apply this pattern to every page that requires authentication. On the login page, add the reverse: 'Page is loaded, Only when Current User is logged in → Go to page dashboard' to prevent already-logged-in users from seeing the login form.

**Expected result:** Unauthenticated users are redirected to login. Already-authenticated users skip the login page and go directly to the dashboard.

### 5. Add a logout button

On your dashboard page (or in a reusable NavBar element), add a Button or Link labeled 'Log Out.' Create a workflow: When Button Log Out is clicked → Account → Log the user out. Next action: Navigation → Go to page login (or index). This ends the user's session and redirects them to the login page.

**Expected result:** Clicking Log Out ends the session and sends the user back to the login page.

### 6. Add a toggle between signup and login forms

Instead of using separate pages, you can show both forms on one page using a custom state. Add a custom state on the page called 'auth_mode' (text, default: 'login'). Wrap the login form in a Group visible when auth_mode is 'login' and the signup form in a Group visible when auth_mode is 'signup.' Add a text link below each form: 'Don't have an account? Sign up' (sets auth_mode to 'signup') and 'Already have an account? Log in' (sets auth_mode to 'login').

**Expected result:** Users can switch between login and signup forms on the same page without a full page reload.

## Complete code example

File: `Workflow summary`

```text
USER REGISTRATION & LOGIN SYSTEM
==================================

Page Elements (login/signup page):
  Input Email (content format: Email)
  Input Password (content format: Password)
  Input Confirm Password (signup only, content format: Password)
  Input First Name (optional, signup only)
  Input Last Name (optional, signup only)
  Button Sign Up / Button Log In
  Text Error Message (not visible on page load)
  Text Toggle Link (switch between forms)

Custom State:
  Page → auth_mode (text, default: 'login')

Signup Workflow:
  Trigger: Button Sign Up is clicked
  Only when: Input Password's value = Input Confirm Password's value
  Action 1: Sign the user up
    Email: Input Email's value
    Password: Input Password's value
    first_name: Input First Name's value
    last_name: Input Last Name's value
  Action 2: Go to page dashboard

Signup Error (password mismatch):
  Trigger: Button Sign Up clicked
  Only when: passwords do NOT match
  Action: Show Text Error = 'Passwords do not match'

Signup Error (duplicate email):
  Trigger: An element has an error (Sign Up button)
  Action: Show Text Error = 'An account with this email already exists'

Login Workflow:
  Trigger: Button Log In is clicked
  Action 1: Log the user in
    Email: Input Email's value
    Password: Input Password's value
  Action 2: Go to page dashboard

Login Error:
  Trigger: An element has an error (Log In button)
  Action: Show Text Error = 'Invalid email or password'

Page Protection:
  Dashboard - Page is loaded:
    Only when: Current User is logged out
    → Go to page login
  Login - Page is loaded:
    Only when: Current User is logged in
    → Go to page dashboard

Logout Workflow:
  Trigger: Button Log Out clicked
  Action 1: Log the user out
  Action 2: Go to page login
```

## Common mistakes

- **Not adding password confirmation on the signup form** — Users can accidentally mistype their password and be locked out of their account with no way to know what they entered. Fix: Add a 'Confirm Password' input and check that both values match before running the Sign the user up action.
- **Forgetting to add page protection on every authenticated page** — Users can type the page URL directly in the browser and access protected content without logging in. Fix: Add a 'Page is loaded' workflow with 'Current User is logged out → Go to login page' on every page that requires authentication.
- **Not handling the signup error for duplicate emails** — If a user signs up with an existing email, the workflow silently fails and the user sees no feedback. Fix: Add an 'An element has an error' workflow on the Sign Up button that shows a message like 'An account with this email already exists.'

## Best practices

- Use Bubble's built-in Sign the user up and Log the user in actions — no plugins needed for basic auth
- Always validate that password and confirmation match before creating the account
- Handle auth errors gracefully with visible error messages using the element error event
- Protect every authenticated page with a 'Page is loaded' redirect for logged-out users
- Redirect already-authenticated users away from login pages to avoid confusion
- Add a logout button in a reusable NavBar so it appears on every authenticated page
- Use Content format: Password on password inputs so the text is hidden as users type

## Frequently asked questions

### Does Bubble store passwords securely?

Yes. Bubble hashes passwords using bcrypt before storing them. Passwords are never stored in plain text and cannot be retrieved — only verified during login.

### Can I add social login (Google, Facebook) alongside email login?

Yes. Install the Google or Facebook OAuth plugin from the Plugin Marketplace. Add 'Login with Google' buttons that use the plugin's signup/login actions. Users can then choose either social or email authentication.

### How long does a Bubble user session last?

By default, Bubble sessions last until the user explicitly logs out or clears their browser cookies. There is no automatic session timeout. You can implement custom timeout logic using scheduled workflows.

### Can I require email verification before allowing login?

Yes. Add an 'email_verified' field (yes/no) to the User Data Type. After signup, send a verification email with a unique link. When the user clicks it, set email_verified to yes. On login, add an Only when condition: Current User's email_verified is yes.

### How do I add a 'Remember Me' checkbox?

Bubble sessions persist by default in the browser. The 'Log the user in' action has a 'Stay logged in' parameter. Set it to yes when a 'Remember Me' checkbox is checked, and no when unchecked.

### What if my auth system needs custom logic beyond basic signup/login?

For complex auth flows like multi-factor authentication, role-based permissions, or SSO integration, RapidDev can help design and implement the right architecture in Bubble.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-user-registration-and-login-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-user-registration-and-login-in-bubble