Email Provider sets new data to verificationRequests but does not send an e-mail

[sbayrak]

hello, I am trying to log users in with using Email provider.
when I submit the form, it redirects me to /&error=EmailSignin inserts a data into database such as picture below;
mongodb table

and also logs an error to the vscode terminal like this;
terminal error

I have also tried SendGrid, SendPulse and Postmark, they all gave the same error...

this is my /api/auth/[...nextauth].js file

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

const options = {
  providers: [
   
    Providers.Email({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },

      from: process.env.EMAIL_FROM,
    }),

    // Providers.Credentials({
    //   name: 'Credentials',
    //   credentials: {
    //     email: { label: 'Email', type: 'text' },
    //     password: { label: 'Password', type: 'password' },
    //   },
    //   async authorize(credentials, req) {
    //     let user;

    //     const res = await fetch('http://localhost:3000/api/profile/', {
    //       method: 'POST',
    //       body: JSON.stringify(credentials),
    //       headers: {
    //         'Content-Type': 'application/json',
    //       },
    //     });
    //     const arrayToJson = await res.json();
    //     user = arrayToJson[0];

    //     if (user) {
    //       return user;
    //     } else {
    //       return null;
    //     }
    //   },
    // }),
  ],
  pages: {
    signIn: '/auth/signin',
    signOut: '/auth/signout',
    // error: '/auth/error',
    // verifyRequest: '/auth/verify-request',
  },
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,
    updateAge: 24 * 60 * 60,
  },
  callbacks: {
    async signIn(user) {
      return user.userId && user.isActive === '1';
    },
    // async signIn(user, account, profile) {
    //   if (user.userId && user.isActive === '1') {
    //     return true;
    //   } else {
    //     return '/auth/error';
    //   }
    // },
    async session(session, token) {
      session.user = token.user;
      return session;
    },
    async jwt(token, user) {
      if (user) token.user = user;
      return token;
    },
    async redirect(url, baseUrl) {
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
  },
  events: {
    async error(message) {
      console.log(message);
    },
  },

  database: `mongodb+srv://${process.env.MONGO_DB_USERNAME}:${process.env.MONGO_DB_PASSWORD}@nextjs-academia-sb.ki5vd.mongodb.net/test`,
};

export default (req, res) => NextAuth(req, res, options);
 

and this is my /pages/auth/signin.js file

import { signIn } from 'next-auth/client';
import { useState } from 'react';
import { useRouter } from 'next/router';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Container, TextField, Button } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  container: {
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  formCredentials: {
    border: '1px solid red',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: theme.spacing(2),
  },
}));

export default function SignIn() {
  const router = useRouter();
  const classes = useStyles();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState('');

  const handleRegister = async (e) => {
    e.preventDefault();

    signIn('email', { email: '[email protected]' });
  };

  

  return (
    <Container className={classes.container}>
      <form className={classes.formCredentials} onSubmit={handleRegister}>
        <Typography variant='h6'>Register</Typography>
        <label>
          Email address
          <TextField
            variant='standard'
            type='email'
            name='email'
            label='email'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          ></TextField>
        </label>

        <Button type='submit' variant='outlined' fullWidth>
          Submit
        </Button>
      </form>
       
    </Container>
  );
}

[balazsorban44]

the main issue here seems to be:

self signed certificate in certificate chain

and unfortunately I don't think it originates from us.

[sbayrak]

I am not really sure what caused this but I changed async signIn(user) function in the callbacks to this and worked;

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

const options = {
  providers: [
   
    Providers.Email({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  
    Providers.Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        let user;

        const res = await fetch('http://localhost:3000/api/profile/', {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const arrayToJson = await res.json();
        user = arrayToJson[0];

        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],
  pages: {
    signIn: '/auth/signin',
    signOut: '/auth/signout',
    error: '/auth/error',
    verifyRequest: '/auth/verifyrequest',  
    newUser: '/auth/newuser',  
  },
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,
    updateAge: 24 * 60 * 60,
  },
  callbacks: {
    async signIn(user) {
      return user.userId && user.isActive === '1';
    },
   
    async session(session, token) {
      session.user = token.user;
      return session;
    },
    async jwt(token, user) {
      if (user) token.user = user;
      return token;
    },
    async redirect(url, baseUrl) {
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
  },

  database: `mongodb+srv://${process.env.MONGO_DB_USERNAME}:${process.env.MONGO_DB_PASSWORD}@nextjs-academia-sb.ki5vd.mongodb.net/test?retryWrites=true&w=majority`,
};

export default (req, res) => NextAuth(req, res, options);

also I got a quick question; @balazsorban44 , I deleted all sessions on the database, and they didnt get created when I sign in, what kind of problem would it make in the future ? I can still console.log the session and get user info from the front-end

[balazsorban44]

Manually deleting the DB sessions is not enough, because there will be a cookie that still references them. You did manually set jwt: true though, which means that you actually don't use the sessions from the DB at all. 🤔. you should be using the signOut function to properly end a session in any case.