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

src/App.js

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

src/pages/Signin.js

@@ -1,16 +1,18 @@
-import Form from 'react-bootstrap/Form';
-import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import Button from "react-bootstrap/Button";
-import {useState, useEffect} from 'react';
+import Form from "react-bootstrap/Form"
+import Container from "react-bootstrap/Container"
+import Row from "react-bootstrap/Row"
+import Col from "react-bootstrap/Col"
+import Button from "react-bootstrap/Button"
+import {useState, useEffect} from 'react'
 import { useNavigate } from 'react-router-dom';
 
 export function Signin( props ) {
+
   const [email,setEmail] = useState('')
   const [validemail, setValidemail] = useState(false)
   const [password,setPassword] = useState('')
   const [validpassword, setValidpassword ] = useState(false)
+  const [errorCode, setErrorCode] = useState()
   const navigate = useNavigate()
 
   useEffect( () => {
@@ -33,13 +35,22 @@ export function Signin ( props ) {
 
   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(
@@ -49,44 +60,23 @@ export function Signin ( props ) {
           <Form onSubmit={ submitHandler }>
             <Form.Group>
               <Form.Label>Email</Form.Label>
-  
               <Form.Control 
-  
                 type="email" 
-  
                 name="email" 
-  
                 placeholder="you@example.com" 
-
                 value={ email }
-
                 onChange={ (evt) => setEmail(evt.target.value) }
-                  
-  
               />
-  
             </Form.Group>
-  
             <Form.Group>
-  
               <Form.Label>Password</Form.Label>
-  
               <Form.Control 
-  
                 type="password" 
-  
                 name="password" 
-  
-                  placeholder="minimum 8 characters"
-
+                placeholder="your password" 
                 value={ password }
-
                 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>
   )
 }