Email Verification with React and Flask

Question

I have setup a Email Verification Function in my ReactJS app, with flask as backend. But for some reason its giving out Something went wrong. Error, with 500 - Internal Error at http://localhost:5000/send-verify-email.

PFA Relevant files. Let me know if I've missed any file or information.

Someone please tell me the issue -

Here's the Verify Button's eventHandler -

    const handleClick = ( user ) => {
        if(user.email) {
            // Dispatch send email link
            dispatch(sendEmailVerifyLink(user.email))
        }
    }

auth.js File

// Action generator for sending verify email link`enter code here`
export const sendEmailVerifyLink = (recipientEmail) => (dispatch) => {

  // Dispatch Start Process
  dispatch({
    type: EMAIL_VERIFY_SEND_LINK
  })

  // create data body object
  const data = {
    email: recipientEmail
  }

  // send request to server
  axios.post('/send-verify-email', data)
    .then((res) => {
      // Dispatch success action
      dispatch({
        type: EMAIL_VERIFY_SEND_LINK_SUCCESSFULLY
      })

      // set Alert
      dispatch(setAlert(res.data.message, 'success'))
    })
    .catch((err) => {

      // Create response from error object
      const res = err.response

      // Dispatch fail action
      dispatch({
        type: EMAIL_VERIFY_SEND_LINK_FAILED
      })

      if(res && (res.status === 404 || res.status === 422 || res.status === 500))
      {
        // Set ALert for the above status codes
        dispatch(setAlert(res.data.message))
        return
      }

      // Set error alert
      dispatch(setAlert('Something went wrong.'))
    })
}

auth.py File

@auth.route('/send-verify-email', methods=["POST"])
def send_verify_email():
    """
    Route to handle and send verify email message.
    """

    # Get Recipient email address
    try:
        req = request.get_json()
        recipientEmail = req["email"]

    except:
        response = {
            "success": False,
            "message": "Please Provide Recipient Email Address."
        }
        return make_response(jsonify(response)), 422

    # Check if user exists or not
    user = ( Admin.query.filter_by(email=recipientEmail).first() or
             Extractor.query.filter_by(email=recipientEmail).first() or
             Management.query.filter_by(email=recipientEmail).first() )

    # return if user not exist
    if(not user):
        response = {
            "success": False,
            "message": "User Not Found, Please a Registered Email ID."
        }
        return make_response(jsonify(response)), 404

    # Check if user is verified or not
    if(user.verified):
        response = {
            "success": False,
            "message": "User is already verified."
        }
        return make_response(jsonify(response)), 422

    # create access token
    token = user.encode_access_token()

    # Verify Email Link
    verify_link = f"http://localhost:3000/verify-email/{token}"


    # Send reset link meail message
    try:
        send_verify_link_mail(recipient=recipientEmail, verify_link=verify_link)
        response = {
            "success": True,
            "message": f"Email Verification link has been sent to {recipientEmail}."
        }
        return make_response(jsonify(response)), 201

    except Exception as e:
        response = {
            "success": False,
            "message": 'Something went wrong.',
        }
        return make_response(jsonify(response)), 500

Answer 1

Maybe your problem is with CORS. For default, server don't receive front-end request, but you can easily fix that installing flask-cors (pip install flask-cors). So try write this in your code:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

source: https://flask-cors.readthedocs.io/en/latest/