signIn() returns success but nothing happens (no emailing, no change in database)

[timcouchoud]

My situation when I try to signin-signup (email provider):

• verification request email is NOT sent
• database stays totally unchanged
• signIn returns success: {error: null, status: 200, ok: true, url: 'https://localhost:3001/api/auth/signin?csrf=true'}
• debugging is on true but shows nothing in the console
• redirect option is on false
• I use custom sendVerificationRequest
• I am using typescript

I checked intensively:

• email input information is OK
• credentials for smtp server is OK
• credentials for database is OK

Would you have an idea how to debugg this? thx a lot

[balazsorban44]

Could you share the code on how do you start the login process?

Looks like you do not pass the CSRF token correctly, which ends up being a redirect to the URL you show.

https://next-auth.js.org/getting-started/rest-api#post-apiauthsigninprovider

[timcouchoud]

My bad I mixed V3 and V4...:( , and just saw that I installed "next-auth": "^4.0.0-beta.7",

I updated now to V4, with mongo adapter.

But I still have the same behavior, no error, no reported bug but any email recieved and databased unchanged.

I do not configured CSRF at all.

Any idea? Thx!

---

Here is my config:

File /pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import sendVerificationRequest from "emails/sendVerificationRequest";

import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import clientPromise from "lib/mongodb";

console.log("smtp=", process.env.EMAIL_SERVER);
console.log("database=", process.env.MONGODB_URI);

export default async function auth(req, res) {
  return await NextAuth(req, res, {
    providers: [
      EmailProvider({
        server: process.env.EMAIL_SERVER,
        from: process.env.EMAIL_FROM,
      }),
    ],
    adapter: MongoDBAdapter({
      db: (await clientPromise).db(process.env.DB_NAME),
    }),
    secret: process.env.JWT_SECRET,
    session: {
      strategy: "jwt",
    },
    jwt: {
      secret: process.env.JWT_SECRET,
      maxAge: 60 * 60 * 24 * 30,
    },

    pages: {
      signIn: "/", // Displays signin buttons
      signOut: "/", // Displays form with sign out button
      // error: '/auth/error', // Error code passed in query string as ?error=
      verifyRequest: "/connected", // Used for check email page
      // newUser: null // If set, new users will be directed here on first sign in
    },
    debug: true,
  });
}

File mongodb.js

// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient } from "mongodb";

const uri = process.env.MONGODB_URI;
console.log("MONGODB_URI=", uri);
const options = {
  useUnifiedTopology: true,
  useNewUrlParser: true,
};

let client;
let clientPromise;

if (!process.env.MONGODB_URI) {
  throw new Error("Please add your Mongo URI to .env.local");
}

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    console.log("balise 1");
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  console.log("balise 3");
  clientPromise = global._mongoClientPromise;
} else {
  console.log("balise 2");
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options);
  console.log("client=", client);
  clientPromise = client.connect();
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise;

File /pages/signin-singup.js

import React, { useState, useEffect } from "react";
import Router from "next/router";
import {
  Flex,
  Image,
  Heading,
  Text,
  FormControl,
  FormLabel,
  Input,
  Button,
  Link,
  FormErrorMessage,
  Spinner,
  Box,
} from "@chakra-ui/react";
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from "@chakra-ui/react";
import { useDisclosure } from "@chakra-ui/react";
import { Formik, Form, Field } from "formik";
import MessageBox from "components/MessageBox";
import * as Yup from "yup";

import { signIn } from "next-auth/react";

import { useSession } from "next-auth/react";

import Layout from "components/Layout";

// Définition des constantes passées dans l'objet en paramètre de useFormik
const initialValues = {
  email: "",
};

interface Values {
  email: string;
}

const validationSchema = Yup.object({
  email: Yup.string()
    .email("Le format de l'adresse e-mail est invalide.")
    .required("Ce champ est requis."),
});

function SignInSignUp() {
  const [errorMessage, setErrorMessage] = useState("");
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { data: session, status } = useSession();

  if (session) {
    Router.push("/connected");
  }

  const onSubmit = async (values: Values) => {
    console.log("email to be send=", values.email);
    try {
      const signinResult = await signIn("email", {
        redirect: false,
        email: values.email,
      });
      console.log(signinResult);
      values.email = "";
      onOpen();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Layout isLogo={true} centred={true}>
      <Heading as="h1" size="md" marginBottom="0.5rem" textAlign="center">
        Connection ou inscription
      </Heading>

      <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validationSchema={validationSchema}
        validateOnChange={false}
      >
        {(props) => (
          <Form>
            <Flex
              direction="column"
              justifyContent="space-between"
              alignItems="center"
            >
              <Field name="email">
                {({ field, form }) => (
                  <FormControl
                    id="email"
                    marginBottom="1.5rem"
                    isInvalid={form.touched.email && form.errors.email}
                  >
                    <Input
                      variant="brand"
                      type="email"
                      name="email"
                      placeholder="Email..."
                      maxWidth="400px"
                      {...field}
                    />
                    <FormErrorMessage>
                      <MessageBox variant="info" width="100%">
                        {form.errors.email}
                      </MessageBox>
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Button
                type="submit"
                variant="button1"
                width="150px"
                isLoading={props.isSubmitting}
              >
                Valider
              </Button>
              {errorMessage && (
                <MessageBox variant="danger" width="100%">
                  {errorMessage}
                </MessageBox>
              )}
            </Flex>
          </Form>
        )}
      </Formik>

      <Modal isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Félicitation et bienvenue!</ModalHeader>
          <ModalCloseButton />
          <ModalBody marginBottom="2rem">
            <Text variant="paragraph">
              Nous vous avons envoyé un email de connexion. Veuillez consulter
              votre boite email.
            </Text>
            <Text variant="paragraph">
              En cliquant sur le lien contenu dans l'email vous serez
              directement redirigé vers l'application.
            </Text>
          </ModalBody>
        </ModalContent>
      </Modal>
    </Layout>
  );
}

SignInSignUp.auth = false;
export default SignInSignUp;

[balazsorban44]

I cannot see a problem immediately, and unfortunately, I am not able to reproduce it locally either.

The CSRF issue might be an indicator that something is up with your cookies in the browse. Try testing different browsers/devices and make sure you don't block any cookies by a proxy or something.

What do you get when you visit http://localhost:3000/api/auth/csrf ?

[timcouchoud]

I modified the signin-signup.tsx file and moved to a custom REST POST query using axios to submit, it works perfectly (I call now csrf). I think there is a problem with the signIn("email", {email, redirect: false}) function but I can not identify it.

Within the signIn version I put some console.log at the right place in the node_module/nextauth but they are never called...

Nevertheless the signOut() function works well without custom REST query.