Merge pull request #32 from luisaugusto/main

Set Up Firebase Auth

.gitignore

@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 .eslintcache
+/.idea
 
 npm-debug.log*
 yarn-debug.log*

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);

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 };
+};

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 />