Redirect to a custom URL after email Sign In

[Agrossio]

Hello!

I have configured my app with Credentials and Email providers. Now I need to redirect users to a custom url after they Sign In with the email link they get.

Is it possible to do that?

Thanks a lot for your help!

[simonfarah]

Hello! Yes it is possible using the callbackUrl in the signIn function. So supposing that you made a custom login page, your signIn function will look like this :

signIn('your-provider', {
    callbackUrl: 'the link to redirect to',
})

[Agrossio]

Thanks @simonfarah for your quick response!!

The thing is that I need to redirect the url where the user is sent to after clicking on the sign in button in the email.
What I understand in what you said is to add a callbackUrl property where the signIn method is called. If I add it to my login page it affects when the user is logged in from the login page, but not from the email link.

/********** Login component function ************/

const Login = () => {
  const { data: session, status } = useSession();
  const loading = status === "loading";

  const router = useRouter();

  // console.log("SESSION", session);
 
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "onBlur" });

const onSubmit =  async (formData) => {
  const loginResult = await signIn("credentials", {

    callbackUrl: '/users/set-password',

    // le paso las credenciales al pedido (signIn)
    email: formData.email,
    password: formData.password,
    
  });
  if (loginResult.ok) {
    router.push("/users/profile-user");
  }
}
return (...)


/**************** [...nextAuth].js file ******************/

xport default NextAuth({

    // Para customizar la info que se le pasa al payload del JWT 
    // Configuracion Callbacks: https://next-auth.js.org/configuration/callbacks
    // EJEMPLO DOCUMENTACION: (https://next-auth.js.org/tutorials/role-based-login-strategy)

    callbacks: {
        async jwt({ token, user }) {
            user && (token.user = user)
            // console.log("TOKEN", token)
            return token
        },

        async session({ session, token, user }) {

            session.user.lastname = token.user.lastname; // Add role value to user object so it is passed along with session
            session.user.office = token.user.office; // Add role value to user object so it is passed along with session
            session.user.role = token.user.role; // Add role value to user object so it is passed along with session
            session.user.id = token.user.id; // Add id value to user object so it is passed along with session
            return session;
        },
    },

    session: { // es un objeto donde especificamos como la sesion del usuario autentificado sera administrada

        // MATI: REVISAR PORQUE NO FUNCIONA LA EXPIRACION CON ACTUALIZACION DE EXPIRACION

        /* 
         * Choose how you want to save the user session.
         * The default is `"jwt"`, an encrypted JWT (JWE) stored in the session cookie.
         * If you use an `adapter` however, we default it to `"database"` instead.
         * You can still force a JWT session by explicitly defining `"jwt"`.
         * When using `"database"`, the session cookie will only contain a `sessionToken` value,
         * which is used to look up the session in the database.
         */
        // jwt: true,       // next-auth v3
        strategy: "jwt",     // next-auth v4

        // Seconds - How long until an idle session expires and is no longer valid:
        maxAge: 30 * 24 * 60 * 60, // 30 days

        /* Seconds - Throttle how frequently to write to database to extend a session.
         Use it to limit write operations. Set to 0 to always update the database.
         Note: This option is ignored if using JSON Web Tokens
         */
        // updateAge: 24 * 60 * 60, // 24 hours
    },
    jwt: {
        // The maximum age of the NextAuth.js issued JWT in seconds.
        // Defaults to `session.maxAge`.
        maxAge: 24 * 60 * 60, // 24 hours
        // You can define your own encode/decode functions for signing and encryption:
        // async encode() { },
        // async decode() { },
        // updateAge: 2 * 60 * 60,
    },
    debug: true,
    adapter: MongoDBAdapter(clientPromise),
    providers: [EmailProvider({
        server: process.env.EMAIL_SERVER,
        from: process.env.EMAIL_FROM,
        maxAge: 60 * 60, // Seconds - How long email links are valid for (default 24h)

    }),
    CredentialsProvider({

        /* 
         * aca se puede agregar info para setear un formulario propio de Next para el login (no
         * lo usamos porque ya tenemos uno propio)
         * VER: https://next-auth.js.org/providers/credentials
         */

        name: "Credentials",

        credentials: {
            email: { label: "Email", type: "text", placeholder: "Enter your Email" },
            password: { label: "Password", type: "password", placeholder: "Enter Your Password" }
        },

        // como ya tenemos un formulario de autenticacion (no vamos a usar el que provee Next Auth)
        // no hace falta setear credenciales y pasamos directamente el metodo authorize:
        async authorize(credentials) {

            const client = await connectMongo();

            const foundUser = await User.findOne({ email: credentials.email })

            if (!foundUser) {
                // hay que usar throw err para que authorize rechace la promesa y muestre un msg(por defecto redirije a otra pagina)
                throw new Error('No user found!')
            }

            // comparamos el password ingresado en el form con el de la db:
            const isValid = await verifyPassword(credentials.password, foundUser.password);

            if (!isValid) {
                // client.close();
                throw new Error('Could not log you in!');
            }

            /* 
             * Al retornar un objeto dentro de authorize le hacemos saber a Next Auth que la autorizacion
             * tuvo exito. Este objeto va a ser codificado dentro del jwt. 
             * Por ej, podemos incluir el email para identificar el usuario al que hace referencia el token.
             * 
             */

            // client.close();
            // console.log("FOUND_USER-->", foundUser)

            /* 
             * Por defecto deja usar las propiedades email y name, nosotros customizamos (en callbacks)
             * para que agregue las propiedades role e id
             */

            return { email: foundUser.email, role: foundUser.role, name: foundUser.name, id: foundUser._id };
        }
    }),
    ]
});

[Agrossio]

Finally I've found the correct way! :D

Thanks @simonfarah !! It was just as you mentioned but where I call de signIn("email") method.

Documentation link

I had to add the "callbackUrl" property in the email signIn method:

const onSubmit = async (formData) => {
    // formData.preventDefault();

    const loginResult = await signIn("email", {
      // para que no redirija a otra pagina cuando da error el login:
      redirect: false,

      // para enviar al usuario a la URL deseada cuando se loguea por mail:
      callbackUrl: '/users/set-password',

      // le paso las credenciales al pedido (signIn):
      email: formData.email,
    });

    router.push("/api/auth/verify-request?provider=email&type=email");
  };```