next-auth谷歌登录按钮放在form表单内无法正常工作是什么原因？

问题原因 #

HTML中<button>标签在没有显式指定type属性时，默认类型是submit。当你把这个按钮放在<form>标签内部时，点击按钮会首先触发表单的默认提交行为，表单未指定action属性时默认会提交到当前页面地址，所以你会看到跳转到http://localhost:3000/auth/signin?，同时中断了onClick绑定的OAuth登录逻辑。
当按钮放在表单外时，不会触发表单提交，所以onClick的逻辑可以正常执行。

解决方法 #

任选以下任意一种方案即可修复：

• 给按钮显式指定type="button"，取消默认的提交行为
  修改后的按钮代码如下：

<button 
  type="button"
  className="p-3 bg-blue-500 rounded-lg text-white"
  onClick={() => SignIntoProviders(provider.id)}
>
  Login with {provider.name}
</button>

• 在onClick事件中调用e.preventDefault()阻止默认提交行为
  修改后的点击事件代码如下：

<button 
  className="p-3 bg-blue-500 rounded-lg text-white"
  onClick={(e) => {
    e.preventDefault()
    SignIntoProviders(provider.id)
  }}
>
  Login with {provider.name}
</button>

内容的提问来源于stack exchange，提问作者Shiladitya Thakur