Storyblok API Token in

[tailwindtom]

Hi Storyblok team

I'm trying to follow best practices by not exposing my Storyblok API token to the frontend, and I want to keep it strictly server-side.

However, when using the Next.js + Storyblok blueprint and setting up the API as follows:

import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";

export const getStoryblokApi = storyblokInit({
accessToken: process.env.STORYBLOK_DELIVERY_API_TOKEN,
use: [apiPlugin],
components: {},
});
...I get this error in the console:

You need to provide an access token to interact with Storyblok API.
Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication

I confirmed that process.env.STORYBLOK_DELIVERY_API_TOKEN is defined and working

The issue only occurs unless I rename the variable to NEXT_PUBLIC_STORYBLOK_TOKEN, which I don't want to do for security reasons.

I'm using your boilerplate and didnt change anything.

[drazenbebic]

Same problem here. As someone who has worked with Storyblok for a long time it's still completely unclear to me how to safely embed the preview token so that I can use live editing. I found various docs and sources over the past few months, the SDK also evolved dramatically and there just isn't a single, valid source of truth.

As a workaround I have hardcoded the preview token in my GitHub repo. IIRC I once found a GitHub issue related to this where someone said it's completely fine to do it like that.

So how do we safely embed the preview token so that the site works both at build and run time?

[Johann01]

We got the same issue and was looking for a working example from the storyblok team. I have no idea how the initialization is can still be unclear.

[dipankarmaikap]

Hey @tailwindtom , if you prefer not to expose the Storyblok preview access token in your bundle, you'll lose the live preview functionality. In that case, content updates will only reflect on save, which is fine if you're building a fully SSR app. You can simply remove the StoryblokProvider from your layout.