From 2dd66ea244ebd38d6f539cb04c28e0628f132cf1 Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Sat, 1 Oct 2022 15:45:44 +0100 Subject: [PATCH 1/2] Enable Firebase login --- package-lock.json | 50 ++++++++++++++++++- package.json | 5 +- src/App.css | 4 +- src/App.js | 121 +++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 164 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1be014..e118b4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "firebase": "^9.10.0", + "firebaseui": "^6.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -6805,6 +6806,11 @@ "node": ">=0.8.0" } }, + "node_modules/dialog-polyfill": { + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz", + "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw==" + }, "node_modules/didyoumean": { "version": "1.2.2", "license": "Apache-2.0" @@ -8143,7 +8149,8 @@ }, "node_modules/firebase": { "version": "9.10.0", - "license": "Apache-2.0", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.10.0.tgz", + "integrity": "sha512-oSuED6BT+gQrOoXPV/xkxBLMk03A9nDXosW0xy4loQtGRJr9gW6JXgEOr0nmXFMTGzP87CpoC8Kd6y7XKSAeqQ==", "dependencies": { "@firebase/analytics": "0.8.0", "@firebase/analytics-compat": "0.1.13", @@ -8173,6 +8180,18 @@ "@firebase/util": "1.6.3" } }, + "node_modules/firebaseui": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.1.tgz", + "integrity": "sha512-SMNCFt/xns3mnvd0hImEDu7di5fqRU3MVyIaXpVEfg6v0bH6f3m+YybivU7KElRUT/47DHMn++D8MrZYYnoN5g==", + "dependencies": { + "dialog-polyfill": "^0.4.7", + "material-design-lite": "^1.2.0" + }, + "peerDependencies": { + "firebase": "^9.1.3" + } + }, "node_modules/flat-cache": { "version": "3.0.4", "license": "MIT", @@ -11695,6 +11714,14 @@ "tmpl": "1.0.5" } }, + "node_modules/material-design-lite": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz", + "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "license": "CC0-1.0" @@ -20735,6 +20762,11 @@ "minimist": "^1.2.6" } }, + "dialog-polyfill": { + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz", + "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw==" + }, "didyoumean": { "version": "1.2.2" }, @@ -21584,6 +21616,8 @@ }, "firebase": { "version": "9.10.0", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.10.0.tgz", + "integrity": "sha512-oSuED6BT+gQrOoXPV/xkxBLMk03A9nDXosW0xy4loQtGRJr9gW6JXgEOr0nmXFMTGzP87CpoC8Kd6y7XKSAeqQ==", "requires": { "@firebase/analytics": "0.8.0", "@firebase/analytics-compat": "0.1.13", @@ -21613,6 +21647,15 @@ "@firebase/util": "1.6.3" } }, + "firebaseui": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.1.tgz", + "integrity": "sha512-SMNCFt/xns3mnvd0hImEDu7di5fqRU3MVyIaXpVEfg6v0bH6f3m+YybivU7KElRUT/47DHMn++D8MrZYYnoN5g==", + "requires": { + "dialog-polyfill": "^0.4.7", + "material-design-lite": "^1.2.0" + } + }, "flat-cache": { "version": "3.0.4", "requires": { @@ -23738,6 +23781,11 @@ "tmpl": "1.0.5" } }, + "material-design-lite": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz", + "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==" + }, "mdn-data": { "version": "2.0.4" }, diff --git a/package.json b/package.json index 76e9e59..8ed91ad 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,12 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "firebase": "^9.10.0", + "firebaseui": "^6.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "web-vitals": "^2.1.4", - "firebase": "^9.10.0" + "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.css b/src/App.css index 74b5e05..479889f 100644 --- a/src/App.css +++ b/src/App.css @@ -3,7 +3,7 @@ } .App-logo { - height: 40vmin; + height: 20vmin; pointer-events: none; } @@ -15,7 +15,7 @@ .App-header { background-color: #282c34; - min-height: 100vh; + min-height: 10vh; display: flex; flex-direction: column; align-items: center; diff --git a/src/App.js b/src/App.js index 3784575..c5808ca 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,122 @@ import logo from './logo.svg'; import './App.css'; +import { initializeApp } from 'firebase/app'; +import { getFirestore, collection, getDocs, connectFirestoreEmulator } from 'firebase/firestore'; +import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInWithRedirect, getRedirectResult, connectAuthEmulator } from "firebase/auth"; +import { getAnalytics } from "firebase/analytics"; +import { useState } from 'react'; + +const firebaseConfig = { + apiKey: "AIzaSyCQ3FcfwlAckhZNEVz3RmGGGuscW1jWDHY", + authDomain: "pico22.mgrove.uk", + databaseURL: "https://picohack-2022-default-rtdb.europe-west1.firebasedatabase.app", + projectId: "picohack-2022", + storageBucket: "picohack-2022.appspot.com", + messagingSenderId: "200913112341", + appId: "1:200913112341:web:4f0edd8dfa37df258bad1c", + measurementId: "G-2BENT50640" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +const db = getFirestore(app); +const auth = getAuth(app); + + +// emulators +connectFirestoreEmulator(db, 'localhost', 8080); +connectAuthEmulator(auth, "http://localhost:9099"); + + + +// onAuthStateChanged(auth, (user) => { +// if (user) { +// // User is signed in, see docs for a list of available properties +// // https://firebase.google.com/docs/reference/js/firebase.User +// const uid = user.uid; +// // ... +// } else { +// // User is signed out +// // ... +// }}); + + + + function App() { + const signIn = (event) => { + event.preventDefault(); + signInWithEmailAndPassword(auth, email, password) + .then((userCredential) => { + // Signed in + const user = userCredential.user; + alert("logged in!"); + // ... + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + }); + }; + + const signUp = (event) => { + event.preventDefault(); + createUserWithEmailAndPassword(auth, email, password) + .then((userCredential) => { + // Signed in + const user = userCredential.user; + alert("logged in!"); + // ... + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.log(error); + // .. + }); + }; + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); return (
logo -

- Edit src/App.js and save to reload. -

- - Learn React - +

Tiny Town Community First Response

+
+
+ setEmail(e.target.value)} + value={email} + /> + setPassword(e.target.value)} + value={password} + /> + +
+
+ setEmail(e.target.value)} + value={email} + /> + setPassword(e.target.value)} + value={password} + /> + +
+
); } From cf66e2673a38aa557202539d4509d7c2224f23b6 Mon Sep 17 00:00:00 2001 From: Bob Hart <77585854+bhart17@users.noreply.github.com> Date: Sat, 1 Oct 2022 15:47:12 +0100 Subject: [PATCH 2/2] gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index dbb58ff..501b72d 100644 --- a/.gitignore +++ b/.gitignore @@ -64,3 +64,6 @@ node_modules/ # dotenv environment variables file .env + + +.vscode/ \ No newline at end of file