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

Question

通常身份驗證對於 auth0 和 Lock.js 來說不是什么大問題，但是對於 Next.js 和 SSR 來說有點棘手。 我決定根據我找到的教程（ nextjs-passport ）嘗試passport.js。

我想將它部署到 Firebase，所以我沒有可用的快速服務器。 Passport 也應該與自定義回調一起使用，但我只得到一個空白頁並且沒有錯誤。

任何人在使用最新的 Next.js 實施 Auth0 身份驗證時都更幸運？

/頁面/登錄.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，以便它是無服務器的。 如果不是這種情況，我的回答可能對您沒有幫助。

我剛剛為 Auth0 和 Nextjs serverless 創建了一個最小的 repo。

您在正確的軌道上意識到Next.js 身份驗證教程使用 express 擴展 Nextjs 服務器，但由於我們處於無服務器世界，身份驗證需要抽象為 api。 看起來你開始了，但你沒有在 api 中放置一個完整的快速服務器。 在我的 repo 中，我的 auth lambda 是 ./auth/auth.js。 對於上述 repo，用戶數據在位於 ./utils/withAuth.js 的 HOC 中調用。

我希望這有幫助！