Skip to content

Commit e92ba04

Browse files
devsdenepaldevsdenepal
committed
init login firebase integrate
1 parent b307b0d commit e92ba04

File tree

8 files changed

+1321
-20
lines changed

8 files changed

+1321
-20
lines changed

‎package-lock.json‎

Lines changed: 1031 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@
1212
"dependencies": {
1313
"@popperjs/core": "^2.11.8",
1414
"bootstrap": "^5.3.3",
15+
"firebase": "^10.13.1",
1516
"react": "^18.3.1",
16-
"react-dom": "^18.3.1"
17+
"react-dom": "^18.3.1",
18+
"react-router-dom": "^6.26.2",
19+
"react-testify": "^0.0.13",
20+
"react-toastify": "^10.0.5"
1721
},
1822
"devDependencies": {
1923
"@eslint/js": "^9.9.0",

‎src/App.jsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
1-
import './App.css';
2-
import Footer from './assets/Components/Footer';
3-
import Navbar from './assets/Components/Navbar';
4-
import Dashboard from './assets/Pages/Dashboard';
1+
// import { useState } from 'react';
2+
// import { useEffect } from 'react';
3+
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
4+
import { ToastContainer } from 'react-toastify';
5+
import 'react-toastify/dist/ReactToastify.css';
6+
import Login from './assets/Pages/login';
7+
import SignUp from './assets/Pages/register';
8+
import Dashboard from './assets/Pages/Dashboard'
9+
// import auth from './assets/Pages/firebase'
510

611
function App() {
7-
8-
12+
// const [user, setUser] = useState();
13+
// useEffect(() => {
14+
// auth.onAuthStateChanged((user) => {
15+
// setUser(user);
16+
// });
17+
// });
918
return (
10-
<>
11-
<Navbar></Navbar>
12-
<div className="container py-4 px-3 mx-auto">
13-
<h1>Welcome to Open Courses!</h1>
14-
15-
<Dashboard></Dashboard>
19+
<Router>
20+
<div className='App'>
21+
<div className="auth-wrapper">
22+
<div className="auth-inner">
23+
<Routes>
24+
{/* <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} /> */}
25+
<Route path='/' element={<Login/>}/>
26+
<Route path="/login" element={<Login />} />
27+
<Route path="/register" element={<SignUp />} />
28+
<Route path='/dashboard' element={<Dashboard />}/>
29+
{/* <Route path="/profile" element={user ? <Profile /> : <Navigate to="/login" />} /> */}
30+
</Routes>
31+
<ToastContainer />
32+
</div>
33+
</div>
1634
</div>
17-
<Footer></Footer>
18-
</>
35+
</Router>
1936
);
2037
}
2138

‎src/assets/Components/Navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function Navbar() {
3030
<form className="me-2 mb-2 mb-lg-0">
3131
<input type="text" className="form-control form-control-sm" placeholder="Search" />
3232
</form>
33-
<a className="btn btn-primary" href="">Sign up</a>
33+
<a className="btn btn-primary" href="/login">Sign up</a>
3434
</div>
3535
</div>
3636
</div>

‎src/assets/Pages/firebase.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Import the functions you need from the SDKs you need
2+
import { initializeApp } from "firebase/app";
3+
import { getAuth } from "firebase/auth";
4+
// TODO: Add SDKs for Firebase products that you want to use
5+
// https://firebase.google.com/docs/web/setup#available-libraries
6+
7+
// Your web app's Firebase configuration
8+
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
9+
const firebaseConfig = {
10+
apiKey: "AIzaSyCYeWoa0iKtDr9VV2iSZ9tZQqyWuBHWXnU",
11+
authDomain: "opencourses-6a478.firebaseapp.com",
12+
projectId: "opencourses-6a478",
13+
storageBucket: "opencourses-6a478.appspot.com",
14+
messagingSenderId: "139996396922",
15+
appId: "1:139996396922:web:5e0aec9a81d6aa30182ac3",
16+
measurementId: "G-1T13ESR8EJ"
17+
};
18+
19+
// Initialize Firebase
20+
const app = initializeApp(firebaseConfig);
21+
export const auth=getAuth();
22+
export default app;

‎src/assets/Pages/login.jsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { signInWithEmailAndPassword } from "firebase/auth";
2+
import { useState } from "react";
3+
import { auth } from "./firebase";
4+
import { toast } from "react-toastify";
5+
import Navbar from '../Components/Navbar'
6+
function Login() {
7+
const [email, setEmail] = useState("");
8+
const [password, setPassword] = useState("");
9+
10+
const handleSubmit = async (e) => {
11+
e.preventDefault();
12+
try {
13+
await signInWithEmailAndPassword(auth, email, password);
14+
console.log("User logged in Successfully");
15+
window.location.href = "/dashboard";
16+
toast.success("User logged in Successfully", {
17+
position: "top-center",
18+
});
19+
} catch (error) {
20+
console.log(error.message);
21+
22+
toast.error(error.message, {
23+
position: "bottom-center",
24+
});
25+
}
26+
};
27+
28+
return (
29+
<>
30+
<Navbar></Navbar>
31+
<form onSubmit={handleSubmit} className="container mt-5 w-25">
32+
<h3 className="text-center mb-2">Login</h3>
33+
34+
<div data-mdb-input-init className="form-outline mb-4">
35+
<label>Email address</label>
36+
<input
37+
type="email"
38+
className="form-control"
39+
placeholder="Enter email"
40+
value={email}
41+
onChange={(e) => setEmail(e.target.value)}
42+
/>
43+
</div>
44+
45+
<div data-mdb-input-init className="form-outline mb-4">
46+
<label>Password</label>
47+
<input
48+
type="password"
49+
className="form-control"
50+
placeholder="Enter password"
51+
value={password}
52+
onChange={(e) => setPassword(e.target.value)}
53+
/>
54+
</div>
55+
56+
<div className="d-grid">
57+
<button type="submit" className="btn btn-primary mb-3">
58+
Submit
59+
</button>
60+
</div>
61+
<p className="forgot-password text-right">
62+
New user? <a href="/register">Register Here</a>
63+
</p>
64+
</form>
65+
</>
66+
);
67+
}
68+
69+
export default Login;

‎src/assets/Pages/profile.jsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useEffect, useState } from "react";
2+
import { auth} from "./firebase";
3+
import { doc, getDoc } from "firebase/firestore";
4+
5+
function Profile() {
6+
const [userDetails, setUserDetails] = useState(null);
7+
const fetchUserData = async () => {
8+
auth.onAuthStateChanged(async (user) => {
9+
console.log(user);
10+
11+
const docRef = doc( "Users", user.uid);
12+
const docSnap = await getDoc(docRef);
13+
if (docSnap.exists()) {
14+
setUserDetails(docSnap.data());
15+
console.log(docSnap.data());
16+
} else {
17+
console.log("User is not logged in");
18+
}
19+
});
20+
};
21+
useEffect(() => {
22+
fetchUserData();
23+
}, []);
24+
25+
async function handleLogout() {
26+
try {
27+
await auth.signOut();
28+
window.location.href = "/login";
29+
console.log("User logged out successfully!");
30+
} catch (error) {
31+
console.error("Error logging out:", error.message);
32+
}
33+
}
34+
return (
35+
<div>
36+
{userDetails ? (
37+
<>
38+
<div style={{ display: "flex", justifyContent: "center" }}>
39+
<img
40+
src={userDetails.photo}
41+
width={"40%"}
42+
style={{ borderRadius: "50%" }}
43+
/>
44+
</div>
45+
<h3>Welcome {userDetails.firstName} 🙏🙏</h3>
46+
<div>
47+
<p>Email: {userDetails.email}</p>
48+
<p>First Name: {userDetails.firstName}</p>
49+
{/* <p>Last Name: {userDetails.lastName}</p> */}
50+
</div>
51+
<button className="btn btn-primary" onClick={handleLogout}>
52+
Logout
53+
</button>
54+
</>
55+
) : (
56+
<p>Loading...</p>
57+
)}
58+
</div>
59+
);
60+
}
61+
export default Profile;

‎src/assets/Pages/register.jsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { createUserWithEmailAndPassword } from "firebase/auth";
2+
import { useState } from "react";
3+
import { auth } from "./firebase";
4+
import { setDoc, doc } from "firebase/firestore";
5+
import { toast } from "react-toastify";
6+
import Navbar from "../Components/Navbar";
7+
8+
function Register() {
9+
const [email, setEmail] = useState("");
10+
const [password, setPassword] = useState("");
11+
const [fname, setFname] = useState("");
12+
const [lname, setLname] = useState("");
13+
14+
const handleRegister = async (e) => {
15+
e.preventDefault();
16+
try {
17+
await createUserWithEmailAndPassword(auth, email, password);
18+
const user = auth.currentUser;
19+
console.log(user);
20+
// if (user) {
21+
// await setDoc(doc(db, "Users", user.uid), {
22+
// email: user.email,
23+
// firstName: fname,
24+
// lastName: lname,
25+
// photo:""
26+
// });
27+
// }
28+
console.log("User Registered Successfully!!");
29+
toast.success("User Registered Successfully!!", {
30+
position: "top-center",
31+
});
32+
} catch (error) {
33+
console.log(error.message);
34+
toast.error(error.message, {
35+
position: "bottom-center",
36+
});
37+
}
38+
};
39+
40+
return (
41+
<>
42+
<Navbar></Navbar>
43+
<form onSubmit={handleRegister} className="container mt-5 w-25">
44+
<h3 className="text-center mb-2">Sign Up</h3>
45+
46+
<div className="mb-3">
47+
<label>First name</label>
48+
<input
49+
type="text"
50+
className="form-control"
51+
placeholder="First name"
52+
onChange={(e) => setFname(e.target.value)}
53+
required
54+
/>
55+
</div>
56+
57+
<div className="mb-3">
58+
<label>Last name</label>
59+
<input
60+
type="text"
61+
className="form-control"
62+
placeholder="Last name"
63+
onChange={(e) => setLname(e.target.value)}
64+
/>
65+
</div>
66+
67+
<div className="mb-3">
68+
<label>Email address</label>
69+
<input
70+
type="email"
71+
className="form-control"
72+
placeholder="Enter email"
73+
onChange={(e) => setEmail(e.target.value)}
74+
required
75+
/>
76+
</div>
77+
78+
<div className="mb-3">
79+
<label>Password</label>
80+
<input
81+
type="password"
82+
className="form-control"
83+
placeholder="Enter password"
84+
onChange={(e) => setPassword(e.target.value)}
85+
required
86+
/>
87+
</div>
88+
89+
<div className="d-grid">
90+
<button type="submit" className="btn btn-primary">
91+
Sign Up
92+
</button>
93+
</div>
94+
<p className="forgot-password text-right">
95+
Already registered <a href="/login">Login</a>
96+
</p>
97+
</form>
98+
</>
99+
);
100+
}
101+
export default Register;

0 commit comments

Comments
 (0)