Linking Firebase Databse with Signup

This commit is contained in:
Ray 2023-09-12 09:28:56 +00:00 committed by GitHub
parent 1e968638ab
commit ea64819d91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 21 deletions

View File

@ -14,6 +14,7 @@ import { Signup } from "./pages/Signup"
function App() { function App() {
const FBapp = initializeApp(FirebaseConfig) const FBapp = initializeApp(FirebaseConfig)
const FBauth = getAuth(FBapp)
// navigation array // navigation array
const navItems = [ const navItems = [
{ label: "Home", link: "/" }, { label: "Home", link: "/" },
@ -22,31 +23,41 @@ function App() {
{ label: "Create Account", link: "/signup" }, { label: "Create Account", link: "/signup" },
{ label: "Log in", link: "/signin" }, { label: "Log in", link: "/signin" },
] ]
// navigation for authenticated user // navigation for authenticated user
const AuthnavItems = [ const AuthnavItems = [
{ label: "Home", link: "/" }, { label: "Home", link: "/" },
{ label: "About", link: "/about" }, { label: "About", link: "/about" },
{ label: "Contact", link: "/contact" }, { label: "Contact", link: "/contact" },
{ label: "Log out", link: "/signout"} { label: "Log out", link: "/signout" }
] ]
/// application states /// application states
const [nav, setNav ] = useState( navItems ) const [nav, setNav] = useState(navItems)
const saySomething = ( word ) => { const saySomething = (word) => {
alert( word ) alert(word)
} }
return (
<div className="App"> // signing up a user
<Header items={nav}/> const signUp = (email, password) => {
<Routes> createUserWithEmailAndPassword(FBauth, email, password)
<Route path="/" element={ <Home greeting="Hey you're at home!" /> } /> .then((userCredential) => {
<Route path="/about" element={ <About greeting="Hey you, this is about page!" handler={saySomething} /> } /> // do something
<Route path="/contact" element={ <Contact greeting="Hey you, this is contact page!" /> } /> })
<Route path="/signup" element={ <Signup/> } /> .catch((error) => console.log(error.message))
</Routes> }
</div> return (
); <div className="App">
} <Header items={nav} />
export default App; <Routes>
<Route path="/" element={<Home greeting="Hey you're at home!" />} />
<Route path="/about" element={<About greeting="Hey you, this is about page!" handler={saySomething} />} />
<Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</div>
);
}
export default App;