Authentication and getStaticProps in Next.js

[jkjustjoshing]

I'm forcing authentication in my getInitialProps function in _app.js. If auth token doesn't exist, I stop rendering the page and do a 302 redirect to the login page.

I'm trying out getStaticProps, and this prevents my _app.js getInitialProps function from running.

Besides running a custom Express server wrapping my Next.js app, is there a way to take advantage of getStaticProps but also prevent access for unauthenticated users?

[zephraph]

You could try creating a wrapper for getStaticProps. That's what I'm doing for a side app at @artsy.

There's an authorizedPage wrapper which wraps calls to getStaticProps on pages where we want auth. It's not as nice as an automatic method, but it works well enough.

Next steps might be to write a babel plugin that always wraps the getStaticProps method with the auth wrapper.

[jkjustjoshing]

I think you're confusing getStaticProps and getServerSideProps. getStaticProps runs at build time, and won't know about auth. getServerSideProps runs at runtime, and can know about auth. Your wrapper is wrapping getServerSideProps, not getStaticProps.

[ingoclaro]

maybe this can work for you: #11334 (reply in thread)

[timneutkens]

I wrote down a detailed guide on what we do for vercel.com/dashboard here: #10724
(The dashboard is 100% static).

[Hewlbern]

I'm having the same issue. Authentication and next.js is weirdly difficult

[rafinskipg]

@jkjustjoshing maybe this can help you

I am doing something like this

export async function getServerSideProps({ req, res, query }) {
  const contentTypeDefinition = getContentTypeDefinition(query.type)
   // This content does not exist in db
  if (!contentTypeDefinition) {
    res.writeHead(302, { Location: '/404' })
    res.end()
    return
  }
  // Connect to DB (this could be a middleware)
  await connect()

  try {
   // Run permission check
    await runMiddleware(req, res, hasPermissionsForContent(query.type))
  } catch (e) {
    // User can not access
    res.writeHead(302, { Location: '/404' })
    res.end()
    return
  }