How to Customize Verification Request Pages from Passwordless Authentication in NextAuth

Published Apr 21, 2021

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.


More JS Articles