How can I use getStaticPaths with an authenticated external API in Next.js and Auth0?

Question

I'm trying to use getStaticPaths to generate dynamic page routes in my Next.js application. However, in order to call my external API, I need to pass a Bearer token for authentication purposes. I'm using Auth0 for authentication and was wondering how to achieve this in my getStaticPaths function?

Here's my current code for getStaticPaths:

export async function getStaticPaths() {
  const res = await fetch('https://myapi.com/projects')
  const projects = await res.json()

  const paths = projects.map((project) => ({
    params: { id: project.id },
  }))

  return { paths, fallback: false }
}

I need to add the Bearer token to the request headers in order to successfully authenticate with my external API. How can I achieve this using the Auth0 Next.js library?

Thanks for any help!

score 0 · Answer 1 · answered Mar 05 '23 at 04:35

 const Token = await //here call your api and get the token 
 const res = await fetch('https://myapi.com/projects', {
    headers: {
      Authorization: `Bearer ${Token}`,
    },
  });

you can make an async function to get your token from the api

async function getToken () {
     //call you api here 

     return Token

}

and now you can say

const Token  = await getToken()

How can I use getStaticPaths with an authenticated external API in Next.js and Auth0?

1 Answers1