Enable Firebase login
This commit is contained in:
50
package-lock.json
generated
50
package-lock.json
generated
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
121
src/App.js
121
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 (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<h1>Tiny Town Community First Response</h1>
|
||||
</header>
|
||||
<main>
|
||||
<form onSubmit={signUp}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email"
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
value={email}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
value={password}
|
||||
/>
|
||||
<input type="submit" value="Sign up"/>
|
||||
</form>
|
||||
<form onSubmit={signIn}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email"
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
value={email}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
value={password}
|
||||
/>
|
||||
<input type="submit" value="Sign in"/>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user