Quickstarters
How to Build a Backend for React Native?

38min
Introduction
In this tutorial, you’ll learn how to build a backend for React Native using Back4App. 
We will focus on cross platform compatibility and illustrate how you can integrate essential Back4App features for data management, user authentication, and real time data. 
By leveraging REST and GraphQL APIs, you can develop your React Native project to run on both iOS and Android platforms, ensuring a seamless experience across native components and mobile applications.
Implementing secure user logins, scheduling tasks, and using real time applications will make your full stack developer journey easier. 
You will also see how Back4App’s environment can reduce the time needed to set up services including hosting, database, and security layers. 
By the end, you’ll have a robust backend structure that supports your React Native app and paves the way for building mobile solutions at scale.
After completing this guide, you’ll be ready to expand your app with advanced features, integrate third-party services, or turn your project into a production-ready platform. 
Let’s dive into modern mobile app development with Back4App and React Native!
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, sign up for free. Then, follow the guide to get your project ready.
Basic React Native development environment
You can use the React Native CLI Quickstart or Expo CLI. Ensure you have Node.js installed.
Node.js (version 14 or above) installed
You need Node.js for installing npm packages and running local development servers. Installing Node.js﻿
Familiarity with JavaScript and basic React Native concepts
React Native Official Docs.
If you’re new to React Native development, review the docs or a beginner’s tutorial first.
Make sure you have these prerequisites in place before you begin. Having your Back4App project created and your local React Native environment configured will ensure a smooth process.
Step 1 – Creating a New Project on Back4App and connecting
Create a New Project
The first step in building mobile backends for your React Native app is creating a new project on Back4App. 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., “ReactNative-Backend-Tutorial”).
﻿
Once the project is created, it will appear in your Back4App dashboard. You’ll use this new project to manage data and configure security for your React Native app.
Getting Your Application Keys
Unlike web-based React apps, React Native development often requires direct HTTP requests for data retrieval and manipulation. Since we are focusing on REST APIs (or GraphQL APIs) instead of the Parse SDK, you’ll still need your Back4App keys to send authenticated requests.
Retrieve your Parse Keys:
In the Back4App dashboard, open your app’s App Settings or Security & Keys section to find your Application ID, REST API Key, and GraphQL Endpoint (usually https://parseapi.back4app.com/graphql).
Note your REST API Key:
You will include it in your React Native fetch or axios headers to authenticate each request.
﻿
This step ensures your mobile applications can securely communicate with Back4App.
Step 2 – Setting Up the Database
Back4App provides a wide range of backend options for React Native apps, including robust data management capabilities. You can create classes, add fields, and define relationships via the dashboard. Whether you are building real time applications or simpler CRUD apps, the Back4App dashboard helps you store and organize data easily.
Creating a Data Model
Navigate to the “Database” section in your Back4App dashboard.
Create a new class (e.g., “Todo”) and add relevant columns like title (String) and isCompleted (Boolean).
Create New Class
﻿
Back4App supports various data types: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, and Polygon. You can also let Parse auto-create fields when you send new data.
Creating a Data Model with AI Agent
If you prefer, you can use the Back4App AI Agent:
Open the AI Agent from your App Dashboard.
Describe your data model in plain language (e.g., “Build a Todo class with a title and isCompleted fields.”).
Let the AI Agent create the schema for you.
﻿
This can save time during the early stages of your React Native project.
Reading and Writing Data using REST API
For typical React Native development, you can use the native fetch API or a third-party library like axios to handle REST APIs. Below is an example using cURL, which you can adapt for fetch:
POST (Create a Todo):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
GET (Fetch Todos):
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
In your React Native app, you can do the same with fetch:
JS
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Reading and Writing Data using GraphQL API
If you prefer GraphQL, Back4App provides a GraphQL endpoint. Below is an example mutation to create a new record:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
You can execute GraphQL queries using a library like apollo-client or even a simple fetch call:
JS
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
﻿
Working with Live Queries (optional)
For real time data, Back4App has Live Queries, although it typically requires the Parse SDK. As we are focusing on REST calls in this tutorial, you can enable Live Queries in your app’s Server Settings if you plan to use them later. Real time data can help you keep users updated instantly in a React Native app. For a simpler approach, you might poll the server with your own intervals or rely on third-party tools.
Step 3 – Applying Security with ACLs and CLPs
Brief overview
Back4App secures your backend with ACLs (Access Control Lists) and CLPs (Class-Level Permissions). These let you protect data at both the object and class levels. They are vital for implementing secure user permissions in production-grade mobile app development.
Step-by-step
Class-Level Permissions (CLPs):
Go to your app’s Database section, open any class, and switch to “Security & Permissions.” Adjust read/write permissions for various user roles or public access.
ACLs:
You can apply per-object access control by including _ACL fields in your REST requests. For example:
For more details, check out the App Security Guidelines.
Step 4 – Writing Cloud Code Functions
Why Cloud Code
Cloud Code lets you run server-side scripts on Back4App for tasks like validations, triggers, and processing external API calls. It helps you control logic that should remain hidden from the client, providing better security for your React Native project.
Example Function
Below is an example you’d write in your main.js on the server side. You can call it from your React Native app through REST:
JS
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
﻿
Deployment
Back4app CLI:
Install the CLI, configure your account key, and run b4a deploy.
Dashboard:
You can also go to Cloud Code > Functions, paste your code in main.js, and click Deploy.
﻿
Calling Your Function (via REST)
Use REST APIs directly from your React Native app:
JS
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
﻿
This flexibility makes you a more efficient full stack developer, as you can integrate business logic without exposing sensitive details on the client.
Step 5 – Configuring Authentication
Enable or Set Up User Authentication
Back4App uses the Parse User class to manage user authentication. Even if you are not using the Parse SDK in React Native, you can register, log in, or log out using direct HTTP requests.
Sign Up a User (REST):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "[email protected]"
     }' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
       "username": "alice",
       "password": "secretPassword",
       "email": "alice@example.com"
     }' \
  https://parseapi.back4app.com/users
﻿
Log In (REST):
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secretPassword' \
  https://parseapi.back4app.com/login
﻿
These requests return a session token that you can store in your React Native app to manage user sessions. This ensures that each request you make can be authorized, building mobile experiences that stay secure.
Social Login
Back4App supports social logins (Google, Facebook, Apple) through specialized flows. You’ll need to follow the Social Login Docs to configure OAuth apps, and then send appropriate tokens to Back4App.
Step 6 – Handling File Storage
Setting up File Storage
Back4App can store files for your React Native app. You can attach them to objects or upload them directly. Since we’re using REST, below is an example of uploading a file (Base64-encoded):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
﻿
The response returns a URL you can store in your database. From your React Native app, you can do this with fetch by sending the file as a blob or form data.
Security Considerations
To prevent unauthorized uploads, configure the fileUpload options in your Parse Server Settings. For instance, you could allow uploads only from authenticated users. This ensures services including file storage remain protected.
Step 7 – Email Verification and Password Reset
Overview
Confirming email ownership is key to implementing secure user flows. Back4App offers built-in tools for email verification and password resets.
Back4App Dashboard Configuration
Open your App Settings.
Enable email verification under Email Settings.
Customize the templates for password reset and verification messages.
Code/Implementation
A user who forgets their password can trigger a reset request:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "[email protected]"}' \
  https://parseapi.back4app.com/requestPasswordReset
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"email": "alice@example.com"}' \
  https://parseapi.back4app.com/requestPasswordReset
﻿
Back4App sends a password-reset email to the user. This convenience saves you from setting up separate mail servers in your React Native app.
Step 8 – Scheduling Tasks with Cloud Jobs
What Cloud Jobs Do
Cloud Jobs help you automate recurring tasks like data cleanup or sending daily reports. Below is an example job in main.js:
JS
// 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);
  }
});
// 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);
  }
});
﻿
Deploy this code, then go to Server Settings > Background Jobs to schedule it. This keeps your data fresh across your iOS and Android platforms without manual intervention.
Scheduling a Cloud Job
﻿
Step 9 – Integrating Webhooks
Definition
Webhooks allow your backend to notify external services whenever an event occurs. For instance, you could notify Slack or a payment gateway upon creating a new Todo.
Configuration
Go to More > WebHooks in your Back4App dashboard.
Add a new Webhook pointing to a desired external endpoint.
Set triggers to define when your React Native app data changes should trigger the webhook.
Adding a Webhook
﻿
You can also code webhooks inside Cloud Code triggers, allowing you to post HTTP requests or integrate with third-party APIs. This extends your backend capabilities to a wide range of external services.
BeforeSave WebHook
﻿
Step 10 – Exploring the Back4App Admin Panel
Where to Find It
The Back4App Admin Panel is a user-friendly interface for non-technical individuals to manage data. It’s especially useful for product owners, client representatives, or support staff who need direct access to your data model.
Features
Enable Admin App in your App Dashboard > More > Admin App.
Create an Admin User (username/password).
Choose a Subdomain for quick, code-free database access.
Enable Admin App
﻿
Once logged in, your users or team can view, edit, or delete records without writing any code. This approach supports faster data management and collaboration.
Conclusion
In this guide, you learned how to build a backend for React Native applications using Back4App. This included:
Creating a secure backend and implementing cross platform compatibility for your React Native app.
Setting up data management with REST and GraphQL APIs.
Configuring ACLs and CLPs to protect sensitive data.
Writing Cloud Code for server-side logic.
Handling user authentication and email verification.
Managing file storage with direct uploads.
Scheduling background tasks with Cloud Jobs.
Using Webhooks to integrate external services.
Exploring the Back4App Admin Panel for easy database administration.
With these tools and features, your React Native project can grow into a reliable and scalable full stack solution. You are now equipped to handle real time data, user security, and other crucial aspects of mobile applications. Keep exploring the Back4App Documentation to refine your skills and create powerful mobile experiences across iOS and Android platforms.
Next Steps
Harden your React Native app with advanced security and role-based access control.
Experiment with real time updates using Live Queries for real time applications (if needed).
Integrate external APIs and services including payment gateways or social logins.
Enhance performance through caching or optimizing cloud functions.
Dive deeper into Back4App’s official docs to unlock additional features.
﻿
Updated 15 Jan 2025
Did this page help you?
How to Build a Backend for Xamarin?
How to Build a Backend for Objective-C?