URL Signing

When elements fetch media from Editframe's CDN they need an access token. Rather than exposing your API key in the browser, you provide a signingUrl — a server-side endpoint on your own backend. Elements call it automatically whenever they need to access a protected resource; you never construct or manage tokens manually.

Configure elements

Pass the signing URL as an attribute on ef-configuration:

<ef-configuration signing-url="/api/signing-url">
  <ef-timegroup>
    <ef-video src="https://cdn.editframe.com/files/fil_abc123"></ef-video>
  </ef-timegroup>
</ef-configuration>

In React, use the Configuration component:

import { Configuration, TimelineRoot } from "@editframe/react";

export default function App() {
  return (
    <Configuration signingUrl="/api/signing-url">
      <TimelineRoot id="root" component={MyComposition} />
    </Configuration>
  );
}

Token fetches are deduplicated and cached for the lifetime of the token — elements will not re-sign the same resource on every render frame.

Your signing endpoint

The endpoint receives a POST from elements and must return { token: "..." }. Your server uses your API key to call the Editframe signing API and return the result.

Request body

{ url: string; params?: Record<string, string> }

url is the Editframe resource URL being requested. Inspect it to decide whether the caller is allowed access before issuing a token.

app.post("/api/signing-url", authenticate, async (req, res) => {
  const { url } = req.body;

  // Verify the current user is allowed to access this resource
  if (!currentUserCanAccess(req.user, url)) {
    return res.status(403).end();
  }

  // Call the Editframe signing API and return the token
});