[401] status code when using token and routes in Prismic client options

Developing with Prismic
1

We recently switched our Prismic repo to Private mode after generating the access token in the dashboard.

In our Prismic configuration, we are exporting our client as so:

import Prismic from 'prismic-javascript';

export const Router = {
  routes: [
    { type: 'page', path: '/:uid' },
    { type: 'blog', path: '/blog/:uid' },
  ],
  href: (type) => {
    const route = Router.routes.find((r) => r.type === type);
    return route && route.href;
  },
};

export const Client = (_req = null, options = {}) => {
  options = {
    ...options,
    accessToken: accessToken,
  };
  return Prismic.client(apiEndpoint, { routes: Router.routes, ...options });
};

When created in this manner, we get the error

Error: Unexpected status code [401] on URL https://<REDACTED>.cdn.prismic.io/api/v2?access_token=<REDACTED>?routes=%5B%7B%22type%22%3A%22page%22%2C%22path%22%3A%22%2F%3Auid
%22%7D%2C%7B%22type%22%3A%22blog%22%2C%22path%22%3A%22%2Fblog%2F%3Auid%22%7D%5D

I noticed in the link above, the routes querystring parameter is preceded by the ? and not an &, so it has 2 ?'s in that querystring. Also, it appears the routes are double encoded.

If I remove the Routes from the client, the request works. Also, if I switch the ?routes to &routes and single encode the parameter, it also works:

https://<REDACTED>.cdn.prismic.io/api/v2?access_token=<REDACTED>&routes=[{"type"%3A"page"%2C"path"%3A"%2F%3Auid"}%2C{"type"%3A"blog"%2C"path"%3A"%2Fblog%2F%3Auid"}]

https://<REDACTED>.cdn.prismic.io/api/v2?access_token=<REDACTED>

Am I creating the client and Routes incorrectly?

6

Hi Pete,

Welcome to the community!

I'll be happy to help you debug this. So it's definitely the extra ? character breaking the request.

I'll be honest I'm not totally sure why it's happening, but I'm guessing you might need to use the object.assign function as we do in our next.js example.

Let me know if this helps, if not we'll explore further.

Thanks.

7

Hi Phil,

thanks for responding. I tried your suggestion with the Object.assign, but unfortunately it did not help the issue. I'm still getting the same error:

...
export const Client = (_req = null, options = {}) =>
  Prismic.client(
    apiEndpoint,
    Object.assign(
      { routes: Router.routes },
      { accessToken: accessToken },
      options
    )
  );

receiving:

Error: Unexpected status code [401] on URL https://<REDACTED>.cdn.prismic.io/api/v2?access_token=<REDACTED>?routes=%5B%7B%22path%22%3A%22%2F%3Auid%22%2C%22type%22%3A%22page
%22%7D%2C%7B%22path%22%3A%22%2Fblog%2F%3Auid%22%2C%22type%22%3A%22blog%22%7D%5D

We are using version 3.0.2 of prismic-javascript.

Pete

8

Can you try updating to version 5 and importing it as so:

import Prismic from "@prismicio/client";

Also from your above example shouldn't it be:

Object.assign(
      { routes: Router.routes },
      { accessToken: options.accessToken },
      options
    )
9

Thanks Phil!

Updating to the prismicio/client V5 solved the issue.

Thanks for the help!

Pete

1 Like
10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.