API authentication into getStaticPath()

Question

I'm having issues with API auth and getStaticPath(). I'm using Strapi on the backend. I have a page that shows a list of albums (no problem getting authenticated response from strapi) but for each album, I have an SSG page that uses getStaticPath().

My issue is that in order to get the different paths I need to fetch the API.

Here is my getStaticPath() :

export async function getStaticPaths({locales}) {


    const fetchAlbums = await fetch(`${process.env.DB_HOST}/api/albums?populate=*&locale=all`)
    const albumsData = await fetchAlbums.json();
    const albums = albumsData.data

    const paths = albums.map((album) => locales.map((locale) => ({
        params: {slug: album.attributes.slug},
        locale
    })))
        .flat()

    return {paths, fallback: false}
}

And here is the rest of my code just in case :

export async function getStaticProps({params, locale}, ctx) {

    const loginData = {

        identifier: process.env.DB_EMAIL,

        password: process.env.DB_PASSWORD,

    };

    const login = await fetch(`${process.env.DB_HOST}/api/auth/local`, {

        method: 'POST',

        headers: {

            Accept: 'application/json',

            'Content-Type': 'application/json',

        },

        body: JSON.stringify(loginData),

    });

    const loginResponseData = await login.json();


    const albumData = await getAlbumData(params.slug, locale, loginResponseData.jwt)

    return {
        props: {
            albumData
        }
    }
}

const useStyles = createStyles((theme) => ({
    image: {

        '@media (max-width: 900px)': {
            width: '100vw',
        },
    },
}));

export async function getStaticPaths({locales}) {


    const fetchAlbums = await fetch(`${process.env.DB_HOST}/api/albums?populate=*&locale=all`)
    const albumsData = await fetchAlbums.json();
    const albums = albumsData.data

    const paths = albums.map((album) => locales.map((locale) => ({
        params: {slug: album.attributes.slug},
        locale
    })))
        .flat()

    return {paths, fallback: false}
}

export default function AlbumDetails({albumData}) {


    const album = albumData['0'].attributes;
    const albumImage = album.image.data.attributes.url


    return (
        <Layout>
            <AlbumTitle name={album.name} image={albumImage} buy={album.buy} digital={album.digital} album={album}/>
            <div className={styles.infoContainer}>
                <div className={styles.description}>
                    <Reviews reviews={album.reviews.data}/>

                </div>
            </div>

            <MediaSeparator/>

            <Media media={album.video.data}/>


        </Layout>
    )

}

function AlbumTitle({name, image, album, buy, digital}) {
    const {classes} = useStyles();

    const locale = useRouter().locale;
    return (
        <div>

            <div className={styles.titleContainer}>
                <div className={styles.albumHeader}>
                    <div>
                        <div className={styles.albumCover}>
                            <Image className={classes.image}
                                   src={`${process.env.DB_HOST}${image}`}
                                // width={400}
                                // height={400}

                            />
                        </div>
                        <Listen spotify={album.spotify ? album.spotify : null} apple={album.apple ? album.apple : null}
                                deezer={album.deezer ? album.deezer : null}/>

                    </div>
                    <div className={styles.albumRightContainer}>
                        <h1 className={styles.albumName}>{name}</h1>

                        <AlbumInfos release={album.date.toString()} label={album.label} artists={album.artistes}/>
                        <p className={styles.albumDescription}>{album.description}</p>
                        <div className={styles.buttonContainer}>
                            <Menu menuButton={<MenuButton
                                className={style.buy}>{locale === 'en' ? ('BUY') : ('ACHETER')}</MenuButton>}>
                                <MenuItem className={styles.menuItem}>Guitar4Fan (CD)</MenuItem>
                                <MenuItem className={styles.menuItem}>BandCamp (Digital)</MenuItem>
                            </Menu>
                        </div>
                    </div>

                </div>


            </div>

        </div>

    )

How do I make authenticated API calls in getStaticPaths() in order to get my paths?