无服务器功能上具有Auth0的Next.js(使用Passport.js)

通常,使用auth0和Lock.js进行身份验证并不重要,但使用Next.js和SSR则比较棘手。我决定根据我发现的教程(nextjs-passport尝试passport.js

我想将其部署到Firebase,所以我没有可用的Express服务器。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)
Eva古一2020/03/24 17:30:30

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

我只是为Auth0和Nextjs无服务器做了一个最小的仓库。

您在正确的道路上意识到Next.js身份验证教程使用express来扩展Nextjs服务器,但是由于我们处在无服务器世界中,因此需要将身份验证抽象为api。看来您是从此开始的,但是您并未在api中放置完整的Express服务器。在我的仓库中,我的身份验证lambda是./auth/auth.js。对于上述存储库,在./utils/withAuth.js中的HOC中调用用户数据。

希望对您有所帮助!