Skip to main content

Unsplash

This guide explains how to integrate Unsplash API into your superun application. The integration uses edge functions to securely proxy all API requests, ensuring your API key never reaches the client.

Documentation

For more details about Unsplash APIs, refer to the official documentation:

Environment Variables

Add the following environment variable to your supabase secrets, the plugin_secret_prefix MUST be SUPERUN
  • UNSPLASH_ACCESS_KEY - Unsplash Access Key

Step 1: Create Edge Function

Create a Supabase Edge Function to securely proxy Unsplash API requests. This example demonstrates the /search/photos endpoint:
// supabase/functions/unsplash-search-photos/index.ts

serve(async (req) => {
  try {
    // Get the Unsplash Access Key from environment
    const accessKey = Deno.env.get("SUPERUN_UNSPLASH_ACCESS_KEY");
    
    if (!accessKey) {
      return new Response(
        JSON.stringify({ error: "Unsplash API key not configured" }),
        { status: 500, headers: { "Content-Type": "application/json" } }
      );
    }

    // Parse query parameters from the request
    const url = new URL(req.url);
    const query = url.searchParams.get("query");
    if (!query) {
      return new Response(
        JSON.stringify({ error: "query is empty" }),
        { status: 400, headers: { "Content-Type": "application/json" } }
      );
    }
    const page = url.searchParams.get("page") || "1";
    const perPage = url.searchParams.get("per_page") || "10";

    // Make request to Unsplash API
    const unsplashUrl = `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&page=${page}&per_page=${perPage}`;
    
    const response = await fetch(unsplashUrl, {
      headers: {
        "Authorization": `Client-ID ${accessKey}`,
      },
    });

    if (!response.ok) {
      throw new Error(`Unsplash API error: ${response.status}`);
    }

    const data = await response.json();

    // Return the Unsplash API response
    return new Response(
      JSON.stringify(data),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    );
  }
});

Step 2: Frontend Integration

Call the edge function directly from your frontend. The API key stays secure on the server:

API Attribution

When using Unsplash API, you must provide proper attribution:
  • Display photographer name and link to their Unsplash profile
  • Include utm_source and utm_medium parameters in all links
  • Follow Unsplash API Guidelines