# How to create user profiles 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

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
USER DATA TYPE ADDITIONS:
- display_name (text)
- bio (text)
- avatar (image)
- location (text)
- website (text)
- twitter_handle (text)
- is_profile_public (yes/no, default: yes)

PRIVACY RULES:
- Rule 1: This User is Current User → View all fields, Modify via API
- Rule 2: This User's is_profile_public is yes → View display_name, bio, avatar, location, website

PAGES:
1. profile (Type: User) — public profile display + edit button for own profile
2. members — public user directory with search

WORKFLOWS:
1. Edit Profile → Make changes to Current User: all profile fields from inputs
2. Upload Avatar → File Uploader value → Make changes to Current User: avatar
3. Toggle Public → Make changes to Current User: is_profile_public = toggle value
```

## Common mistakes

- **Exposing email addresses on public profiles** — Email addresses are private data. Showing them publicly invites spam and privacy complaints. Fix: Never include email in public Privacy Rules. Only show email to the profile owner.
- **Not setting Initial content on edit form inputs** — Users see empty inputs and think their data was lost, or they accidentally overwrite fields with empty values. Fix: Set Initial content on every edit input to the corresponding User field value.
- **Allowing display_name to be empty** — Empty display names look broken in member directories and profile pages. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-user-profiles-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-user-profiles-in-bubble