Merge pull request #15 from the-collab-lab/setup-firebase-auth

add firebase config
the-collab-lab · Aug 10, 2024 · e07fb18 · e07fb18
2 parents b8b924e + e25a552
commit e07fb18
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/config.js b/src/api/config.js
@@ -4,12 +4,12 @@ import { getAuth } from 'firebase/auth';
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
-	apiKey: 'FILL_ME_IN',
-	authDomain: 'FILL_ME_IN',
-	projectId: 'FILL_ME_IN',
-	storageBucket: 'FILL_ME_IN',
-	messagingSenderId: 'FILL_ME_IN',
-	appId: 'FILL_ME_IN',
+	apiKey: 'AIzaSyC4rKWbeuFoe8URakxp2oei_GIzqsSWFrg',
+	authDomain: 'tcl-79-smart-shopping-list.firebaseapp.com',
+	projectId: 'tcl-79-smart-shopping-list',
+	storageBucket: 'tcl-79-smart-shopping-list.appspot.com',
+	messagingSenderId: '141815834662',
+	appId: '1:141815834662:web:a40412a9106b2a470f9ee7',
 };
 
 // Initialize Firebase

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { auth } from './config.js';
-import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
 
 /**
@@ -11,7 +11,7 @@ import { addUserToDatabase } from './firebase.js';
 export const SignInButton = () => (
 	<button
 		type="button"
-		onClick={() => signInWithRedirect(auth, new GoogleAuthProvider())}
+		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
 		Sign In
 	</button>

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,8 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 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!
@@ -13,20 +12,11 @@ import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
  */
 
 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 />