title: Authentification Strapi with Next.JS
body: <p>I have an app that uses Strapi Rest API and Next.JS</p>
  <p>It works fine but before I deploy I wanted to use authentification between Strapi and the Frontend.</p>
  <p>I have been using <a href="https://strapi.io/blog/implementing-authenticated-api-requests-to-strapi" rel="nofollow noreferrer">this reference</a> . I'm trying to use the method using Nookie.</p>
  <p>I'm not having much luck so far, I'm unsure where I should implement auth in my index.js</p>
  <p>here is my current index.js with no auth :</p>
  <pre><code>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) =&gt; ({
      image: {
  
          '@media (max-width: 900px)': {
              width: '100vw',
          },
      },
  }));
  
  export async function getStaticPaths({locales}) {
      const fetchAlbums = await fetch(`${process.env.DB_HOST}/api/albums?populate=*&amp;locale=all`)
      const albumsData = await fetchAlbums.json();
      const albums = albumsData.data
  
      const paths = albums.map((album) =&gt; locales.map((locale) =&gt; ({
          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 (
          &lt;Layout&gt;
              &lt;AlbumTitle name={album.name} image={albumImage} buy={album.buy} digital={album.digital} album={album}/&gt;
              &lt;div className={styles.infoContainer}&gt;
                  &lt;div className={styles.description}&gt;
                      &lt;Reviews reviews={album.reviews.data}  /&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;MediaSeparator/&gt;
  
              &lt;Media media={album.video.data}/&gt;
  
  
  
  
          &lt;/Layout&gt;
      )
  
  }
  
  function AlbumTitle({name, image, album, buy, digital}) {
      const { classes } = useStyles();
  
      const locale = useRouter().locale;
      return (
          // &lt;div className={styles.titleBackground} style={headerStyle()}&gt;
          &lt;div &gt;
  
              &lt;div className={styles.titleContainer} &gt;
                  &lt;div className={styles.albumHeader}&gt;
                      &lt;div&gt;
                          &lt;div className={styles.albumCover}&gt;
                              &lt;Image className={classes.image}
                                     src={`${process.env.DB_HOST}${image}`}
                                     // width={400}
                                     // height={400}
  
                              /&gt;
                          &lt;/div&gt;
                          &lt;Listen spotify={album.spotify ? album.spotify : null} apple={album.apple ? album.apple : null} deezer={album.deezer ? album.deezer : null}/&gt;
  
                      &lt;/div&gt;
                      &lt;div className={styles.albumRightContainer}&gt;
                          &lt;h1 className={styles.albumName} &gt;{name}&lt;/h1&gt;
  
                          &lt;AlbumInfos release={album.date.toString()} label={album.label} artists={album.artistes} /&gt;
                          &lt;p className={styles.albumDescription}&gt;{album.description}&lt;/p&gt;
                          &lt;div className={styles.buttonContainer}&gt;
                      &lt;Menu menuButton={&lt;MenuButton className={style.buy}&gt;{locale === 'en' ? ('BUY') : ('ACHETER')}&lt;/MenuButton&gt;}&gt;
                          &lt;MenuItem className={styles.menuItem}&gt;Guitar4Fan (CD)&lt;/MenuItem&gt;
                          &lt;MenuItem className={styles.menuItem}&gt;BandCamp (Digital)&lt;/MenuItem&gt;
                      &lt;/Menu&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
  
                  {/*&lt;/div&gt;*/}
  
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      )
  }
  </code></pre>
  <p>and here is my auth attempt that returns a 403</p>
  <pre><code>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: &quot;POST&quot;,
  
          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 (
  
      &lt;Layout&gt;
        &lt;Head&gt;
          &lt;title&gt;{siteTitle}&lt;/title&gt;
  
        &lt;/Head&gt;
  
        &lt;Jumbotron/&gt;
        &lt;main className={styles.main}&gt;
            &lt;BlogContainer blogs={blogs}/&gt;
            &lt;ShortBio/&gt;
            &lt;Presentation/&gt;
            &lt;ListenSeparator/&gt;
            &lt;div className={styles.mainVideo}&gt;
              &lt;ReactPlayer url={'https://www.youtube.com/watch?v=dmMRsHp725s'} width={'100%'} height={'100%'} controls/&gt;
            &lt;/div&gt;
        &lt;/main&gt;
  
  
      &lt;/Layout&gt;
    )
  }
  </code></pre>
  <p>I can't figure out my error</p>