Close session and access to the API input done

src/App.js

@@ -1,3 +1,8 @@
+import React, {useState} from 'react'
+import {firebase} from './components/Firebase/firebase'
+import {getAuth, onAuthStateChanged} from 'firebase/auth'
+import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
+
 import AboutThis from "./components/AboutThis";
 import BannerLogin from "./components/BannerLogin";
 import GoDownArrow from "./components/GoDownArrow";
@@ -15,10 +20,27 @@ import Identify from "./components/Identify";
 import Account from "./components/Account";
 
 function App() {
+
+  const [signIn, setSignIn] = useState('')
+
+  const auth = getAuth()
+
+  onAuthStateChanged(auth, (user) => {
+
+      if (user) {
+          setSignIn(true)
+      } else {
+          setSignIn(false)
+      }
+
+  })
+    
   return (
     <Router>
       <>
-        <Header />
+        <Header 
+          signIn={signIn}
+        />
         
         <Switch>
 
@@ -31,7 +53,9 @@ function App() {
           </Route>
 
           <Route path="/">
-            <BannerLogin />
+            <BannerLogin 
+              signIn={signIn}
+            />
             <MainPomodoro />
             <GoDownArrow />
             <AboutThis />

src/components/BannerLogin.jsx

@@ -1,31 +1,13 @@
-import React, {useState} from 'react'
-import {firebase} from './Firebase/firebase'
-import {getAuth, onAuthStateChanged} from 'firebase/auth'
-import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
+import React from 'react'
 
-const BannerLogin = () => {
+const BannerLogin = (props) => {
 
     console.log('BANNER LOGIN DEPLOYED')
 
-    const [signIn, setSignIn] = useState('')
-
-    const auth = getAuth()
-
-    onAuthStateChanged(auth, (user) => {
-
-        if (user) {
-            setSignIn(true)
-        } else {
-            setSignIn(false)
-        }
-
-    })
-
-
     return (
         <>
             {
-                !signIn ? 
+                !props.signIn ? 
 
                     <div className="banner-login">
                         <p>Access to integrate and save your progress with Clockify!</p>

src/components/Header Childrens/GoToAccount.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const GoToAccount = (props) => {
+    return (
+        <>
+            {
+                props.signIn ? 
+                    <>
+                        <a href="/config-account" className="go-to-account">
+                            <div className="go-to-account-text">API</div>
+                        </a>
+                        <a href="/identify?act=clss" className="close-session">
+                            <div className="close-session-text">Close session</div>
+                        </a>
+                    </>
+                : null
+            }
+        </>
+    )
+}
+
+export default GoToAccount

src/components/Header.jsx

@@ -1,7 +1,8 @@
 import React, {useState} from 'react'
 import DarkMode from './Header Childrens/DarkMode'
+import GoToAccount from './Header Childrens/GoToAccount'
 
-const Header = () => {
+const Header = (props) => {
 
     console.log("HEADER DEPLOYED")
     
@@ -10,6 +11,7 @@ const Header = () => {
             <a href="/"><h1>Pomodoro Timer</h1></a>
             <h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
             <DarkMode />
+            <GoToAccount signIn={props.signIn}/>
         </header>
     )
 }

src/components/Identify.jsx

@@ -5,7 +5,7 @@ import RegisterForm from './Identify Childrens/RegisterForm'
 import {firebase} from './Firebase/firebase'
 import {withRouter} from 'react-router-dom'
 
-import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from 'firebase/auth'
+import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'
 import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
 
 
@@ -133,6 +133,15 @@ const Identify = (props) => {
 
         alert('ACTION NOT VALID')
     }
+
+    const signOutFromApp = () => {
+
+        signOut(auth)
+            .then(() => {
+                
+                //! 'YOU CLOSE SESSION' MESSAGE CODE
+            })
+    }
     
     React.useEffect( () => {
         const urlInfo = new URLSearchParams(window.location.search)
@@ -143,6 +152,10 @@ const Identify = (props) => {
         } else {
             setAct('login')
         }
+
+        if (action === 'clss') {
+            signOutFromApp()
+        }
     }, [])