401 error when using a variable from .env.local as the accessToken value

[FrancoisLeclerc]

Hi! Thanks for sharing this great starter kit! The only thing is I'm having an issue with a 401 error when I use a variable from .env.local as the accessToken value in the prismic-configuration.js

// -- Access Token if the repository is not public // Generate a token in your dashboard and configure it here if your repository is private accessToken: '',
The problem with this is that if I add my private accessToken here it will be available in the browser.
So I created a .env.local file with my accessToken in it and added it to the prismic-configuration.js this way instead:

// -- Access Token if the repository is not public // Generate a token in your dashboard and configure it here if your repository is private accessToken: 'process.env.PRISMIC_API_TOKEN',
But I'm getting this error:
GET https://my-website.cdn.prismic.io/api/v2 401

Also to note that the error is gone when I prefix my .env.local variable with NEXT_PUBLIC_
https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

Confirming that the accessToken is needed in the browser for the code to work. I found that the Client function which needs the accessToken is being called from homepageToolbarDocs and pageToolbarDocs and both are used inside their respective components causing the error. I'm not sure but maybe there is another way to update the prismic toolbar?

[samlfair]

Hey @FrancoisLeclerc,

Thanks for posting this issue. Just FYI, for questions like this, you can always use the Prismic Community Forum. We monitor discussion on the forum more actively than on GitHub.

Unfortunately, there is no easy way to use a private repo with client-side routing. With Next projects, API requests are made client-side, so your API key will be exposed.

The only workaround would be to create your own API to proxy requests from your Next app to the Prismic API. More info in this article.

[pvpg]

Hello @FrancoisLeclerc. Thank you for letting us know about this and for sharing your solution.

Indeed, environment variables work correctly if you do not make those extra calls to Prismic on the client-side. As Sam said before, this is the only available option to make the toolbar work properly in Next.js.

The toolbar works like this; when it is active, it is always waiting or ‘listening’ to queries made to a Prismic endpoint from every page. This is how you get the documents for each displayed page and a link that redirects you to the correct document within the repository. This is not possible in Next as everything is done at build time. Static pages make no calls to Prismic. And that’s the reason why we built a method that makes these needed calls even when every page is already rendered. Being so, you have two options:

1. If you don’t need to use the edit button, you can remove the functions pageToolbarDocs and homepageToolbarDocs prismicToolbarQueries.js file altogether. As their only function is to load queries used in the Toolbar, you can remove them without any problem.

2. If you want to use the edit button: You’re going to have to expose the API token using the NEXT_PUBLIC variable name that you mentioned before. For the time being, these are the two feasible options.

You could also try and implement a proxy like the one Sam suggested. We hope this doesn’t complicate much your development process.

[FrancoisLeclerc]

Thank you for your help! I ended up removing them as it's not crucial for my use case.