Next-auth: implementing reCaptcha for passwordless email log-in?

[archywillhe]

Summary of proposed feature
Would be nice to have reCaptcha for email log-in.

Additional context
How straightforward is it to implement it? Say if we use Google's reCaptcha v3.

Please indicate if you are willing and able to help implement the proposed feature.
willing to implement

[dczysz]

Before this gets too much traction I'd like to add that this should support the use of _any_ captcha solution, like hCaptcha, not just Google's reCaptcha.

[iaincollins]

@archywillhe Thanks for raising this! Yes I think this would be a good idea and would be happy to support this as an option.

I think it might be a little tricky to implement but I'll have a think about any tips.

Given that, an example of custom sign in page on a project that does this would be really helpful and might be a good place to start - it would be easier to think about how to implement support for it into server side calls if we had a working dummy example on a front end project.

I'm happy to accept any Pull Requests that would implement even a specific provider. I don't think we need to worry about supporting multiple captcha providers until we have at least one supported.

[slaivyn]

I have just had to do it as an "emergency" after a security audit.

Here is my naive implementation:

const nextAuthApi: NextApiHandler = async (req, res) => {
  const path = [
    '',
    ...(Array.isArray(req.query.nextauth)
      ? req.query.nextauth
      : [req.query.nextauth]),
  ].join('/')

  if (path === '/signin/email' && process.env.RECAPTCHA_PRIVATE_KEY) {
    const { email, captcha } = req.body
    const isHuman = await fetch(
      `https://www.google.com/recaptcha/api/siteverify`,
      {
        method: 'post',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
        },
        body: `secret=${process.env.RECAPTCHA_PRIVATE_KEY}&response=${captcha}`,
      }
    )
      .then((res) => res.json())
      .then((json) => json.success)
      .catch((err) => {
        throw new Error(`Error in Google Siteverify API. ${err.message}`)
      })
    console.log('IS HUMAN', isHuman)
    if (!isHuman) {
      res.status(400).end()
      return
    }
  }
  return NextAuth(req, res, options)
}

Would it be possible for NextAuth to be compatible with express-like middleware? It would let us plug many different sort of behaviors before or after NextAuth() call.

Thanks again for this awesome library!

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep it open. (Read more at #912) Thanks!

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. (Read more at #912) Thanks!