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.
Prerequisites
- 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
Build the signup form on your registration page
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.
Create the signup workflow with validation
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.
Build the login form and workflow
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.
Protect the dashboard page from unauthenticated access
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.
Add a logout button
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.
Add a toggle between signup and login forms
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 working example
1USER REGISTRATION & LOGIN SYSTEM2==================================34Page Elements (login/signup page):5 Input Email (content format: Email)6 Input Password (content format: Password)7 Input Confirm Password (signup only, content format: Password)8 Input First Name (optional, signup only)9 Input Last Name (optional, signup only)10 Button Sign Up / Button Log In11 Text Error Message (not visible on page load)12 Text Toggle Link (switch between forms)1314Custom State:15 Page → auth_mode (text, default: 'login')1617Signup Workflow:18 Trigger: Button Sign Up is clicked19 Only when: Input Password's value = Input Confirm Password's value20 Action 1: Sign the user up21 Email: Input Email's value22 Password: Input Password's value23 first_name: Input First Name's value24 last_name: Input Last Name's value25 Action 2: Go to page dashboard2627Signup Error (password mismatch):28 Trigger: Button Sign Up clicked29 Only when: passwords do NOT match30 Action: Show Text Error = 'Passwords do not match'3132Signup Error (duplicate email):33 Trigger: An element has an error (Sign Up button)34 Action: Show Text Error = 'An account with this email already exists'3536Login Workflow:37 Trigger: Button Log In is clicked38 Action 1: Log the user in39 Email: Input Email's value40 Password: Input Password's value41 Action 2: Go to page dashboard4243Login Error:44 Trigger: An element has an error (Log In button)45 Action: Show Text Error = 'Invalid email or password'4647Page Protection:48 Dashboard - Page is loaded:49 Only when: Current User is logged out50 → Go to page login51 Login - Page is loaded:52 Only when: Current User is logged in53 → Go to page dashboard5455Logout Workflow:56 Trigger: Button Log Out clicked57 Action 1: Log the user out58 Action 2: Go to page loginCommon mistakes when setting up user registration and login in Bubble.io: Step-by-Step Guide
Why it's a problem: Not adding password confirmation on the signup form
How to avoid: Add a 'Confirm Password' input and check that both values match before running the Sign the user up action.
Why it's a problem: Forgetting to add page protection on every authenticated page
How to avoid: Add a 'Page is loaded' workflow with 'Current User is logged out → Go to login page' on every page that requires authentication.
Why it's a problem: Not handling the signup error for duplicate emails
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
How do I set up user registration and login in Bubble.io? I need a signup form with email, password, and password confirmation, a login form with error handling, page protection for authenticated routes, and a logout button. Please give step-by-step visual editor instructions.
Build a complete auth system. Create a login/signup page with email and password inputs, a Sign Up workflow with password confirmation validation, a Log In workflow with error handling, page protection on the dashboard using 'Page is loaded' redirects, and a logout button in the navbar.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation