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;