Bookshelf API Authorisation

Developers
1

Heya,

I’m looking to fetch my bookshelf information with eleventy-fetch to use the bookshelf data in my Eleventy project. What token do I need to authenticate?

I have (I think I’m doing it right) tried with an App Token Micro.blog, but I get a (401): Unauthorized error.

2

That should work. You’re passing the token in an Authorization header? Is there anything more you can share about how the request is made from Eleventy?

1 Like
3

I’ve been piecing this together with existing examples in my project (I’m not 100% sure what I’m doing), and this is what I’ve got:

const EleventyFetch = require('@11ty/eleventy-fetch');
require('dotenv').config({ systemvars: true });

module.exports = async function () {
  const TOKEN = process.env.MICRO_BLOG_TOKEN;
  const bookshelfId = '17276'; // ID of the "finished reading" shelf

  const endpoint = `https://micro.blog/books/bookshelves/${bookshelfId}`;
  try {
    const response = await EleventyFetch(endpoint, {
      headers: {
        Authorization: `Bearer ${TOKEN}`,
      },
      duration: '1d', // Cache the response for 1 day
      type: 'json', // Parse JSON for you
    });

    if (!response.ok) {
      throw new Error(`Failed to fetch data. Status: ${response.status}`);
    }

    return response.json();
  } catch (error) {
    console.error('Error fetching and caching books:', error);
    return [];
  }
};

and the error:

Error fetching and caching books: Error: Bad response for https://micro.blog/books/bookshelves/17276 (401): Unauthorized
    at RemoteAssetCache.fetch (/home/flamed/Projects/ff-test/node_modules/@11ty/eleventy-fetch/src/RemoteAssetCache.js:76:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async run (/home/flamed/Projects/ff-test/node_modules/p-queue/dist/index.js:163:29) {
  [cause]: Response {
    size: 0,
    timeout: 0,
    [Symbol(Body internals)]: { body: [PassThrough], disturbed: false, error: null },
    [Symbol(Response internals)]: {
      url: 'https://micro.blog/books/bookshelves/17276',
      status: 401,
      statusText: 'Unauthorized',
      headers: [Headers],
      counter: 0
    }
  }
}
4

On first glance that looks exactly right. Can you double-check that process.env.MICRO_BLOG_TOKEN is set to the value you expect?

5

The token was generated from creating a new app “flamed fury” on the accounts/apps page Micro.blog and it has been copy/pasted across, no spaces or extra characters.

Everything looks as it should be.

6

According to Eleventy’s documentation, you must wrap the headers option inside a fetchOptions.

Also, notice that EleventyFetch will return the actual JSON data on a successful fetch, so code like response.ok and response.json() will fail (the response has already been converted to JSON for you).

1 Like
7

Thank you @sod that got me going in the right direction and I have my data in a json file!

  const endpoint = `https://micro.blog/books/bookshelves/${bookshelfId}`;
  try {
    const finishedBooks = await EleventyFetch(endpoint, {
      duration: '1d', // Cache the response for 1 day
      type: 'json', // Parse JSON
      fetchOptions: {
        headers: {
          Authorization: `Bearer ${TOKEN}`,
        },
      },
    });