通常,使用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)
我假设您要在Now V2上使用Nextjs,以便它是无服务器的。如果不是这种情况,我的回答可能对您没有帮助。
您在正确的道路上意识到Next.js身份验证教程使用express来扩展Nextjs服务器,但是由于我们处在无服务器世界中,因此需要将身份验证抽象为api。看来您是从此开始的,但是您并未在api中放置完整的Express服务器。在我的仓库中,我的身份验证lambda是./auth/auth.js。对于上述存储库,在./utils/withAuth.js中的HOC中调用用户数据。
希望对您有所帮助!