Create Signin state and page

src/App.js

@@ -2,7 +2,11 @@ import { FirebaseConfig } from "./config/Config"
 import { initializeApp } from "firebase/app"
 import { Routes, Route } from "react-router-dom"
 import { useState } from "react"
-import { getAuth, createUserWithEmailAndPassword, onAuthStateChanged, signOut } from "firebase/auth";
+import { getAuth,
+  createUserWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+  signInWithEmailAndPassword } from "firebase/auth";
 
 import { Header } from "./components/Header"
 import './App.css'
@@ -11,6 +15,7 @@ import { Home } from "./pages/Home"
 import { Contact } from "./pages/Contact"
 import { Signup } from "./pages/Signup"
 import { Signout } from "./pages/Signout"
+import { Signin } from "./pages/Signin"
 
 
 function App() {
@@ -70,6 +75,14 @@ function App() {
     signOut(FBauth).then( () => {
       // user is signed out
   })
+}
+
+const signIn = ( email, password ) => {
+  signInWithEmailAndPassword(FBauth, email, password)
+    .then( () => {
+      // user is signed in
+} )
+.catch( (error) => { console.log(error) })
 }
     return (
       <div className="App">
@@ -80,6 +93,7 @@ function App() {
           <Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
           <Route path="/signup" element={ <Signup handler={signUp}/> } />
           <Route path="/signout" element={ <Signout handler={logOut}/> } />
+          <Route path="/signin" element={ <Signin handler={signIn}/> } />
         </Routes>
       </div>
     );

src/pages/Signin.js

@@ -0,0 +1,66 @@
+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';
+
+export function Signin ( props ) {
+    return (
+        <Container>
+        <Row>
+          <Col md={ {span: 4, offset: 4} }>
+  
+        <Form>
+  
+              <Form.Group>
+  
+                <Form.Label>Email</Form.Label>
+  
+                <Form.Control
+  
+                  type="email"
+  
+                  name="email"
+  
+                  placeholder="you@example.com"
+  
+                  
+  
+                />
+  
+              </Form.Group>
+  
+              <Form.Group>
+  
+                <Form.Label>Password</Form.Label>
+  
+                <Form.Control
+  
+                  type="password"
+  
+                  name="password"
+  
+                  placeholder="minimum 8 characters"
+  
+                 
+  
+                />
+  
+              </Form.Group>
+              <Button
+                variant="primary"
+                className="mt-3 w-100"
+                type="submit">
+                Sign in
+              </Button>
+  
+            </Form>
+  
+          </Col>
+  
+        </Row>
+  
+      </Container>
+    )
+}

src/pages/Signout.js

@@ -1,9 +1,21 @@
-export function Signout() {
+import { useEffect } from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+export function Signout( props ) {
+const nav = useNavigate()
+
+useEffect(() => {
+    props.handler()
+    nav("/")
+
+})
+
     return (
         <Container>
             <Row>
                 <Col>
-                Signout
+                {/*Signout*/}
                 </Col>
             </Row>
         </Container>