title: React encrypt password
body: <p>I have following component to pass data in my firestore database. Currently the password is not encrypted and and is visible to users of the database. Therefore I want to encrypt it.  However, I get the error</p>
  <blockquote>
  <p>TypeError: Cannot read property 'encrypt' of undefined.</p>
  </blockquote>
  <p>That is my component for putting data in the database:</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import fire from './fire.js';
  import {userAuth} from './Main';
  import '../style/inputPasswords.css';
  import {encrypt} from './encryption';
  
  const database = fire.firestore();
  
  const InputPasswords = () =&gt; {
  
      const [title, setTitle] = useState(&quot;&quot;);
      const [username, setUsername] = useState(&quot;&quot;);
      const [password, setPassword] = useState(&quot;&quot;);
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
  
          let encryptedPassword = encrypt(password);
  
          database.collection(&quot;password-&quot;+userAuth).add({
              title: title,
              username: username,
              password: encryptedPassword
          })
          .then(() =&gt; {
              window.location.reload();
          })
          .catch((error) =&gt; {
              console.error(error);
          })
  
          setTitle(&quot;&quot;);
          setUsername(&quot;&quot;);
          setPassword(&quot;&quot;);
      }
  
      return (
          &lt;form className=&quot;form&quot; onSubmit={handleSubmit}&gt;
              &lt;label&gt;title&lt;/label&gt;
              &lt;input className=&quot;input&quot; id=&quot;title&quot; placeholder=&quot;Title&quot; value={title} autoComplete=&quot;off&quot;
              onChange={(e) =&gt; setTitle(e.target.value)}/&gt; 
  
             &lt;label&gt;Username&lt;/label&gt;
             &lt;input className=&quot;input&quot; id=&quot;username&quot; placeholder=&quot;Username&quot; value={username} autoComplete=&quot;off&quot;
             onChange={(e) =&gt; setUsername(e.target.value)}/&gt; 
  
             &lt;label&gt;Password&lt;/label&gt;
             &lt;input className=&quot;input&quot; id=&quot;password&quot; placeholder=&quot;Password&quot; type=&quot;password&quot; value={password} autoComplete=&quot;off&quot;
             onChange={(e) =&gt; setPassword(e.target.value)}/&gt;
  
             &lt;button type=&quot;submit&quot;&gt;Add&lt;/button&gt;
          &lt;/form&gt;
      )
  }
  
  export default InputPasswords
  </code></pre>
  <p>This is the code for the encryption:</p>
  <pre><code>import crypto from &quot;crypto&quot;;
  const secret = &quot;testtesttesttesttesttesttesttest&quot;;
  
  const encrypt = (password) =&gt; {
      return crypto.AES.encrypt(password, secret).toString();
  };
  
  const decrypt = (encryption) =&gt; {
     let bytes = crypto.AES.decrypt(encryption, secret);
     let originalText = bytes.toString(crypto.enc.Utf8);
  
     return originalText;
  };
  
  export {encrypt, decrypt};
  </code></pre>
  <p>I am not sure how to fix that. Does anyone have an idea how to solve that problem?
  Because without the encryption the code runs without any problems</p>