Unexpected status code 401

Hey all,

I’m trying to fetch some data from my Prismic repository using Next.js with useEffect within the ‘index.js’ page. However, I’m encountering the following error:

Error: Unexpected status code [401] on URL https://kevinsoenandar.cdn.prismic.io/api/v2 at eval (prismic-javascript.mjs?de0c:1089)

index.jsx code

const router = useRouter();
const modalOpen =
    router.asPath !=
    '/'; /* if the asPath = /experience/company-name, then open the modal */

const [experience, setExperience] = useState({});
const uid = router.asPath.split('/')[2];

useEffect(() => {
    modalOpen ? 
    client.getByUID('experience', uid)
        .then(res => {
            const data = {
                companyName: res.data.company_name,
                startDate: res.data.start_date,
                endDate: res.data.end_date,
                location: res.data.location,
                jobTitle: res.data.job_title,
                shortDesc: res.data.short_desc,
                longDesc: res.data.long_desc,
            }
            console.log(data);
            setExperience(data)
        })
        .catch(err => {
            console.log(err);
        }) :
    setExperience({})
}, [modalOpen]);

client setup code

const apiEndPoint = 'https://kevinsoenandar.cdn.prismic.io/api/v2';
const accessToken = process.env.PRISMIC_TOKEN;
export const client = Prismic.client(apiEndPoint, { accessToken });

Not sure why it doesn’t work on the index page. I have the exact same query (fetching different document) in another page as part of the getInitialProps function and it works perfectly. I’ve also tried different things, including using Predicates.at instead of query.getByUID and it didn’t work either.

Any help is appreciated.

Cheers
Kevin

HI @kevin.soenandar. At first glance, I’m not sure what the issue might be. It seems like this should work.

I’d like to take a closer look at your project and see if I can replicate the issue here. Can you share your project code with me so that I can investigate. You can send either a zip file of your code or a link to github. If you don’t want to share it publicly, you can send it in a direct message to me.

@kevin.soenandar I can see the direct message you sent to me. I’ll take a look today and get back to you with what I find.

@kevin.soenandar I’m running your project locally, but I’m unable to reproduce the 401 error. Can you can send me a list of steps I need to take to reproduce the issue?

Thanks @levi. The code refers to when I open the modal in the timeline section of the homepage. By clicking ‘read more’ in one of the experience cards, I was expecting the component to pull the data from Prismic but it returns error code 401. Could you please try that?

@kevin.soenandar Oh okay. I tried it and it was working for me. The data is being fetched from Prismic and displayed in the modal. The only change I made was to hardcode the access token in the prismic.js file. Maybe that’s the source of your issue?

Hey @levi, thanks for checking that. I don’t think that would be it. If you see the index.js file, I used getStaticProps that pull the data using the client object from the prismic.js file and it works there. I also used the same client object in other pages and it works. Any other ideas?

@kevin.soenandar Can you try hardcoding your access token just to see if it works for you as well? In the meantime I’ll keep exploring and see if I can figure out why this isn’t working.

@levi - you’re right, hardcoding the token does fix it! However, this is obviously not a production-suitable solution. Please let me know if you find the real source of the bug.

Thanks so much for your help!

@levi - figured it out. Turns out .env variable in Next.js is only exposed to the server by default. I needed to add NEXT_PUBLIC to be able to expose it to the client. Once I’ve done that, it works flawlessly. Thanks for looking into this!

1 Like

@kevin.soenandar I’m happy to hear that you were able to sort this out :grinning: