Quickstarters
How to Build a Backend for Blazor?

38min
Introduction
In this tutorial, you’ll learn how to build a complete backend for a Blazor application using Back4app. 
We’ll walk through integrating essential Back4app features - such as database management, Cloud Code Functions, REST and GraphQL APIs, user authentication, and real-time queries (Live Queries) - to create a secure, scalable, and robust backend that seamlessly communicates with your Blazor frontend.
Leveraging Back4app’s robust backend services with Blazor, an ASP.NET Core framework for building interactive web UIs using C#, enables developers to accelerate backend development. 
Whether you're building a Blazor Server app or a Blazor WebAssembly app, the seamless integration with Back4app can drastically reduce development time while ensuring high quality server-side business logic.
By the end of this tutorial, you'll have built a secure backend structure tailored for a full stack web application using Blazor. 
You will gain insights on how to handle data operations, apply security controls, and implement cloud functions, making your Blazor web application robust and scalable.
Prerequisites
To complete this tutorial, you will need:
A Back4app account and a new Back4app project
Getting Started with Back4app.
If you do not have an account, you can create one for free. Follow the guide above to get your project ready.
Basic Blazor development environment
You can set this up by installing the latest .NET SDK from Microsoft and creating a new Blazor project using templates like dotnet new blazorserver or dotnet new blazorwasm.
.NET SDK (version 6 or above) installed
Ensure you have the .NET SDK for building and running Blazor apps.
Familiarity with C# and Blazor concepts
Blazor Official Documentation.
If you’re new to Blazor, review the official docs or a beginner’s tutorial before starting.
Ensure you have these prerequisites before starting to ensure a smooth tutorial experience.
Step 1 – Setting Up Back4app Project
Create a New Project
The first step in building your Blazor backend on Back4app is creating a new project. If you have not already created one, follow these steps:
Log in to your Back4app account.
Click the “New App” button in your Back4app dashboard.
Give your app a name (e.g., “Blazor-Backend-Tutorial”).
﻿
This configuration ensures that whenever you use Parse in your Blazor application, it is pre-configured to connect to your specific Back4app instance.
By completing this step, you have established a secure connection between your Blazor frontend and the Back4app backend, paving the way to perform database operations, user management, and more.
Step 2 – Setting Up the Database
Saving and Querying Data
With your Back4app project set up and the Parse SDK integrated into your Blazor app, you can now start saving and retrieving data. The simplest way to create a record is to use the ParseObject class:
SomeDataService.cs
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
﻿
Alternatively, you can use Back4app’s REST API endpoints for operations.
Schema Design and Data Types
By default, Parse allows schema creation on the fly, but you can also define your classes and data types in the Back4app dashboard for more control.
Navigate to the “Database” section in your Back4app dashboard.
Create a new class (e.g., “Todo”) and add relevant columns, such as title (String) and isCompleted (Boolean).
Create New Class
﻿
When querying, include pointer data:
SomeDataService.cs (continuation)
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
﻿
Live Queries
For real-time updates in a Blazor Server app, consider using SignalR connection for Live Queries. Although the Parse .NET SDK supports Live Queries, integrating them directly within a Blazor application may require additional setup with SignalR for real-time communication.
Enable Live Queries in your Back4app dashboard under your app’s Server Settings. Make sure “Live Queries” is turned on.
Configure Live Query Client in .NET if needed. However, for Blazor apps, leveraging SignalR might be more idiomatic for server-side connections.
Due to the complexity of setting up Live Queries within Blazor and potential limitations of the Parse .NET SDK in Blazor WebAssembly, you may need to implement a server-side service that bridges Parse Live Queries with SignalR clients.
Step 3 – Applying Security with ACLs and CLPs
Back4app Security Mechanism
Back4app takes security seriously by providing Access Control Lists (ACLs) and Class-Level Permissions (CLPs). These features let you restrict who can read or write data on a per-object or per-class basis, ensuring only authorized users can modify your data.
﻿
Access Control Lists (ACLs)
An ACL is applied to individual objects to determine which users, roles, or the public can perform read/write operations. For example:
SomeDataService.cs (ACL example)
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
﻿
When you save the object, it has an ACL that prevents anyone but the specified user from reading or modifying it.
Class-Level Permissions (CLPs)
CLPs govern an entire class’s default permissions, such as whether the class is publicly readable or writable, or if only certain roles can access it.
Go to your Back4app Dashboard, select your app, and open the Database section.
Select a class (e.g., “Todo”).
Open the Class-Level Permissions tab.
Configure your defaults, such as “Requires Authentication” for read or write, or “No Access” for the public.
These permissions set the baseline, while ACLs fine-tune permissions for individual objects. A robust security model typically combines both CLPs (broad restrictions) and ACLs (fine-grained per-object restrictions). For more information go to App Security Guidelines.﻿
Step 4 – Writing and Deploying Cloud Functions
Cloud Code is a feature of the Parse Server environment that allows you to run custom JavaScript code on the server side - without needing to manage your servers or infrastructure. 
By writing Cloud Code, you can extend your Back4app backend with additional business logic, validations, triggers, and integrations that run securely and efficiently on the Parse Server.
How It Works
When you write Cloud Code, you typically place your JavaScript functions, triggers, and any required NPM modules in a main.js (or app.js) file. 
This file is then deployed to your Back4app project, which is executed within the Parse Server environment. 
Since these functions and triggers run on the server, you can trust them to handle confidential logic, process sensitive data, or make backend-only API calls - processes you might not want to expose directly to the client.
All Cloud Code for your Back4app app runs inside the Parse Server that is managed by Back4app, so you don’t have to worry about server maintenance, scaling, or provisioning. 
Whenever you update and deploy your main.js file, the running Parse Server is updated with your latest code.
main.js File Structure
A typical main.js might contain:
Require statements for any needed modules (NPM packages, built-in Node modules, or other cloud code files).
Cloud function definitions using Parse.Cloud.define().
Triggers such as Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), etc.
NPM modules you installed (if needed).
main.js
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
With the ability to install and use NPM modules, Cloud Code becomes incredibly flexible, allowing you to integrate with external APIs, perform data transformations, or execute complex server-side logic.
Typical Use Cases
Business Logic: For example, aggregate data for analytics or perform calculations before saving to the database.
Data Validations: Ensure certain fields are present or that a user has correct permissions before saving or deleting a record.
Triggers: Perform actions when data changes (e.g., send a notification when a user updates their profile).
Integrations: Connect with third-party APIs or services.
Security Enforcement: Validate and sanitize inputs to enforce security before performing sensitive operations.
Deploy Your Function
Below is a simple Cloud Code function that calculates the length of a text string sent from the client:
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Deploying via the Back4app CLI:
1 - Install the CLI:
For Linux/MacOS:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
For Windows:
Download the b4a.exe file from the releases page.
2 - Configure your account key:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Deploy your cloud code:
Bash
b4a deploy
b4a deploy
﻿
Deploying through the Dashboard:
In your app’s dashboard, go to Cloud Code > Functions.
Copy/paste the function into the main.js editor.
Click Deploy.
Calling Your Function
From Blazor using the Parse .NET SDK:
SomeDataService.cs (calling function)
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
﻿
You can also call it via REST or GraphQL as shown in the ReactJS tutorial.
Step 5 – Configuring User Authentication
User Authentication in Back4app
Back4app leverages the Parse User class as the foundation for authentication. By default, Parse handles password hashing, session tokens, and secure storage. This means you don’t have to set up complex security flows manually.
Setting Up User Authentication
In a Blazor application, you can create a new user with:
AuthService.cs
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
﻿
Session Management
After a successful login, Parse creates a session token that is stored in the user object. In your Blazor app, you can access the currently logged-in user:
SomeComponent.razor.cs
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
﻿
Parse automatically handles token-based sessions in the background, but you can also manually manage or revoke them. For logging out:
AuthService.cs (logout)
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
﻿
Social Login Integration
Back4app and Parse can integrate with popular OAuth providers, such as Google or Facebook. 
Configuration may vary and often involves server-side setup or additional packages. Refer to the Social Login Docs for detailed instructions.
Since Blazor Server apps run on ASP.NET Core, you might integrate social login using ASP.NET Core Identity providers alongside Parse for seamless authentication.
Email Verification and Password Reset
To enable email verification and password reset:
Navigate to the Email Settings in your Back4app dashboard.
Enable email verification to ensure new users verify ownership of their email addresses.
Configure the From address, email templates, and your custom domain if desired.
These features improve account security and user experience by validating user ownership of emails and providing a secure password-recovery method.
Step 6 – Handling File Storage
Uploading and Retrieving Files
Parse includes the ParseFile class for handling file uploads, which Back4app stores securely:
FileService.cs
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
﻿
To attach the file to an object:
FileService.cs (continued)
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
﻿
Retrieving the file URL:
SomeComponent.razor.cs
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
﻿
You can display this imageUrl in your Blazor components by setting it as the source of an <img> tag.
File Security
Parse Server provides flexible configurations to manage file upload security. Use ACLs on ParseFiles or set server-level configurations as needed.
Step 7 – Scheduling Tasks with Cloud Jobs
Cloud Jobs
Cloud Jobs in Back4app let you schedule and run routine tasks on your backend - like cleaning up old data or sending a daily summary email. A typical Cloud Job might look like this:
main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Deploy your Cloud Code with the new job (via CLI or the dashboard).
Go to the Back4app Dashboard > App Settings > Server Settings > Background Jobs.
Schedule the job to run daily or at whatever interval suits your needs.
﻿
Cloud Jobs enable you to automate background maintenance or other periodic processes without requiring manual intervention.
Step 8 – Integrating Webhooks
Webhooks allow your Back4app app to send HTTP requests to an external service whenever certain events occur. 
This is powerful for integrating with third-party systems like payment gateways, email marketing tools, or analytics platforms.
Navigate to the Webhooks configuration in your Back4app dashboard > More > WebHooks and then click on Add Webhook.
Set up an endpoint (e.g., https://your-external-service.com/webhook-endpoint).
Configure triggers to specify which events in your Back4app classes or Cloud Code functions will fire the webhook.
For instance, if you want to notify a Slack channel whenever a new Todo is created:
Create a Slack App that accepts incoming webhooks.
Copy the Slack webhook URL.
In your Back4app dashboard, set the endpoint to that Slack URL for the event “New record in the Todo class.”
You can also add custom HTTP headers or payloads if needed.
You can also define Webhooks in Cloud Code by making custom HTTP requests in triggers like beforeSave, afterSave.
Step 9 – Exploring the Back4app Admin Panel
The Back4app Admin App is a web-based management interface designed for non-technical users to perform CRUD operations and handle routine data tasks without writing any code. 
It provides a model-centric, user-friendly interface that streamlines database administration, custom data management, and enterprise-level operations.
Enabling the Admin App
Enable it by going to App Dashboard > More > Admin App and clicking on the “Enable Admin App” button.
Create a First Admin User (username/password), which automatically generates a new role (B4aAdminUser) and classes (B4aSetting, B4aMenuItem, and B4aCustomField) in your app’s schema.
Choose a Subdomain for accessing the admin interface and complete the setup.
Log In using the admin credentials you created to access your new Admin App dashboard.
Once enabled, the Back4app Admin App makes it easy to view, edit, or remove records from your database without requiring direct use of the Parse Dashboard or backend code.
Conclusion
By following this comprehensive tutorial, you have:
Created a secure backend for a Blazor app on Back4app.
Configured a database with class schemas, data types, and relationships.
Integrated real-time queries where applicable for immediate data updates.
Applied security measures using ACLs and CLPs to protect and manage data access.
Implemented Cloud Code functions to run custom business logic on the server side.
Set up user authentication with support for email verification and password resets.
Managed file uploads and retrieval, with optional file security controls.
Scheduled Cloud Jobs for automated background tasks.
Used Webhooks to integrate with external services.
Explored the Back4app Admin Panel for data management.
With a solid Blazor frontend and a robust Back4app backend, you are now well-equipped to develop feature-rich, scalable, and secure web applications. 
Continue exploring more advanced functionalities, integrate your business logic, and harness the power of Back4app to save you countless hours in server and database administration. Happy coding!
Next Steps
Build a production-ready Blazor app by extending this backend to handle more complex data models, caching strategies, and performance optimizations.
Integrate advanced features such as specialized authentication flows, role-based access control, or external APIs.
Check out Back4app’s official documentation for deeper dives into advanced security, performance tuning, and logs analysis.
Explore other tutorials on real-time chat applications, IoT dashboards, or location-based services. Combine the techniques learned here with third-party APIs to create complex, real-world applications.
﻿
Updated 17 Jan 2025
Did this page help you?
Back4app Tutorials
How to Build a Backend for htmx?