How to add custom "check your email" page in next-auth? (verifyRequest)

Question

I am trying to have my own text and style there. In the documentation (https://next-auth.js.org/configuration/options#pages) it says we can add a custom page by adding verifyRequest: '/auth/verify-request' but no example

I tried to create a custom verify-request.js file with this code https://github.com/nextauthjs/next-auth/blob/1838e43b275fa36b1eb7bd046eead6795cfd0f2d/src/server/pages/verify-request.js but it do not working for me...

Is there an example ot tutorial how to do it? I searched everything all I could and nothing.

Rosenblast

Answer 1

Update the pages options in [...nextauth].js (located in /pages/api/auth)

pages: {
    signIn: "/auth/signin",
    signOut: "/auth/signout",
    error: "/auth/error", // Error code passed in query string as ?error=
    verifyRequest: "/auth/verify", // (used for check email message)
    // newUser: null, // If set, new users will be directed here on first sign in 
},

Then create your custom page (in the above case name it "verify.js") in the location /pages/auth/ as defined above. This will override the default verify request page, and you can custom whatever you want on your verify page

Handle

Answer 2

When you try to add it a route like /pages/api/auth/verify it makes a problem. you should add your page directly into pages route something like /pages/verify and it should all be fine. You can use every page you'd like.

Berghoff

Answer 3

Here's the translation of the given text:

"Create your screen inside the pages folder, for example verify-request.js, and then in the [...nextauth].js file, add the following:

pages: { verifyRequest: '/verify-request/' }

This should solve the issue."

Daumier