title: How do I get the next-auth session with getStaticPaths and getStaticProps in dynamic routing?
body: <p>I'm trying to implement dynamic routing in a NextJS app. I need the token from next-auth to get the data from getReport and getReports (in /reports.js) via an axios request to an API, but I don't know how to get it. It works when I try it with the token hard coded in [itemId].js, so the routing is working fine (I think).</p>
  <p>Since getStaticPaths and getStaticProps runs on the server, I tried using getSession(), but I'm not sure if it doesn't work or I didn't used it correctly, but I could never get the session. Using getSession() would be the preferable option for me.</p>
  <p>I also tried saving it in localStorage, but getStaticProps can't access localStorage.</p>
  <p>I'm thinking of using Redux, but I'd really like to avoid it.</p>
  <p>Here is my code:</p>
  <p><strong>/pages/user/reports/[reportId]/[itemId].js</strong></p>
  <pre><code>import { useSession } from &quot;next-auth/react&quot;;
  import { useLayoutEffect } from &quot;react&quot;;
  import Loading from &quot;../../../../components/Loading&quot;;
  import Layout from &quot;../../../../components/user/layout/Layout&quot;;
  import { getAllReportsIds, getReportItem } from &quot;../../../../components/user/reports&quot;;
  
  const token = 'here is currently the token'
  
  export default function Report({ reportItem }) {
    return (
      &lt;Layout&gt;
        {/* Start Page Header */}
        &lt;div className=&quot;page-header&quot;&gt;
        &lt;h1 className=&quot;title&quot;&gt;{ reportItem.name }&lt;/h1&gt;
          &lt;ol className=&quot;breadcrumb&quot;&gt;
            &lt;li className=&quot;active&quot;&gt;{ reportItem.description }&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/div&gt;
        {/* End Page Header */}
  
        {/* START CONTAINER */}
        &lt;div className=&quot;container-padding&quot;&gt;
  
          {/* Start Row */}
          &lt;div className=&quot;row&quot;&gt;
  
            {/* Start Panel */}
            &lt;div className=&quot;col-md-12&quot;&gt;
              &lt;div className=&quot;panel panel-default&quot;&gt;
                
                &lt;div className=&quot;panel-body&quot;&gt;
                  &lt;div className=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
                    &lt;iframe title=&quot;Reporte&quot; className=&quot;embed-responsive-item&quot; src={reportItem.code} allowFullScreen&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                
              &lt;/div&gt;
            &lt;/div&gt;
            {/* End Panel */}
          
          &lt;/div&gt; 
          {/* End Row */}
  
        &lt;/div&gt;
        {/* END CONTAINER */}
      &lt;/Layout&gt;
    )
  }
  
  export async function getStaticPaths() {
    const paths = await getAllReportsIds(token)
    return {
      paths,
      fallback: false
    }
  }
  
  export async function getStaticProps(context) {
    console.log('context en static props: ', context)
    try {
      const reportItem = await getReportItem(token, context.params.reportId, context.params.itemId)
      return {
        props : {
          reportItem
        }
      }
    } catch(error) {
      console.log('error: ', error)
      return {
        props : {
          error: true
        }
      }
    }  
  }
  </code></pre>
  <p><strong>/components/user/reports.js</strong></p>
  <pre><code>import { getReport, getReports } from &quot;../../pages/api/axios/reports&quot;;
  
  export async function getAllReportsIds(token) {
    try {
      const { data } = await getReports(token)
      let reportIds = []
      reportIds = data.flatMap(report =&gt; {
        return (
          report.report_items.map(item =&gt; {
            return {
              params: {
                reportId: JSON.stringify(report.id),
                itemId: JSON.stringify(item.id)
              }
            }
          })
        )
      })
      return reportIds
    } catch(error) {
      console.log('error: ', error)
    }
  }
  
  export async function getReportItem(token, reportId, itemId) {
    try {
      const { data } = await getReport(token, reportId)
      let reportItem = {}
  
      data.report_items.map(item =&gt; {
        if (JSON.stringify(item.id) === itemId) {
          reportItem = item
        }
      })
      return reportItem
    } catch(error) {
      console.log('error: ', error)
    }
  }
  </code></pre>
  <p>If anyone can help, it would be really appreciated.</p>