Getting started

Integration & migration

Image & video API

DAM user guide

API overview


Integrate Firebase Storage with

Connect Firebase Storage as an external storage with ImageKit to get real-time image and video optimization and transformation capabilities in minutes.

You can add your existing Firebase storage as an origin in This allows you to use's real-time optimization, transformation, and streaming features on all existing images and videos in your storage. With this integration, you will also be able to deliver non-media files like JS, CSS, and more.

Before continuing, understand how external storage integration works, what is URL endpoint, and how to troubleshoot 404 errors.

Step 1: Configure origin

  1. Go to the External storage section in your dashboard, and click on the "Add new" button.
  2. Choose Web server from the origin type dropdown.
  3. Give your origin a name. It will appear in the list of origins you have added. For example - My Firebase Storage.
  4. Enter in the base URL field.
  5. Leave the advanced options as it is for now.
  6. Click on the Save button.

Step 2: Access the file through URL-endpoint

When you add your first external source (origin) in the dashboard, the origin is, by default, made accessible through the default URL endpoint of your account. For subsequent origins, you can either create a separate URL endpoint or edit the existing URL endpoint (including default) and make this newly added origin accessible by editing the origin preference list.

So when you request{TOKEN}, internally fetches the file from{TOKEN}

            URL endpoint                transformation      file path

Let's look at a few examples of how to fetch an image file. The same would work for other file types as well.

If you get a "Not found" error while accessing the file, check out this troubleshooting guide.


You can also use a custom domain like

Step 3: Integrate and Go live

To start using the URL endpoint in your application, you must replace the base URL of files in your application code. Here are the steps and code samples:

  1. Get the Firebase URL for the asset by calling .getDownloadURL() method on the storage reference.
  2. In the above download URL, replace with your URL endpoint.
storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'
  // Replace the firebase URL with URL endpoint
  url = url.replace("","");

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };'GET', url);

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors

Helpful links: