javascript - Next.js with Auth0 (using Passport.js) on Serverless Function

Question

通常身份验证对于 auth0 和 Lock.js 来说不是什么大问题，但对于 Next.js 和 SSR 来说有点棘手。我决定根据找到的教程 ( nextjs-passport ) 试用 passport.js。

我想将它部署到 Firebase，所以我没有可用的快速服务器。 Passport 也应该与自定义回调一起使用，但我只得到一个空白页面并且没有错误。

有人更幸运地使用最新的 Next.js 实现 Auth0 身份验证吗？

/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

我假设您想在 Now V2 上使用 Nextjs，以便它是无服务器的。如果不是这样，我的回答可能对您没有帮助。

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

您意识到 Next.js Authentication Tutorial 是在正确的轨道上使用 express 扩展 Nextjs 服务器，但由于我们处于无服务器世界中，因此需要将身份验证抽象为 api。看起来你开始了，但你没有在 api 中放置一个完整的快速服务器。在我的 repo 中，我的 auth lambda 是 ./auth/auth.js。对于上述 repo，用户数据在位于 ./utils/withAuth.js 的 HOC 中被调用。

希望对您有所帮助!