Route resolver returns 401

Technologies Nuxt.js
#1

I am trying to use the new routes resolver by adding this in my nuxt.config.js:

prismic: {
  endpoint: process.env.PRISMIC_URL,
  apiOptions: {
    accessToken: process.env.PRISMIC_API_KEY,
    routes: [
      {
        type: 'page',
        path: '/:lang/:uid'
      }
    ]
  },
  disableGenerator: false
}

It doesn't seem to work well though since I keep getting error 401 (Unexpected status code [401] on URL ... and Failed to init Prismic API, preventing app fatal error.).

How do I fix this?

#2

Hi Julian,

Since this is a 401 and is related to authorisation, I'm guessing it's because the access token field isn't defined liked it is here:

It should be

access_token

not

accessToken

Though I could be wrong. So please try this out.

Thanks.

#4

That was my thought as well, but I'm still getting 401

#5

Also is this a Slicemachine project? Because you will need to have Slicemachine activated on your repo to have access to the route resolver.

#6

Yes and it is activated on the repo

#7

The error says Invalid access token, but it works when I remove the routes array.

#8

What happens if you make your repo access public?

#9

Edit: It works again if I remove the routes array and change it back to accessToken without the _.

I get 400/404 when making it public, but that could just be me not setting it up properly. No 401 though.

#10

I'm not sure in that case. Are you using Graphquery anywhere in this project?

Did you define the page document like so? ~/pages/_lang/_uid.vue like we do in the multi-language example:

You don't really need the route resolver for the above URL structure anyway. You could just use the link resolver like we do in that project.

#11

Yep, im using a copy of that project.

I do need the route resolver though, since I need to make deeper nested routes eventually.

My best guess is that the routes array doesn't seem happy about having siblings in the apiOptions. Which basically means you can't have a private repo if you want to use the slice machine.

#12

I do not use Graphquery anywhere.

#13

OK, So it seems your thought about not being able to have these 2 apiOptions at the same time is correct. I talked with the team and it's an issue in that we don't pass the parameters correctly in the prismic-javacript library so it causes this error.

I've talked with the team and apparently they have been working on a fix for this already. We are going to discuss this further tomorrow as to how we can get the fix out there.

It won't be available right away, so for now you won't be able to have a private repo with the routes features. If/when I have any update on this I'll let you know here.

1 Like
#14

The fix for this is being reviewed and tested. Once it's shipped we'll update you here.

#16

Hey @juliandreas,

The fix was published for this a long time ago apparently, are your dependencies up to date?

My bad on the communication.

This fix is here:

Maybe the nuxt kit isn't using this version. I'm confirming with the team.

#17

The nuxt kit should be using the apparently, trying update you nuxt/prismic module.

#18
#19

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

#20
#22

Hello Phil,

I saw your answer now and I havn't had time to try this out before now.

It's still not working for me. As soon as I make the repo private I get 401.

65ba267eff713790754c609130473a42ab167275

These are my dependencies:

"dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/prismic": "^1.2.6",
    "@prismicio/client": "^4.0.0",
    "@prismicio/vue": "^2.0.11",
    "cookies": "^0.8.0",
    "nuxt": "^2.15.3",
    "prismic-dom": "^2.2.4"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/svg": "^0.1.12",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.0",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "node-sass": "^5.0.0",
    "nodemon": "^2.0.7",
    "postcss": "^8.1.10",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-url": "^10.1.1",
    "sass-loader": "^10.1.1"
  }

This is in my nuxt.config.js:

prismic: {
    endpoint: process.env.PRISMIC_URL,
    apiOptions: {
      accessToken: process.env.PRISMIC_API_KEY
    },
    disableGenerator: true
  },

Inside the .env-file I have the API-key PRISMIC_API_KEY=EXAMPLE. Everything else inside the .env works fine.

Are you guys sure it's really working for Nuxt?

#23

I havn't yet tried the accessToken together with routes, which was the original problem.