-
Notifications
You must be signed in to change notification settings - Fork 27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
401 error when using a variable from .env.local as the accessToken value #3
Comments
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. |
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:
You could also try and implement a proxy like the one Sam suggested. We hope this doesn’t complicate much your development process. |
Thank you for your help! I ended up removing them as it's not crucial for my use case. |
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 fromhomepageToolbarDocs
andpageToolbarDocs
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?The text was updated successfully, but these errors were encountered: