How to Access Sanity Project with ID and API Token in React App?

To access a Sanity project in your React app when you have the project ID and API token, you'll need to install and configure the @sanity/client package. Here's how to set it up:

Installation

First, install the Sanity client:

npm install @sanity/client

Basic Client Configuration

Create a Sanity client instance using createClient:

import { createClient } from "@sanity/client";

export const client = createClient({
  projectId: "your-project-id",
  dataset: "production", // or your dataset name
  apiVersion: "2024-01-01", // use current date (YYYY-MM-DD)
  useCdn: true, // set to false for fresh data
  token: process.env.REACT_APP_SANITY_TOKEN, // only if you need authenticated access
});

Important Security Considerations

Be very careful with API tokens in browser-based React apps! According to Sanity's security guidelines, you should never expose write tokens in frontend code. Here's what you need to know:

• Read-only tokens (Viewer role): Safe to use in frontend apps for accessing published or draft content
• Write tokens (Editor role): Must only be used in server-side environments, API routes, or serverless functions

If you need write access from your React app, implement a backend API endpoint or serverless function that:

1. Accepts requests from your frontend
2. Validates the input
3. Uses the write token server-side to modify Sanity content

Using Environment Variables

Store your token in environment variables to keep it secure:

REACT_APP_SANITY_PROJECT_ID=your-project-id
REACT_APP_SANITY_DATASET=production
REACT_APP_SANITY_TOKEN=your-read-only-token

Then reference them in your client configuration:

export const client = createClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: process.env.REACT_APP_SANITY_DATASET,
  apiVersion: "2024-01-01",
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});

Fetching Content

Once configured, you can query content using GROQ:

import { client } from "./sanityClient";

// Fetch all posts
const posts = await client.fetch('*[_type == "post"]{_id, title, slug}');

When Do You Need a Token?

Authentication with a token is required for:

• Accessing draft content or using the previewDrafts perspective
• Reading from private datasets
• Accessing documents with periods in their IDs (like draft documents)
• Any write operations

For publicly available published content, you can often omit the token entirely by setting useCdn: true and not including the token parameter.