---
title: How to Build React Apps Quickly and Securely Against .NET Backend Using DreamFactory (2025 Guide)
description: Learn how to front React apps with DreamFactory to unify .NET APIs, databases, and SOAP into secure REST endpoints—RBAC, CORS, and instant OpenAPI docs included.
image: https://blog.dreamfactory.com/hubfs/ChatGPT%20Image%20Nov%2018%2c%202025%2c%2012_17_43%20PM-1.png
---

[![DreamFactory logo](https://cdn.prod.website-files.com/64ed8da8a866be7a702fbae0/68d51994d3678214b54acb60_dreamfactory-navbar-logo.svg)](https://www.dreamfactory.com/)

 Products & Services

[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)

[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)

AI Data Models

[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)

Services and support

[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)

API Management

[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)

 Use Cases

AI Use Cases

[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)

[Customer Case Studies](https://www.dreamfactory.com/case-studies)

[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)

 Industries

Industries

#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)

#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)

#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)

#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)

#### [Spotlight How enterprises run on DreamFactory From healthcare to energy to finance — governance baked into every endpoint. Browse case studies →](https://www.dreamfactory.com/case-studies)

 Connectors

SQL Database

[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)

NoSQL & Docs

[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)

Cloud Warehouses

[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)

C & SaaS

[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)

[See all 30+ connectors](https://www.dreamfactory.com/connectors)

[Blog](https://blog.dreamfactory.com/)

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

[![DreamFactory logo](https://cdn.prod.website-files.com/64ed8da8a866be7a702fbae0/68d51994d3678214b54acb60_dreamfactory-navbar-logo.svg)](https://www.dreamfactory.com/)

![hamburger](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/menu-hamburger.svg) ![close](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/close-menu.svg)

 Back to main menu

 Products & Services

 Use Cases

 Industries

 Connectors

[Blog](https://blog.dreamfactory.com/)

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)

[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)

AI Data Models

[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)

Services and support

[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)

AI Data Models

[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)

AI Use Cases

[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)

[Customer Case Studies](https://www.dreamfactory.com/case-studies)

[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)

Industries

#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)

#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)

#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)

#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)

SQL Database

[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)

NoSQL & Docs

[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)

Cloud Warehouses

[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)

C & SaaS

[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)

[See all 30+ connectors](https://www.dreamfactory.com/connectors)

[![back arrow](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/orange-arrow.svg) Blog](https://blog.dreamfactory.com/)

# How to Build React Apps Quickly and Securely Against .NET Backend Using DreamFactory (2025 Guide)

 by Kevin Hood

![calendar icon](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/calendar-icon.svg) November 18, 2025

Table of contents

RECOMMENDED ARTICLES

- [A Complete Guide to API Generation](https://blog.dreamfactory.com/a-complete-guide-to-api-generation)
- [10 Best API Management Tools](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools)
- [Creating a Microsoft SQL Server API in Less Than 5 minutes with DreamFactory](https://blog.dreamfactory.com/creating-a-microsoft-sql-server-api-in-less-than-5-minutes-with-dreamfactory)
- [Hasura vs. DreamFactory: A Comprehensive Comparison](https://blog.dreamfactory.com/hasura-vs-dreamfactory)
- [Build A Snowflake REST API in Less Than 5 Minutes](https://blog.dreamfactory.com/generate-a-snowflake-rest-api-in-less-than-5-minutes)

## **Why Use [DreamFactory](https://docs.dreamfactory.com/introduction/introducing-rest-and-dreamfactory/) for This Scenario?**

When building modern React applications that need to interact with existing enterprise infrastructure, organizations often face several challenges:

Common Integration Challenges:

- **Multiple authentication mechanisms**: .NET APIs might use [API keys](https://docs.dreamfactory.com/api-generation-and-connections/interacting-with-the-api/), databases require connection credentials, and SOAP services have their own authentication schemes
- **Inconsistent API patterns**: Different backend systems expose data in different ways (REST, SOAP, direct database access)
- **Security complexity**: Managing CORS, rate limiting, and access controls across multiple systems
- **Development overhead**: Writing and maintaining custom middleware or backend services to orchestrate these connections

How DreamFactory Provides Value:

1. **Single API Gateway**: DreamFactory sits between your React app and all backend systems, providing one consistent REST interface. Your React app only needs to know one base URL and one authentication pattern.
2. **Instant API Generation**: Instead of writing custom API endpoints for database access, DreamFactory auto-generates fully documented REST [APIs](https://docs.dreamfactory.com/api-generation-and-connections/interacting-with-the-api/) for your SQL Server, Oracle, or other databases with full CRUD operations.
3. **Legacy System Modernization**: SOAP services and legacy systems are automatically wrapped as clean JSON REST [APIs](https://docs.dreamfactory.com/api-generation-and-connections/interacting-with-the-api/), eliminating the need for React to handle XML parsing or complex SOAP protocols.
4. **Unified Security Model**: One role-based access control ([RBAC](https://docs.dreamfactory.com/security/role-based-access/)) system manages permissions across all services. Define once what a user or application can access, and it applies to databases, [APIs](https://wiki.dreamfactory.com/DreamFactory/Tutorials/Using_the_API_Docs), and legacy systems uniformly.
5. **Reduced Development Time**: No need to build custom middleware, authentication layers, or API aggregation services. DreamFactory handles the plumbing so developers can focus on the React UI.
6. **Built-in Features**: Automatic API documentation (Swagger/OpenAPI), request logging, rate limiting, and [CORS](https://docs.dreamfactory.com/system-settings/config/cors-and-ssl) management come out of the box.

For organizations with existing .NET infrastructure, databases, and legacy SOAP services, DreamFactory eliminates months of custom integration work and provides a production-ready API layer that's secure, documented, and maintainable.

---

**Note:** *This guide references DreamFactory official documentation (docs.dreamfactory.com and guide.dreamfactory.com). For advanced features, consult DreamFactory support.*

---

## **1. Prerequisites**

1. **Running DreamFactory instance** (Docker, VM, cloud, etc.).
2. Access to: 
     - Base URL(s) of existing **.NET APIs**
     - Any **databases** or **SOAP services** you want to include.
3. **DreamFactory admin credentials**.
4. Node.js + npm/yarn on your dev machine (for React).

---

## **2. Inventory Existing Backends**

Before building anything, make a quick list:

- **.NET APIs** 
    - Base URLs (e.g., https://api.customer.com/orders)
    - Auth style (Basic, API key, OAuth2, etc.)
    - Any OpenAPI/Swagger docs available
- **Databases** 
    - SQL Server / Oracle / others
- **Legacy/SOAP APIs** 
    - WSDL URLs
    - Any special auth

You'll map each of these to one or more **DreamFactory services**.

---

## **[![Server-Stack](https://no-cache.hubspot.com/cta/default/44870387/interactive-179228959126.png)](https://blog.dreamfactory.com/hs/cta/wi/redirect?encryptedPayload=AVxigLK9Qmb%2B9NHWbcVKl93CRs1b4e6kq6K808k2FMjKl5idVtbXimOrm0NvxdZqFbELH5ey%2FwSQC9jD7KRDDBBWcQ%2Feh1lI%2BDZWJpTLoHFOtySsIkVwCrBtP8qzIKiOLAFrlxhIpMpu6W519tcWZYLp1va3L5qf31IYUp0%2FRmlUVY2mmazjFg%3D%3D&webInteractiveContentId=179228959126&portalId=44870387)**

## **3. Wrap .NET APIs with DreamFactory HTTP Services**

You'll use DreamFactory's **HTTP Service connector** to proxy your .NET APIs through DreamFactory. The HTTP Service connector is used to proxy third-party HTTP APIs through DreamFactory, opening up possibilities for creating sophisticated API-driven applications and powerful workflows involving multiple APIs.

### **Step 3.1 – Create an HTTP Service**

1. Log into your DreamFactory instance.
2. Click on the **Proxy a Web Service** from the home page
3. Choose **HTTP Service** from the **Service Type** drop down.
4. Assign the service details (See sample below): 
     - Name: dotnet\_orders (must use alphanumeric characters only; this name becomes part of your API URI structure)
     - Label: "Orders API" (human-readable label for reference)
     - Description: "Proxy for .NET Orders REST API" (optional referential information)

This creates DreamFactory endpoints with the structure:

/api/v2/dotnet\_orders/<path>

Where <path> will be appended to your base URL when making requests to the remote .NET API.

### **Step 3.2 – Configure the HTTP Service**

1. Enter the **Base URL** for your .NET API (e.g., https://api.customer.com/orders)

Note: When a client makes a request to your DreamFactory service, DreamFactory will append everything after /dotnet\_orders in the service URL to the base URL before forwarding the request to the remote web service. DreamFactory acts as a proxy for the remote web service.

Important benefit: Web service credentials are never exposed to the client since they're configured and stored in DreamFactory.

### **Step 3.3 – Add Parameters (Optional)**

If your .NET API requires query parameters (like API keys), Click the **Advanced Options** drop down and scroll down to the **Parameters** section and click the **+** (plus sign) on the right side:

Configure each parameter:

- Name: The parameter name (e.g., api\_key)
- **Value**: The parameter value
- **Exclude**: Check this to prevent a parameter passed from the client from being sent to the remote service
- **Outbound**: Check this to add the parameter before DreamFactory calls the remote service
- **Cache Key**: Optionally cache the parameter for performance
- **Action**: Select which HTTP verbs (GET, POST, PUT, PATCH, DELETE) this parameter applies to

Parameter behavior:

- **Outbound**: The parameter will be passed to the destination API
- **Exclude**: Prevents a client-provided parameter from being forwarded to the destination

### **Step 3.4 – Add Headers for Authentication**

Headers are the preferred method for passing authorization credentials because they are encrypted when HTTPS is used (unlike parameters which can be intercepted or logged).

To add a header, click the **+** (plus sign) on the right side of the **Headers** section:

Configure each header:

- **Name**: The header name (e.g., Authorization, X-API-Key)
- **Value**: The header value (e.g., Bearer {token}, your API key)
- **Pass From Client**: Check this to pass a header from the requesting client through to the remote service
- **Action**: Select which HTTP verbs this header applies to

Header options:

- **Pass From Client**: Useful if your React clients need to pass their own custom headers through DreamFactory to the .NET service
- **Fixed value**: If unchecked, the header value you specify will be added to all requests to the remote service

### **Step 3.5 – Save Your Service**

Click **Save** to persist your HTTP Service configuration.

### **Step 3.6 – Calling Your .NET API Through DreamFactory**

Once configured, your React app will make requests to:

GET  https://your-dreamfactory-domain/api/v2/dotnet\_orders/{endpoint}

POST https://your-dreamfactory-domain/api/v2/dotnet\_orders/{endpoint}

DreamFactory will forward these requests to your .NET API at:

GET  https://api.customer.com/orders/{endpoint}

POST https://api.customer.com/orders/{endpoint}

All configured parameters and headers are automatically included in the outbound request to your .NET API.

### **Step 3.7 – (Optional) Add Service Definition for Enhanced Documentation**

DreamFactory supports adding OpenAPI/Swagger definitions for HTTP Services. This provides:

- Detailed API documentation in the Live API Docs
- Better understanding of available endpoints and parameters
- Enhanced role-based access control at the path level

If your .NET API provides OpenAPI/Swagger documentation, you can add this definition in the **Service Definition** section of the Config tab. Consult DreamFactory support or community resources for detailed instructions on importing API definitions.

**Note**: Unlike database or file storage services, HTTP services in DreamFactory do not auto-generate Swagger documentation without a service definition, as DreamFactory cannot automatically discover the structure of remote APIs.

---

## **4. Connect Databases Directly to DreamFactory**

For any DBs you want React to hit (avoiding extra .NET plumbing):

1. **Home Page → Click on Connect to Database**.
2. Choose the DB type (e.g., **SQL Server**).
3. Enter connection info (host, db, user, password, etc.).
4. Save

DreamFactory auto-generates full REST CRUD over tables/views:

GET    /api/v2/sqlserver/\_table/customers

POST   /api/v2/sqlserver/\_table/customers

PATCH  /api/v2/sqlserver/\_table/customers/123

DELETE /api/v2/sqlserver/\_table/customers/123

Useful Query Parameters:

- filter - Add WHERE clauses (e.g., ?filter=status='active')
- fields - Select specific columns (e.g., ?fields=id,name,email)
- related - Include related table data via foreign keys

All with OpenAPI docs and [RBAC](https://docs.dreamfactory.com/security/role-based-access/) guardrails.

---

## **5. Wrap SOAP / Legacy Services as REST (Optional)**

For SOAP or older web services:

1. **Services → Create → Remote Service → SOAP Service**
2. Provide the **WSDL URL** in the "WSDL" field
3. DreamFactory will parse operations and generate REST endpoints that call SOAP under the hood

Result: React sees simple JSON REST; DreamFactory handles all SOAP XML ugliness.

---

## **6. Configure Security: Roles, Apps, API Keys**

Now make the React app's access secure but simple.

### **Step 6.1 – Create a Role for the React App**

1. In the left navbar, click **Role Based Access**.
2. Click the **+** (purple plus button) to create a new Role.
3. Enter: 
     - **Name**: react\_frontend
     - **Description**: "Role for React portal application"
     - Check **Active**
4. Click the **Access Overview** dropdown/arrow.
5. Configure service access for each service the React app needs:

For the HTTP Service (wrapped .NET API):

- **Service**: Select dotnet\_orders (your HTTP service name)
- **Component**: Enter /\* (for all paths) or specific path like /orders/\*
- **Access**: Select the HTTP methods needed (GET, POST, PATCH, DELETE)
- **Requester**: Select **API**

For Database Service:

- **Service**: Select sqlserver (your database service name)
- **Component**: Enter \_table/\* (all tables) or \_table/customers (specific table)
- **Access**: Select the HTTP methods needed (GET, POST, PATCH, DELETE)
- **Requester**: Select **API**

For SOAP Service (if added):

- **Service**: Select your SOAP service name
- **Component**: Enter /\* or specific operation path
- **Access**: Select the HTTP methods needed
- **Requester**: Select **API**

1. Click the **+** sign next to **Advanced Filters** to add additional service access rows as needed.
2. Click **Save** to create the role.

Note: The **Requester** field determines if the service can be accessed via API calls, server-side scripts, or both. For React applications, select **API**.

Note: Depending on your Role Based Access Control requirements, it might make sense to create multiple Roles across your different API services. This example only uses one Role.

### **Step 6.2 – Create an App & API Key**

1. In the left navbar, click **Apps** (or **API Keys**).
2. Click the **+** (purple plus button) to create a new App.
3. Fill in: 
     - **Application Name**: react-portal
     - **Description**: "React portal application"
     - Check **Active**
     - **App Location**: Select **No Storage Required** (for web/mobile apps)
     - **Assign a Default Role**: Select react\_frontend (the role you just created)
4. Click **Save**.

DreamFactory automatically generates an **API key** for this App. Copy this key - you'll need it in your React application.

Important: Each App has one API key. The role assigned to the App determines what resources can be accessed using that API key.

### **[![DreamFactory_blog_CTA_163x200@2x-May-07-2024-08-15-34-3229-AM](https://no-cache.hubspot.com/cta/default/44870387/interactive-167690643360.png)](https://blog.dreamfactory.com/hs/cta/wi/redirect?encryptedPayload=AVxigLKEjbmGDmpkWkKVXja55g4hU9jaYgZtwl4NFwxofWd2L6G9gc4UqYRmBOotClasPAHl1JZw2lkHNnMiJAonTlkhEIOvexlNdM92o0%2BJCXt7EcS9x2qB6S1amGJETsbF00Hm2qUv8U761NPfFPn%2B5K2vjCvFr37CQ51yY%2FEIMNOtnM3FUw%3D%3D&webInteractiveContentId=167690643360&portalId=44870387)**

### **Step 6.3 – Understanding JWT Session Tokens (User Authentication)**

For user-specific authentication (not just app-level):

- **API Key** (X-DreamFactory-Api-Key header): Identifies which **App** is making the request and determines base permissions via the App's default role
- **Session Token** (X-DreamFactory-Session-Token header): Identifies which **User** is making the request (obtained by authenticating via /user/session endpoint)

How it works:

1. User logs in via /user/session with email/password
2. DreamFactory returns a JWT session token in the response (session\_token field)
3. Subsequent requests include **both** headers: 
     - X-DreamFactory-Api-Key: Your App's API key
     - X-DreamFactory-Session-Token: The user's session token
4. DreamFactory combines the user's role permissions with the App's role permissions

Authentication patterns:

- **Unauthenticated access**: Only X-DreamFactory-Api-Key → Uses App's default role
- **Authenticated access**: Both X-DreamFactory-Api-Key + X-DreamFactory-Session-Token → Uses user-specific permissions

Each user can be assigned a role per App in the **Users** tab of the admin console. If no user-specific role is assigned, they inherit the App's default role.

---

## **7. Test Everything in Live API Docs**

Before touching React, verify the API layer from DreamFactory's admin.

1. Go to **API Docs** (Live API Docs).
2. Pick: 
     - dotnet\_orders (wrapped .NET API)
     - sqlserver (DB service)
     - soap\_legacy (SOAP wrapper, if you added one)
3. Add your **API key** (and session token once you set auth up).
4. Test a few calls.

If these work here, they'll work from React.

---

## **8. Build the React App (Talking Only to DreamFactory)**

Now assume:

- DreamFactory is reachable at: https://api.customer.com/api/v2
- App API key: DF\_APP\_KEY (never commit to repo; use environment variables for deployment)

### **Step 8.1 – Create the React App**

Example with Vite + React:

npm create vite@latest react-portal -- --template react

cd react-portal

npm install

Create a .env.local file (for development only, never commit):

VITE\_DF\_BASE\_URL=https://api.customer.com/api/v2

VITE\_DF\_APP\_KEY=your\_app\_key\_here

**Production Note:** Use your deployment platform's environment variable system (not .env files) to inject these values securely.

### **Step 8.2 – Helper for Calling DreamFactory**

// src/dreamfactoryClient.js

const BASE\_URL = import.meta.env.VITE\_DF\_BASE\_URL;

const APP\_KEY = import.meta.env.VITE\_DF\_APP\_KEY;

let sessionToken = null; // set after login

export function setSessionToken(token) {

  sessionToken = token;

}

export async function dfRequest(path, options = {}) {

  const headers = {

    "Content-Type": "application/json",

    ...(options.headers || {}),

    "X-DreamFactory-Api-Key": APP\_KEY,

  };

  if (sessionToken) {

    headers\["X-DreamFactory-Session-Token"\] = sessionToken;

  }

  const res = await fetch(\`${BASE\_URL}${path}\`, {

    ...options,

    headers,

  });

  if (!res.ok) {

    const errorData = await res.json().catch(() => ({}));

    throw new Error(

      \`DreamFactory error: ${res.status} - ${errorData.error?.message || 'Unknown error'}\`

    );

  }

  return res.json();

}

 

 

### **Step 8.3 – Login Against DreamFactory**

DreamFactory has built-in auth endpoints (e.g., /user/session) for username/password, LDAP, OAuth, etc.

Example simple login form:

// src/Login.jsx

import { useState } from "react";

import { dfRequest, setSessionToken } from "./dreamfactoryClient";

 

export default function Login({ onLoggedIn }) {

  const \[email, setEmail\] = useState("");

  const \[password, setPassword\] = useState("");

  const \[error, setError\] = useState("");

 

  async function handleSubmit(e) {

    e.preventDefault();

    setError("");

    

    try {

      const body = { email, password };

 

      const data = await dfRequest("/user/session", {

        method: "POST",

        body: JSON.stringify(body),

      });

 

      // Response includes: session\_token, session\_id, id, email, etc.

      setSessionToken(data.session\_token);

      onLoggedIn(data);

    } catch (err) {

      setError(err.message);

    }

  }

 

  return (

    <form onSubmit={handleSubmit}>

      {error && <div style=>{error}</div>}

      <input

        value={email}

        onChange={e => setEmail(e.target.value)}

        placeholder="Email"

        type="email"

        required

      />

      <input

        type="password"

        value={password}

        onChange={e => setPassword(e.target.value)}

        placeholder="Password"

        required

      />

      <button type="submit">Log in</button>

    </form>

  );

}

### **Step 8.4 – Calling the Wrapped .NET API From React**

Let's say your .NET API has an endpoint GET /orders (exposed via the HTTP Service dotnet\_orders):

// src/Orders.jsx

import { useEffect, useState } from "react";

import { dfRequest } from "./dreamfactoryClient";

 

export default function Orders() {

  const \[orders, setOrders\] = useState(\[\]);

  const \[loading, setLoading\] = useState(true);

  const \[error, setError\] = useState("");

 

  useEffect(() => {

    dfRequest("/dotnet\_orders/orders")

      .then(data => {

        setOrders(data);

        setLoading(false);

      })

      .catch(err => {

        setError(err.message);

        setLoading(false);

      });

  }, \[\]);

 

  if (loading) return <div>Loading...</div>;

  if (error) return <div>Error: {error}</div>;

 

  return (

    <ul>

      {orders.map(o => (

        <li key={o.id}>

          #{o.id} – {o.status}

        </li>

      ))}

    </ul>

  );

}

Similarly, for a DB-backed resource with query parameters:

// SQL Server table via DF DB service

// Get active customers with only id, name, email fields

dfRequest("/sqlserver/\_table/customers?filter=status='active'&fields=id,name,email");

React never touches .NET or the DB directly; it only calls DreamFactory.

---

## **9. Handle [CORS](https://docs.dreamfactory.com/system-settings/config/cors-and-ssl) and Dev Environment**

### **Option A – Enable CORS in DreamFactory**

**Note:** CORS configuration requires environment variable setup in your DreamFactory deployment (.env file with DF\_CORS\_\* variables). Consult your DreamFactory administrator or deployment documentation for specific configuration steps.

For development with React running on http://localhost:5173, you'll need to configure:

- Allowed origins
- Allowed methods (GET, POST, PATCH, DELETE, OPTIONS)
- Allowed headers (X-DreamFactory-Api-Key, X-DreamFactory-Session-Token, Content-Type)

### **Option B – Front Through a Reverse Proxy (Prod)**

In production, you might:

- Put everything behind a single domain (e.g., Nginx/Ingress).
- Route /api/ → DreamFactory.
- Route / → React static site / app.

From React's perspective, it still just talks to /api/v2/... (same-origin, no [CORS](https://docs.dreamfactory.com/system-settings/config/cors-and-ssl) needed).

---

## **10. Deploy**

1. **DreamFactory**:  
     - Harden security: RBAC, API key rotation, rate limiting (configured per-role/per-service), logging, IP allowlists.
     - Ensure environment variables are properly configured for production.
2. **.NET APIs & legacy systems**:  
     - Keep them private where possible (VNet, private connections).
     - Only DreamFactory should have direct access.
3. **React app**:
4. Build (npm run build) and deploy to your web host / CDN / app service. 
     - Point it at the production DreamFactory URL via deployment platform environment variables (not .env files).
     - Never include API keys or secrets in your built JavaScript bundle.

---

## **Summary**

This guide demonstrates how to:

- Use DreamFactory as a unified API gateway for .NET APIs, databases, and legacy SOAP services
- Secure access with role-based permissions and JWT authentication
- Build a React frontend that communicates exclusively with DreamFactory

Next Steps:

- Test thoroughly in DreamFactory's Live API Docs before React integration
- Implement proper error handling and loading states in your React app
- Configure production environment variables securely
- Set up monitoring and logging for your API gateway

Note: For advanced features like detailed OpenAPI imports, custom scripts, or complex authentication flows, consult DreamFactory support.

## FAQs

1. Can I call multiple .NET APIs through one DreamFactory service?  
Yes. Create separate HTTP Services for each base URL or use path routing; secure them with RBAC per service or path.

2. How are credentials kept out of the React client?  
Secrets live in DreamFactory (headers/params). The browser sends only the app API key and optional session token; DF injects upstream auth server-side.

3. Do database APIs include OpenAPI docs automatically?  
Yes. Database services auto-generate REST + OpenAPI; HTTP Services show docs if you import an OpenAPI definition.

4. What’s the difference between API key and session token?  
API key identifies the app (base permissions). Session token identifies the user (user-level permissions). Both can be required.

5. How do I handle CORS in development?  
Allow your dev origin, methods, and headers (API key + session token) in DF’s CORS config—or run React behind the same domain via reverse proxy.

 

TAGS: [API Management,](https://blog.dreamfactory.com/tag/api-management-2) [DreamFactory,](https://blog.dreamfactory.com/tag/dreamfactory) [Developer,](https://blog.dreamfactory.com/tag/developer) [Enterprise Software,](https://blog.dreamfactory.com/tag/enterprise-software) [.Net Stack,](https://blog.dreamfactory.com/tag/net-stack) [Web Development](https://blog.dreamfactory.com/tag/web-development)

![Kevin Hood](https://blog.dreamfactory.com/hs-fs/hubfs/Imported%20sitepage%20images/T9J6AH3S5-U08J3CS0K7C-ef0996ecbb6c-512.jpg?width=100&height=100&name=T9J6AH3S5-U08J3CS0K7C-ef0996ecbb6c-512.jpg)

Kevin Hood

Kevin Hood is an accomplished solutions engineer specializing in data analytics and AI, enterprise data governance, data integration, and API-led initiatives.

 Stay Connected with   
 The Connector Newsletter!

 Subscribe to stay up-to-date with DreamFactory's latest product updates, API best practices, and tech humor in your inbox.

[![Dreamfactory Logo](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/Megamenu-logo.svg)](https://www.dreamfactory.com/)

[Call Sales +1 (415) 993-5877](tel:+14159935877)

Open – Mon–Fri 9–5 PT

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

#### Follow us

- [GitHub](https://github.com/dreamfactorysoftware/dreamfactory)
- [Facebook](https://www.facebook.com/dfsoftwareinc/)
- [X (Twitter)](https://twitter.com/dfsoftwareinc)
- [LinkedIn](https://www.linkedin.com/company/dreamfactory-software)
- [YouTube](https://www.youtube.com/c/dreamfactorysoftware)

### Features

[Features](https://www.dreamfactory.com/features) [Self hosted](https://www.dreamfactory.com/features#self) [API Generation](https://www.dreamfactory.com/features#api) [Security](https://www.dreamfactory.com/features#secure) [Customization](https://www.dreamfactory.com/features#custom) [Pricing](https://www.dreamfactory.com/pricing)

### Installers

[Linux](https://www.dreamfactory.com/features#installer) [Docker](https://www.dreamfactory.com/features#installer) [Kubernetes](https://www.dreamfactory.com/features#installer)

### API Resources

[Documentation](https://docs.dreamfactory.com/) [Case Studies](https://www.dreamfactory.com/stories) [White Papers](https://www.dreamfactory.com/resources/whitepapers) [Academy](https://www.dreamfactory.com/academy) [API Calculator](https://calculator.dreamfactory.com) [Open Source](https://github.com/dreamfactorysoftware)

### Company

[Blog](https://blog.dreamfactory.com/) [Hub](https://www.dreamfactory.com/hub) [About us](https://www.dreamfactory.com/about) [Partners](https://www.dreamfactory.com/partners) [Support](https://www.dreamfactory.com/support) [Connectors](https://www.dreamfactory.com/connectors) [Contact Us](https://www.dreamfactory.com/demo)

 © 2025 DreamFactory. All rights reserved.

[Terms of Use](https://www.dreamfactory.com/terms-of-use) [Privacy Policy](https://www.dreamfactory.com/privacy-policy) [LLMs](https://www.dreamfactory.com/llms.txt)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Kevin Hood",
    "url" : "https://blog.dreamfactory.com/author/kevin-hoo"
  },
  "dateModified" : "2025-11-18T18:34:15.122Z",
  "datePublished" : "2025-11-18T18:00:00.000Z",
  "headline" : "How to Build React Apps Quickly and Securely Against .NET Backend Using DreamFactory (2025 Guide)",
  "image" : [ "https://blog.dreamfactory.com/hubfs/ChatGPT%20Image%20Nov%2018%2c%202025%2c%2012_17_43%20PM-1.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.dreamfactory.com/how-to-build-react-apps-quickly-and-securely-against-.net-backend-using-dreamfactory-2025-guide",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.dreamfactory.com/hubfs/DreamFactory%20-%20Orange%20-%20Transparent-1.png"
    }
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://blog.dreamfactory.com/",
    "name" : "Blog",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "REPLACE_WITH_ARTICLE_URL",
    "name" : "Why Use DreamFactory for This Scenario?",
    "position" : 2
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "Person",
  "name" : "REPLACE_WITH_AUTHOR_NAME"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Yes. Create separate HTTP Services for each base URL or use path routing; secure them with RBAC per service or path."
    },
    "name" : "Can I call multiple .NET APIs through one DreamFactory service?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Secrets live in DreamFactory configuration. The browser sends only the app API key and optional session token; DreamFactory injects upstream auth server-side."
    },
    "name" : "How are credentials kept out of the React client?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Yes. Database services auto-generate REST and OpenAPI; HTTP Services show docs if you import an OpenAPI definition."
    },
    "name" : "Do database APIs include OpenAPI docs automatically?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "The API key identifies the app and grants base permissions; the session token identifies the user and grants user-level permissions. Both can be required."
    },
    "name" : "What’s the difference between API key and session token?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Allow your dev origin, methods, and headers (X-DreamFactory-Api-Key, X-DreamFactory-Session-Token, Content-Type) in DreamFactory—or use a same-origin reverse proxy."
    },
    "name" : "How do I handle CORS in development?"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "Article",
  "articleSection" : [ "React", ".NET", "API Gateway", "REST APIs", "Security" ],
  "author" : {
    "@type" : "Person",
    "name" : "REPLACE_WITH_AUTHOR_NAME"
  },
  "headline" : "Why Use DreamFactory for This Scenario?",
  "keywords" : [ "DreamFactory", "React", ".NET APIs", "API gateway", "RBAC", "CORS", "OpenAPI", "Swagger", "SQL Server", "Oracle", "JWT", "REST", "SOAP" ],
  "mainEntityOfPage" : "REPLACE_WITH_ARTICLE_URL",
  "publisher" : {
    "@type" : "Organization",
    "name" : "DreamFactory"
  }
}
```