Authentification Strapi with Next.JS

Question

I have an app that uses Strapi Rest API and Next.JS

It works fine but before I deploy I wanted to use authentification between Strapi and the Frontend.

I have been using this reference . I'm trying to use the method using Nookie.

I'm not having much luck so far, I'm unsure where I should implement auth in my index.js

here is my current index.js with no auth :

export async function getStaticProps({params, locale}) {
    const albumData = await getAlbumData(params.slug, locale)
    console.log('albumDATA')
    console.log(albumData)
    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 className={styles.titleBackground} style={headerStyle()}>
        <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>

        </div>

    )
}

and here is my auth attempt that returns a 403

export async function getStaticProps({locale}, ctx) {
    const jwt = parseCookies(ctx).jwt
    if (jwt) {
        const blogs = await getBlogPosts({locale});

        // get posts from strapi REST API

        return {

            props: {
                blogs


            }
        }
    }
    const loginData = {

        identifier: process.env.DB_EMAIL,

        password: process.env.DB_PASSWORD,

    }
    console.log('----AUTH-----')
    console.log(`${process.env.DB_HOST}/api/auth/local`)

    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();

    setCookie(ctx, 'jwt', loginResponseData.jwt, {

        maxAge: 30 * 24 * 60 * 60,

        path: '/',

    })

    const blogs = await getBlogPosts({locale});


    return {

        props: {
            blogs


        }
    }






}

export default function Home({blogs}, locale) {
console.log(`Current locale is : ${{locale}}`)
  return (

    <Layout>
      <Head>
        <title>{siteTitle}</title>

      </Head>

      <Jumbotron/>
      <main className={styles.main}>
          <BlogContainer blogs={blogs}/>
          <ShortBio/>
          <Presentation/>
          <ListenSeparator/>
          <div className={styles.mainVideo}>
            <ReactPlayer url={'https://www.youtube.com/watch?v=dmMRsHp725s'} width={'100%'} height={'100%'} controls/>
          </div>
      </main>


    </Layout>
  )
}

I can't figure out my error