adding user context for logged in user

cherryontech · Apr 27, 2024 · 1c6898b · 1c6898b
1 parent e29bfe3
commit 1c6898b
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 21 deletions.
diff --git a/app/auth/useAuth.jsx b/app/auth/useAuth.jsx
@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+import { UserContext } from '../context/user';
+
+export const useAuth = () => {
+	const { user } = useContext(UserContext);
+	console.log(user, UserContext);
+
+	return { user };
+};
diff --git a/app/context/UserProvider.jsx b/app/context/UserProvider.jsx
@@ -0,0 +1,25 @@
+'use client';
+import { useEffect, useState, createContext } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import { UserContext } from '../context/user';
+import { auth } from '@/app/firebase';
+
+export function UserProvider({ children }) {
+	const [user, setUser] = useState(null);
+
+	useEffect(() => {
+		const listen = onAuthStateChanged(auth, (fireBaseUser) => {
+			if (fireBaseUser) {
+				setUser(fireBaseUser);
+			} else {
+				setUser(null);
+			}
+		});
+	}, []);
+
+	return (
+		<UserContext.Provider value={{ user, setUser }}>
+			{children}
+		</UserContext.Provider>
+	);
+}
diff --git a/app/context/user.js b/app/context/user.js
@@ -0,0 +1,7 @@
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext({
+	user: undefined,
+	setUser: () => {},
+});
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,7 @@ import './globals.css';
 import Navbar from '@/components/shared/navbar';
 
 const inter = Inter({ subsets: ['latin'] });
-
+import { UserProvider } from './context/UserProvider';
 export const metadata: Metadata = {
 	title: 'Create Next App',
 	description: 'Generated by create next app',
@@ -18,8 +18,10 @@ export default function RootLayout({
 	return (
 		<html lang='en'>
 			<body className={inter.className}>
-				<Navbar />
-				{children}
+				<UserProvider>
+					<Navbar />
+					{children}
+				</UserProvider>
 			</body>
 		</html>
 	);

diff --git a/app/page.js b/app/page.js
@@ -0,0 +1,20 @@
+'use client';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { useAuth } from './auth/useAuth';
+import { UserProvider } from './context/UserProvider';
+export default function Home() {
+	const { user } = useAuth();
+	return (
+		<UserProvider>
+			<div>
+				Home
+				{!!user ? (
+					<div>Hi, {user.displayName}</div>
+				) : (
+					<div>no user authenticated</div>
+				)}
+			</div>
+		</UserProvider>
+	);
+}
diff --git a/app/page.tsx b/app/page.tsx
diff --git a/components/shared/navbar.tsx b/components/shared/navbar.tsx
@@ -1,18 +1,28 @@
-import Link from 'next/link'
-import React from 'react'
-
-type Props = {}
+'use client';
+import Link from 'next/link';
+import React from 'react';
+import { useAuth } from '@/app/auth/useAuth';
+type Props = {};
 
 const Navbar = (props: Props) => {
-  return (
+	const { user } = useAuth();
+	return (
 		<div className='flex w-full items-center justify-between px-16 py-5'>
 			<p>LOGO</p>
 			<div className='flex items-center justify-center gap-5'>
-				<Link href={'/auth/login'}>Login</Link>
-				<Link href={'/auth/signUp'}>Sign Up</Link>
+				<>
+					{user ? (
+						<div>Logout</div>
+					) : (
+						<>
+							<Link href={'/auth/login'}>Login</Link>
+							<Link href={'/auth/signUp'}>Sign Up</Link>{' '}
+						</>
+					)}
+				</>
 			</div>
 		</div>
 	);
-}
+};
 
-export default Navbar
+export default Navbar;