在无服务器功能上使用 Auth0（使用 Passport.js）的 Next.js

Question

Usually authentication isn't a big deal with auth0 and Lock.js, but it's a little tricky with Next.js and SSR. I decided to try passport.js based on a tutorial I found ( nextjs-passport ).

I want to deploy this to Firebase, so I don't have an express server available. Passport should work with the custom callback as well, but I'm only getting a blank page and no errors.

Anyone had more luck implementing Auth0 authentication with the latest Next.js?

/pages/login.js

import React from 'react'

export default () => (
  <form action='/api/login' method='post'>
    <div className='field'>
      <p className='control has-icons-left has-icons-right'>
        <input className='input' name='email' type='email' placeholder='Email' />
      </p>
    </div>
    <div className='field'>
      <p className='control has-icons-left'>
        <input className='input' name='password' type='password' placeholder='Password' />
      </p>
    </div>
    <div className='field'>
      <p className='control'>
        <input type='submit' className='button is-success' />
      </p>
    </div>
  </form>
)

/pages/api/login.js

import passport from 'passport'
import Cors from 'micro-cors'

const cors = Cors({
  allowedMethods: ['POST', 'HEAD']
})

function Login (req, res, next) {
  return passport.authenticate('auth0', {
    scope: 'openid email profile',
    successRedirect: '/',
    failureFlash: true,
    failureRedirect: '/login'
  }, function (err, user, info) {
    console.log(err, user, info)
    if (err) { return next(err) }
    if (!user) { return res.redirect('/login') }
    req.logIn(user, function (err) {
      if (err) { return next(err) }
      return res.redirect('/users/' + user.username)
    })
  })(req, res, next)
}

export default cors(Login)

Answer 1

I'm making the assumption that you want to use Nextjs on Now V2 so that it is serverless. If that is not the case, my answer probably won't help you.

I just made a minimal repo for Auth0 and Nextjs serverless.

You were on the right track realizing that Next.js Authentication Tutorial uses express to extend the Nextjs server, but since we are in serverless world the authentication needs to be abstracted to an api. It looks like you started that, but you didn't put a full express server in the api. In my repo, my auth lambda is ./auth/auth.js. For the above repo, the user data is called in the HOC located in ./utils/withAuth.js.

I hope that helps!