Modify Signin.js to add error code from Firebase with invalid credentials

src/App.js

@@ -82,13 +82,18 @@ function App() {
   })
 }
 
-const signIn = ( email, password ) => {
+const signIn = (email, password) => {
-  
+  return new Promise((resolve, reject) => {
     signInWithEmailAndPassword(FBauth, email, password)
-    .then( () => {
+      .then(() => {
         // user is signed in
-} )
+        resolve(true)
-.catch( (error) => { console.log(error) })
+      })
+      .catch((error) => { 
+        console.log(error) 
+        reject( error.code )
+      })
+  })
 }
     return (
       <div className="App">

src/pages/Signin.js

@@ -1,92 +1,82 @@
-import Form from 'react-bootstrap/Form';
+import Form from "react-bootstrap/Form"
-import Container from 'react-bootstrap/Container';
+import Container from "react-bootstrap/Container"
-import Row from 'react-bootstrap/Row';
+import Row from "react-bootstrap/Row"
-import Col from 'react-bootstrap/Col';
+import Col from "react-bootstrap/Col"
-import Button from "react-bootstrap/Button";
+import Button from "react-bootstrap/Button"
-import {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react'
-import {useNavigate} from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-export function Signin ( props ) {
+export function Signin( props ) {
-    const [email, setEmail] = useState('')
+
+  const [email,setEmail] = useState('')
   const [validemail, setValidemail] = useState(false)
-    const [password, setPassword] = useState('')
+  const [password,setPassword] = useState('')
-    const [validpassword, setValidpassword] = useState(false)
+  const [validpassword, setValidpassword ] = useState(false)
+  const [errorCode, setErrorCode] = useState()
   const navigate = useNavigate()
 
   useEffect( () => {
-        if(email.indexOf('@') > 0) {
+    if( email.indexOf('@') > 0 ) {
       setValidemail(true)
     }
     else {
       setValidemail( false )
     }
-    }, [email])
+  } , [email])
 
   useEffect( () => {
     if( password.length >= 8 ) {
-            setValidpassword(true)
+      setValidpassword( true )
     }
     else {
       setValidpassword( false )
     }
-    }, [password])
+  } , [password])
 
   useEffect( () => {
     if( props.authstate ) {
-        navigate('/')
+      navigate("/")
     }
   }, [props.authstate])
 
   const submitHandler = (evt) => {
     evt.preventDefault()
     props.handler( email, password )
+    .then((response) => {
+      if( response ) {
+        // sign in successful
+      }
+    })
+    .catch( (code) => {
+      //console.log(code)
+      setErrorCode( code )
+    })
   }
 
-    return (
+  return(
     <Container>
       <Row>
         <Col md={ {span: 4, offset: 4} }>
           <Form onSubmit={ submitHandler }>
             <Form.Group>
               <Form.Label>Email</Form.Label>
-  
               <Form.Control 
-  
                 type="email" 
-  
                 name="email" 
-  
                 placeholder="you@example.com" 
-
+                value={ email }
-                  value={email}
+                onChange={ (evt) => setEmail(evt.target.value) }
-
-                  onChange={ (evt) => setEmail(evt.target.value)}
-                  
-  
               />
-  
             </Form.Group>
-  
             <Form.Group>
-  
               <Form.Label>Password</Form.Label>
-  
               <Form.Control 
-  
                 type="password" 
-  
                 name="password" 
-  
+                placeholder="your password" 
-                  placeholder="minimum 8 characters"
-
                 value={ password }
-
+                onChange={ (evt) => setPassword(evt.target.value) }
-                  onChange={ (evt) => setPassword(evt.target.value)} 
-  
-                 
-  
               />
-  
             </Form.Group>
             <Button 
               variant="primary" 
@@ -94,16 +84,12 @@ export function Signin ( props ) {
               type="submit"
               disabled={ (validemail && validpassword) ? false : true }
             >
-                
               Sign in
             </Button>
-  
+            <Form.Text>{errorCode}</Form.Text>
           </Form>
-  
         </Col>
-  
       </Row>
-  
     </Container>
   )
 }