Email.Passwordless.Mongodb-CustomLoginPage.js

import React, { useState } from 'react'
import { signIn } from 'next-auth/react'

const Login = () => {
  const [email, setEmail] = useState('')

  const sendLoginVerification = e => {
    e.preventDefault()
    
    // Notice, we are also redirecting users to the protected route instead of the homepage after signing in. 
    signIn('email', { callbackUrl: '/protected', email })
  }

  return (
    <div>
      <h1>Login</h1>
      <h3>
        Enter your email address, and we will send you a verification link.
      </h3>
      <form onSubmit={sendLoginVerification}>
        <input
          type='email'
          value={email}
          required
          onChange={e => setEmail(e.target.value)}
        />
        <button type='submit'>Send Magic Link 🪄</button>
      </form>
    </div>
  )
}

export default Login