NextAuth example works locally but fails on Zeit

[shea256]

Hey all,

In the NextAuth example (https://github.com/iaincollins/next-auth/tree/master/example), the file pages/auth/index.js has the following code:

import React from 'react'
import Router from 'next/router'
import { NextAuth } from 'next-auth/client'
import Layout from '../../components/layout'

export default class extends React.Component {
  
  static async getInitialProps({req}) {
    return {
      session: await NextAuth.init({req}),
      linkedAccounts: await NextAuth.linked({req}),
      providers: await NextAuth.providers({req})
    }
  }

  render() {
    ...
  }
}

This page works perfectly fine when running locally, but unfortunately fails when deployed to Zeit using now.

In the deployment, I get the following error:

I tried troubleshooting this to no avail.

I saw this note in the NextAuth documentation:

CSRF, Session and Linked Account endpoints are provided for Single Page Apps.

Based on this, I had a suspicion that NextAuth.linked and NextAuth.providers shouldn't be called on the server and should only be called on the client, so I modified the code to only call these functions on the client.

Unfortunately, this didn't fix the problem. The page still shows a server error when it is loaded on the client.

Would appreciate any help, and would be great to find out if this is an issue with NextAuth, Next.js, Zeit, or one of my minor modifications.

Thanks!

[lfades]

This is an issue with next-auth. That repo is not maintained or recommended by us so please create an issue in their repo instead 🙏

[shea256]

For reference, here is the cross-posting on the next-auth repo: nextauthjs/next-auth#96

[lfades]

We don't recommend next-auth for multiple reasons, one of those is that it's not compatible with ZEIT Now, it's outdated and it currently uses a custom server, which makes it incompatible.

We're also very into security, and because of that the example we currently recommend is the one with Auth0. Their company is very good at doing proper and secure authentication. We can't guarantee that with external packages.

[lfades]

In summary, next-auth can be updated to support serverless functions instead of a custom server, but that's currently not the case. To handle authentication check the Auth0 example I shared before, in where we worked together with Auth0.

We also have a passport example which shows very basic cookie authentication with API Routes in a statically optimized application, but it can't compare to the security added by Auth0.

[shea256]

@lfades Ah so it seems the custom server they have is the culprit. Thank you, that's very helpful. I will give the auth0 example a spin.

[shea256]

So I tried out this example and it seems ok. Unfortunately it requires a redirect to the Auth0 domain and then the domain of the OAuth provider and it requires you to use the full Auth0 auth window.

[iaincollins]

Hi @shea256

I am the lead maintainer of next-auth

I can confirm, as @lfades says, that this problem is indeed an issue next-auth v1 and not with to Next.js or now.sh. NextAuth.js v1 was created for now.sh v1 and is not compatible with now.sh from Vercel today and does not take advantage of features in recent versions of Next.js.

There is some good news though!

You might want to check out next-auth.js.org for the beta of v2 or check out next-auth-example.now.sh for a demo.

• Supports Next.js 9+ and Serverless
• Much easier to set up and use than v1
• Supports many popular providers, including Auth0
• Install it will npm next-auth@beta

NextAuth.js v2 is an open source community project. It's currently in beta and the current release candidate is looking good so far and we expect to release v2 out of beta in later this week. 🤞