c2pa Social Example in Next.js

An example application to show how c2pa could be shown in social platforms that have not fully implemented L1 or L2 UX for c2pa. This example uses Google Drive.

🚀 Quick Start

Step 0

1. Setup a Content Integrity API
2. Enable Google Drive API in Google Cloud Console
3. Create a public Google Drive folder

Step 1

Add a .env.local

NEXT_PUBLIC_BASE_URL=http://localhost:3000

# Content Integrity
CONTENT_INTEGRITY_API_URL="YOUR API URL"
CONTENT_INTEGRITY_MIME_TYPES="image/png,image/jpeg,video/mp4,audio/mpeg,audio/mp4,audio/x-m4a"

# Google Drive
GOOGLE_DRIVE_API_KEY="YOUR GOOGLE DRIVE API KEY";
GOOGLE_DRIVE_FOLDER_ID="YOUR GOOGLE FOLDER ID";

Step 2

Install required packages

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Step 3

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Step 4

Open http://localhost:3000 with your browser to see the result.

🧱 Architecture

This is a Next.js project bootstrapped with create-next-app. The app is deployed using Vercel.

Stack

• Vercel
• NextJS 13 using App Router
• React
• Tailwind CSS

Intent

Verification/Validation is completed server side to ensure SSR can be used. This means although c2pa-js is used no wasm is used.

🎉 Try It Yourself!

Use this button to deploy it on Vercel