Build user profiles in Bubble by extending the built-in User data type with custom fields like bio, avatar, location, and social links. Create a profile page that displays user data dynamically and an edit mode that lets users update their information. Use Privacy Rules to control which profile fields are public versus private.
Create User Profiles in Bubble
This tutorial shows you how to build editable user profiles with custom fields, avatars, and public/private visibility controls. User profiles are essential for social apps, marketplaces, and community platforms.
Prerequisites
- A Bubble account with user authentication
- Basic understanding of Data Types and the User type
- Familiarity with file uploads and conditional visibility
Step-by-step guide
Extend the User Data Type
Extend the User Data Type
Go to Data tab → User. Add fields: display_name (text), bio (text), avatar (image), location (text), website (text), twitter_handle (text), is_profile_public (yes/no, default yes). These fields extend Bubble's built-in User type which already has email and password.
Expected result: User data type has profile-specific fields.
Build the Profile Display Page
Build the Profile Display Page
Create a 'profile' page with Type of content = User. Display: avatar in a circular Image element, display_name as heading, bio as paragraph, location with a map pin icon, website as a link, and social handles. Add conditional text: when the profile user is Current User, show an 'Edit Profile' button.
Pro tip: Use the page's Type of content for clean URLs: yourapp.com/profile/user-slug. Set slugs on users during registration.
Expected result: A public-facing profile page showing user information.
Create the Edit Profile Form
Create the Edit Profile Form
Add a popup or separate section for editing. Pre-fill inputs with current values using 'Initial content' = Current Page User's [field]. Add a File Uploader for avatar changes. Include a 'Save' button with workflow: Make changes to Current User → update each field from input values. If avatar was changed, update the avatar field. Reset inputs and close the popup after saving.
Expected result: Users can edit their profile information and save changes.
Add Public/Private Profile Toggle
Add Public/Private Profile Toggle
Add a checkbox or toggle for 'Make profile public'. When unchecked, set is_profile_public to no. Create Privacy Rules on User: for the public profile fields, add a rule 'When This User's is_profile_public is yes' with permission to View bio, avatar, location. Email and sensitive fields should only be viewable by the user themselves.
Expected result: Users control whether their profile is publicly visible.
Build Profile Discovery
Build Profile Discovery
Create a 'members' or 'directory' page with a Repeating Group of Users where is_profile_public is yes. Show avatar, display_name, and bio preview. Add a search input that filters by display_name. Each card links to the user's profile page.
Expected result: A member directory showing public profiles with search functionality.
Complete working example
1USER DATA TYPE ADDITIONS:2- display_name (text)3- bio (text)4- avatar (image)5- location (text)6- website (text)7- twitter_handle (text)8- is_profile_public (yes/no, default: yes)910PRIVACY RULES:11- Rule 1: This User is Current User → View all fields, Modify via API12- Rule 2: This User's is_profile_public is yes → View display_name, bio, avatar, location, website1314PAGES:151. profile (Type: User) — public profile display + edit button for own profile162. members — public user directory with search1718WORKFLOWS:191. Edit Profile → Make changes to Current User: all profile fields from inputs202. Upload Avatar → File Uploader value → Make changes to Current User: avatar213. Toggle Public → Make changes to Current User: is_profile_public = toggle valueCommon mistakes when creating user profiles in Bubble.io: Step-by-Step Guide
Why it's a problem: Exposing email addresses on public profiles
How to avoid: Never include email in public Privacy Rules. Only show email to the profile owner.
Why it's a problem: Not setting Initial content on edit form inputs
How to avoid: Set Initial content on every edit input to the corresponding User field value.
Why it's a problem: Allowing display_name to be empty
How to avoid: Add validation: only save if display_name input is not empty. Set a default display_name from email during registration.
Best practices
- Set default display_name during registration so profiles are never blank.
- Use circular Image elements for avatars with a fallback placeholder image.
- Pre-fill all edit form inputs with current values.
- Separate public and private profile data through Privacy Rules.
- Add a 'profile completeness' indicator to encourage users to fill out their profiles.
- Compress and resize avatar images to avoid slow page loads.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building user profiles in Bubble.io. I need display name, bio, avatar upload, location, social links, public/private toggle, and a member directory. How do I extend the User data type, build the profile page, edit form, and privacy rules?
Add profile fields to User (display_name, bio, avatar, location, website, is_profile_public). Build a profile display page, edit profile popup with file upload for avatar, and a public member directory.
Frequently asked questions
Should I create a separate Profile data type or extend User?
For most apps, extending User is simpler and sufficient. Create a separate Profile type only if you need multiple profiles per user (e.g., business + personal) or if the profile data is very large.
How do I add a profile URL slug?
Use the 'Set a thing's slug' action during registration. Set the slug to a sanitized version of the display_name or username.
Can users delete their profile?
You can implement account deletion by deleting the User record and all associated data. This is increasingly required by privacy regulations (GDPR, CCPA).
How do I show profile completeness?
Count how many profile fields are filled and divide by total fields. Display as a percentage or progress bar. Show prompts for incomplete fields.
Can I let users customize their profile page layout?
Basic customization (colors, cover image) is feasible. Full layout customization would require a complex builder. For advanced profile customization, RapidDev can build custom solutions.
How do I handle inappropriate profile content?
Add a reporting mechanism and admin moderation. Check uploaded images and text against content policies. Consider using an AI content moderation API via the API Connector.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation