How to Customize Verification Request Pages from Passwordless Authentication in NextAuth

NextAuth makes passwordless email authentication very easy. Setting up magic links only requires access to an SMTP server and a few configuration changes.

However, currently, we are redirected to the default NextAuth verification page at /api/auth/verify-request.

In order to redirect to our own custom verification page, we can add an entry to our pages object in our NextAuth configuration for verifyRequest.

// pages/api/auth/[...nextauth].js
export default NextAuth({
  ...
  pages: {
    verifyRequest: '/verify-request',
    ...
  }
});

NextAuth automatically performs the redirect for us, so this is all we’ll need to do.

We can spend the rest of the time creating a React component in /pages/verify-request.jsx. There’s no data to handle here, so it’s pure frontend work from here on out.