How to create a protected download area?

By default the assets uploaded in Storyblok are accessible by anyone that has the link to it. Sometimes you want to restrict the access to only logged in users, make a protected download area or only make the asset available at a specific time. For all that cases you can use the “Private” option at the upload modal to make the assets only available via a preview token. To generate a url for the user you need to call the assets endpoint with the filename and the preview token like in this example:

https://api.storyblok.com/v2/cdn/assets/me?token=OfzlwoHaa80XdPhHSqMvDwtt&filename=https://a.storyblok.com/f/135435/x/f47bdaee3e/sample.pdf

So to sumarize here are the steps you need to follow:

Step 1: Go to the asset manager, upload a single asset and choose “Private” at the visibility settings.

Private asset

Step 2: Create a preview token in the space settings

Img

Step 3: Create an endpoint in your backend that hides the preview token from the unauthorized users and send the signed_url as download link.

Following an example in Javascript:

const StoryblokClient = require('storyblok-js-client')

let Storyblok = new StoryblokClient({
  accessToken: 'OfzlwoHaa80XdPhHSqMvDwtt'
})

let getSignedUrl = function(filename) {
  let response = await Storyblok
  .get('cdn/assets/me', {
    filename: filename
  })

  return response.data.asset.signed_url
}

console.log(getSignedUrl('https://a.storyblok.com/f/135435/x/f47bdaee3e/sample.pdf'))