diff --git a/app/auth/useAuth.jsx b/app/auth/useAuth.jsx
new file mode 100644
index 0000000..74bddaf
--- /dev/null
+++ 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
new file mode 100644
index 0000000..8b61136
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+}
diff --git a/app/context/user.js b/app/context/user.js
new file mode 100644
index 0000000..1e78def
--- /dev/null
+++ 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
index 958088a..b60808d 100644
--- 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 (
-
- {children}
+
+
+ {children}
+
);
diff --git a/app/page.js b/app/page.js
new file mode 100644
index 0000000..c81cf46
--- /dev/null
+++ 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 (
+
+
+ Home
+ {!!user ? (
+
Hi, {user.displayName}
+ ) : (
+
no user authenticated
+ )}
+
+
+ );
+}
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 770c8bf..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Image from 'next/image';
-
-export default function Home() {
- return (
-
- Home
-
- );
-}
diff --git a/components/shared/navbar.tsx b/components/shared/navbar.tsx
index 283cb20..b1348c7 100644
--- 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 (
LOGO
-
Login
-
Sign Up
+ <>
+ {user ? (
+
Logout
+ ) : (
+ <>
+
Login
+
Sign Up{' '}
+ >
+ )}
+ >
);
-}
+};
-export default Navbar
\ No newline at end of file
+export default Navbar;