CSRF token mismatch

[DerkBusser]

Hi,

I have implemented the email provider and some basic login functionality. I have copied the default login page. What i notice is that upon first load the email sign in always reverts to http://localhost:3000/api/auth/signin?csrf=true not to the verification-request page.

When looking into the CSRF tokens, it seems like the initial token is overwritten in the second request and then persisted.

There is nearly no logging on this, but by using debuggable and going into the csrf-token-handler.js it seems like the (initial) token cannot be validated and is thus automatically redirected to http://localhost:3000/api/auth/signin?csrf=true.

What am i missing?

import { csrfToken } from 'next-auth/client'

export default function SignIn({ csrfToken }) {
  return (
    <form method='post' action='/api/auth/signin/email'>
      <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
      <label>
        Email
        <input name='email' type='text'/>
      </label>
      {/* <label>
        Password
        <input name='password' type='text'/>
      </label> */}
      <button type='submit'>Sign in</button>
    </form>
  )
}

SignIn.getInitialProps = async (context) => {
  let token = await csrfToken(context);
  console.log(token);
  return {
    csrfToken: token
  }
}

[balazsorban44]

Just out of curiosity, any reason you don't use the built-in signIn() function? https://next-auth.js.org/getting-started/client#starts-email-sign-in-flow-when-clicked

We handle most of the stuff for you, so you can just write something like:

<button onClick={() => signIn("email", {email: "email@example.com"})}>
  Sign in
</button>