From 97583db58e196e4e06f46d3a409dbed996432680 Mon Sep 17 00:00:00 2001
From: Luis Augusto <hello@luis.app>
Date: Mon, 12 Jun 2023 18:00:55 -0700
Subject: [PATCH] Set Up Firebase Auth

---
 .gitignore           |  1 +
 src/api/config.js    |  2 ++
 src/api/useAuth.jsx  | 28 ++++++++++++++++++++++++++++
 src/views/Layout.jsx | 11 +++++++++++
 4 files changed, 42 insertions(+)
 create mode 100644 src/api/useAuth.jsx

diff --git a/.gitignore b/.gitignore
index f5fdc53..4a53979 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 .eslintcache
+/.idea
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/api/config.js b/src/api/config.js
index 6084ed2..47c4a10 100644
--- a/src/api/config.js
+++ b/src/api/config.js
@@ -1,5 +1,6 @@
 import { initializeApp } from 'firebase/app';
 import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -15,3 +16,4 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
+export const auth = getAuth(app);
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
new file mode 100644
index 0000000..765b8cf
--- /dev/null
+++ b/src/api/useAuth.jsx
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { auth } from './config.js';
+import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';
+
+export const SignInButton = () => (
+	<button
+		type="button"
+		onClick={() => signInWithRedirect(auth, new GoogleAuthProvider())}
+	>
+		Sign In
+	</button>
+);
+
+export const SignOutButton = () => (
+	<button type="button" onClick={() => auth.signOut()}>
+		Sign Out
+	</button>
+);
+
+export const useAuth = () => {
+	const [user, setUser] = useState(null);
+
+	useEffect(() => {
+		auth.onAuthStateChanged((user) => setUser(user));
+	}, []);
+
+	return { user };
+};
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 0987d76..61199eb 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,6 +1,8 @@
 import { Outlet } from 'react-router-dom';
 
 import './Layout.css';
+import { auth } from '../api/config.js';
+import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -11,11 +13,20 @@ import './Layout.css';
  */
 
 export function Layout() {
+	const { user } = useAuth();
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
+					{!!user ? (
+						<div>
+							<span>Signed in as {auth.currentUser.displayName}</span> (
+							<SignOutButton />)
+						</div>
+					) : (
+						<SignInButton />
+					)}
 				</header>
 				<main className="Layout-main">
 					<Outlet />