Connect REST API to Refine

Learn how to connect your REST API backend to Refine and generate a working admin panel or dashboard.

Connect any REST API backend to Refine and generate a complete admin panel.

⏱️ Time to complete: ~10 minutes (varies by API complexity)

What You'll Build

Refine reads your API schema and generates a React application:

Data tables with sorting, filtering, and pagination
Create/edit forms matching your endpoints
Authentication integrated with your auth method
Full code ownership — export and deploy anywhere

This flow works with Express, Django, Rails, Laravel, Go, or any framework that exposes a REST API.

Prerequisites

Before you start:

A running REST API accessible via URL
An API schema (OpenAPI/Swagger) or ability to generate one
A Refine account (sign up free at refine.dev)

Tip

Don't have a schema file? You can generate one from your codebase using our open-source extractor.

How to Connect

Step 1: Start the connection

Go to refine.dev/start and click Connect to REST API.

If you're not signed in, you'll be prompted to authenticate with Google or GitHub first.

Result: A modal opens asking for your API URL.

Step 2: Enter your API URL

Enter the base URL of your REST API:

https://api.yourapp.com/v1

Tip

Use the base URL without trailing slashes. Include the version prefix if your API uses one.

Result: The modal expands to ask for your schema.

Step 3: Provide your schema

You have two options:

Option A: Upload a schema file

If you have an OpenAPI/Swagger spec:

Click the upload area
Select your .json or .yaml schema file
Refine parses and validates it

Option B: Generate from your codebase

If you don't have a schema file:

Follow the instructions in the modal

Run this command in your project:

npx repomix@latest ./path-to-source-code

Upload the generated schema file

This scans your code and creates a schema file. Nothing ever leaves your machine — credentials and source stay private.

The extractor is fully open-source (Repomix). Check the repo anytime.

Result: You proceed to the Resources page.

Step 4: Review and customize resources

The Resources page shows your detected API resources:

Left Panel	Right Panel
Info box with guidance	Schema preview
	Click resources to see endpoints
	View field types and relationships

Review how Refine interpreted your API. You can adjust resource names, relationships, and field types in the next step.

Tip

Take time here. Getting the schema right means better generated code.

Result: Your resources are configured and ready.

Step 5: Configure authentication (if needed)

If Refine can't auto-detect your auth method, you'll see an Authentication page.

Choose one:

Option	When to use
Supported provider (Clerk, Auth0)	You use a known auth service
Custom authentication	You have a custom auth flow
No authentication	Your API is public or you'll add auth later

For custom auth, use the AI chat to describe your flow:

My API uses Bearer tokens. The login endpoint is POST /auth/login
and returns { token: "..." }

Result: Authentication is configured.

Step 6: Wait for schema analysis

Refine creates a Refine Schema Language (RSL) file from your schema. Think of RSL as a map that helps the AI understand your data structure.

API Complexity	Analysis Time
Simple (< 10 endpoints)	~1 minute
Medium (10-30 endpoints)	~2-3 minutes
Complex (30+ endpoints)	Up to 5 minutes

You'll see a loading animation. Don't close the tab.

Result: Analysis complete. You're ready to build.

Step 7: Start building

Click Continue to enter the Refine Console.

Describe what you want in the chat:

Create an admin panel for my users endpoint

Build a dashboard showing data from /orders

Generate a CRUD interface for products with search and filters

Refine generates a working application connected to your API.

Result: A live preview of your application appears in the right panel.

What Gets Generated

Data layer

Refine creates a REST data provider with:

API calls for each resource (GET, POST, PUT, DELETE)
Request/response type handling
Error handling and loading states

UI components

Based on your schema:

Field Type	Generated UI
string	Text input
number, integer	Number input
boolean	Toggle switch
date, datetime	Date picker
enum	Dropdown select
object	Nested form
array	Repeatable fields

Authentication

If configured:

Login/logout flows
Token storage and refresh
Protected routes
Auth header injection on API calls

Managing API Secrets

If your API requires authentication:

Open the Console
Go to Settings → Secrets
Add your API key or token
Refine includes it in all API requests

Never commit secrets to your exported code. Use environment variables in production.

After Connecting

Iterate with chat

Use the AI to refine your application:

"Add pagination to the products list"
"Include a search filter on the users table"
"Add a chart showing orders over time"

Edit code directly

Switch to the Editor tab to modify the generated React/TypeScript code. It uses the Refine open-source framework — standard patterns you can customize.