Skip to main content

Unsplash

This guide explains how to integrate the Unsplash API into your superun application. The integration uses an Edge Function to securely proxy all API requests, ensuring your API key is never exposed to the client.

Documentation

For more details on the Unsplash API, refer to the official documentation:

Environment Variables

Calling the SupabaseEdgeFunctionSecretsCreate tool will open the secrets configuration panel. The plugin_secret_prefix must be SUPERUN. In this panel, you can:
  • Use shared keys — superun provides ready-to-use shared test keys. Check the option to get started quickly without applying for your own keys.
  • Enter your own keys — For production use, enter your own API keys in the input fields.
Required secrets:
  • UNSPLASH_ACCESS_KEY - Unsplash Access Key

Step 1: Create an 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 variables
    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";

    // Send 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 the frontend. The API key is securely stored on the server.

API Attribution

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