Skip to content

Commit

Permalink
create authContext
Browse files Browse the repository at this point in the history
  • Loading branch information
mulundapm committed Jul 9, 2024
1 parent 18e7a50 commit 5a315ab
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 36 deletions.
29 changes: 29 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"firebase": "^10.12.2",
"firebaseui": "^6.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
Expand Down
19 changes: 11 additions & 8 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,24 @@ import RestaurantPage from './Pages/RestaurantPage';
import FavoritesPage from './Pages/FavoritesPage';
import LoginPage from './Pages/LoginPage';
import { FavoriteProvider } from './Contexts/FavoriteDishes';
import { AuthProvider } from './Contexts/Auth';


function App() {

console.log(process.env.REACT_APP_FB_API);
return (
<Router>
<FavoriteProvider>
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/restaurant/:id" element={<RestaurantPage/>}/>
<Route path="/favourites" element={<FavoritesPage/>}/>
</Routes>
</FavoriteProvider>
<AuthProvider>
<FavoriteProvider>
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/restaurant/:id" element={<RestaurantPage/>}/>
<Route path="/favourites" element={<FavoritesPage/>}/>
</Routes>
</FavoriteProvider>
</AuthProvider>
</Router>
);
}
Expand Down
40 changes: 30 additions & 10 deletions src/Components/Auth.jsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,59 @@
import React, { useState } from 'react'
import { auth, googleProvider } from '../config/firebase'
import { createUserWithEmailAndPassword, signInWithPopup, signOut } from 'firebase/auth'
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signInWithPopup, signOut } from 'firebase/auth'
import { useAuth } from '../Contexts/Auth'
import { Link } from 'react-router-dom';

function Auth() {
const { currentUser, userLoggedIn } = useAuth()
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isSigningIn, setIsSigningIn] = useState(false)

console.log(auth?.currentUser?.email)
const signIn = async () =>{
try{
await createUserWithEmailAndPassword(auth, email, password)} catch(err){
console.error(err)
}
}
// const signUp = async () =>{
// try{
// await createUserWithEmailAndPassword(auth, email, password)} catch(err){
// console.error(err)
// }
// }
// const signIn = async () =>{
// if (!isSigningIn)
// try{
// setIsSigningIn(true)
// await signInWithEmailAndPassword(auth, email, password)} catch(err){
// console.error(err)
// }
// }

const signInWithGoogle = async () =>{
if (!isSigningIn)
try{
await signInWithPopup(auth, googleProvider)} catch(err){
console.error(err)
}
}

const logout = async () =>{
try{
await signOut(auth)} catch(err){
console.error(err)
}
}
return (

return (
<div>
{/* <input type="text" placeholder='Email' onChange={(e)=> setEmail(e.target.value)}/>
<input type="text" placeholder='Password'onChange={(e)=> setPassword(e.target.value)} type="password"/>
<button onClick={signUp}>Sign up</button>
<input type="text" placeholder='Email' onChange={(e)=> setEmail(e.target.value)}/>
<input type="text" placeholder='Password'onChange={(e)=> setPassword(e.target.value)} type="password"/>
<button onClick={signIn}>Sign in</button> */}
<button onClick={signInWithGoogle}>Sign in with Google</button>
<button onClick={logout}>Log out</button>
<button onClick={()=>{logout(). then(()=> <Link to="/"/>)}}>Log out</button>
<h4>Logged in as: {auth?.currentUser?.displayName}</h4>
</div>
)
)
}

export default Auth
17 changes: 16 additions & 1 deletion src/Components/HighlightedDish.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,19 @@ function HighlightedDish() {

export default HighlightedDish

// container center grid
// container center grid

// const signUp = async () =>{
// try{
// await createUserWithEmailAndPassword(auth, email, password)} catch(err){
// console.error(err)
// }
// }
// const signIn = async () =>{
// if (!isSigningIn)
// try{
// setIsSigningIn(true)
// await signInWithEmailAndPassword(auth, email, password)} catch(err){
// console.error(err)
// }
// }
49 changes: 41 additions & 8 deletions src/Contexts/Auth.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,45 @@
// import { useState } from "react";
// import a
import { useContext, useEffect, useState} from "react";
import { auth } from "../config/firebase";
import { onAuthStateChanged } from "firebase/auth";
import { createContext } from "react";
import React from "react";

// const AuthContext = React.createContext();

// export function AuthProvider({ children }){
// const [currentUser, setCurrentUser] = useState(null);
// const [userLoggedIn, setUserLoggedIn] = useState(false);
// const [loading, setLoading] = useState(true);
const AuthContext = React.createContext();

export function useAuth(){
return useContext(AuthContext)
}

// }
export function AuthProvider({ children }){
const [currentUser, setCurrentUser] = useState(null);
const [userLoggedIn, setUserLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);

useEffect(()=>{
const unsubscribe = onAuthStateChanged(auth, initializeUser);
return unsubscribe
}, [])

async function initializeUser(user){
if (user) {
setCurrentUser({...user});
setUserLoggedIn(true)
} else {
setCurrentUser(null);
setUserLoggedIn(false)
}
setLoading(false)
}

const value = {
currentUser,
userLoggedIn,
loading
}
return(
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
17 changes: 8 additions & 9 deletions src/Pages/LoginPage.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { useEffect, useState } from 'react'
import Auth from '../Components/Auth'
import NavBar from '../Components/NavBar'
import Header from '../Components/Header'
import { db } from '../config/firebase'
import { getDocs , collection, addDoc} from 'firebase/firestore'
import AppLayout from '../Components/AppLayout'
import firebase from 'firebase/compat/app'
import { serverTimestamp } from 'firebase/firestore'


function LoginPage() {

const [foodList, setFoodList] =useState([])
const menuItemCollectionRef = collection(db, "menu-items")
// const [foodList, setFoodList] =useState([])
// const menuItemCollectionRef = collection(db, "menu-items")
// useEffect(()=>{
// const getfoodList = async () =>{
// try {
Expand All @@ -27,8 +26,8 @@ function LoginPage() {
// }, [])

//Mail list upload
const[newName, setNewName] = useState("")
const[newEmail, setEmail] = useState("")
const[newName, setNewName] = useState("");
const[newEmail, setEmail] = useState("");

const mailListRef = collection(db, "mail-list")

Expand All @@ -55,7 +54,7 @@ function LoginPage() {
return (
<div>
<AppLayout>
{/* <Auth/> */}
<Auth/>
<div className='container mail-list'>
<h2>Follow for more</h2>
<p>If you want to follow along the development of this app, drop down your name and email and I will email you when there is any interesting updates.</p>
Expand All @@ -71,14 +70,14 @@ function LoginPage() {
<button onClick={onSubmitInfo} className='primary-button'>Submit</button>
</form>
</div>
<div>
{/* <div>
{foodList.map((food) => (
<div>
<h1>{food.name}</h1>
<h2>{food.course}</h2>
</div>
))}
</div>
</div> */}
<div className="contact-info">
@mulundapm
</div>
Expand Down

0 comments on commit 5a315ab

Please sign in to comment.