add: add new user to firebase database
- create a collection of user in firebase database when they signup
This commit is contained in:
parent
107e676556
commit
37184795fd
|
@ -297,7 +297,7 @@ form button {
|
|||
top: 20%;
|
||||
right: 15px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, { useContext } from "react";
|
|||
import { signOut } from "firebase/auth";
|
||||
import { auth } from "../firebase.config";
|
||||
import { AuthContext } from "../context/AuthContext";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const NavLinks = ({ svg, link, text, setChatLog }) => {
|
||||
const { dispatch } = useContext(AuthContext);
|
||||
|
@ -20,7 +21,7 @@ const NavLinks = ({ svg, link, text, setChatLog }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
<Link
|
||||
href={link}
|
||||
target={link && "_blank"}
|
||||
rel="noreferrer"
|
||||
|
@ -31,7 +32,7 @@ const NavLinks = ({ svg, link, text, setChatLog }) => {
|
|||
{svg}
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useContext, useState } from "react";
|
||||
import "./signupform.css";
|
||||
import { createUserWithEmailAndPassword, signInWithPopup } from "firebase/auth";
|
||||
import { auth, goggleAuthProvider } from "../../firebase.config";
|
||||
import { auth, db, goggleAuthProvider } from "../../firebase.config";
|
||||
import { AuthContext } from "../../context/AuthContext";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import SvgComponent from "../SvgComponent";
|
||||
import { addDoc, collection } from "firebase/firestore";
|
||||
|
||||
const SignupForm = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
|
@ -15,7 +16,7 @@ const SignupForm = () => {
|
|||
const { dispatch } = useContext(AuthContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
const handleSignup = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
|
@ -26,6 +27,15 @@ const SignupForm = () => {
|
|||
);
|
||||
const user = userCredential.user;
|
||||
dispatch({ type: "SIGNUP", payload: user });
|
||||
|
||||
// add user to firebase database
|
||||
const docRef = await addDoc(collection(db, "users"), {
|
||||
email,
|
||||
password,
|
||||
date_of_sign_up: new Date(),
|
||||
});
|
||||
console.log("Document written with ID: ", docRef.id);
|
||||
|
||||
// once user is signed in navigate them to the home page
|
||||
navigate("/");
|
||||
} catch (error) {
|
||||
|
@ -42,6 +52,17 @@ const SignupForm = () => {
|
|||
const user = userCredential.user;
|
||||
dispatch({ type: "SIGNUP", payload: user });
|
||||
console.log("user", user);
|
||||
|
||||
// data when user signup with goggle account
|
||||
const email = user.email;
|
||||
const user_ID_from_Goggle_Sign_up = user.uid;
|
||||
// add user to firebase database
|
||||
const docRef = await addDoc(collection(db, "users"), {
|
||||
email,
|
||||
user_ID_from_Goggle_Sign_up,
|
||||
date_of_sign_up: new Date(),
|
||||
});
|
||||
console.log("Document written with ID: ", docRef.id);
|
||||
// once user is signed in navigate them to the home page
|
||||
navigate("/");
|
||||
} catch (error) {
|
||||
|
@ -56,7 +77,7 @@ const SignupForm = () => {
|
|||
<div className="signupFormContainer">
|
||||
<SvgComponent w={50} h={50} stroke="#202123" />
|
||||
<h1>Create your account</h1>
|
||||
<form onSubmit={handleLogin}>
|
||||
<form onSubmit={handleSignup}>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// Import the functions you need from the SDKs you need
|
||||
import { initializeApp } from "firebase/app";
|
||||
import { getAuth, GoogleAuthProvider } from "firebase/auth";
|
||||
import { getFirestore } from "firebase/firestore";
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: process.env.REACT_APP_FIREBASE_KEY,
|
||||
|
@ -17,4 +18,7 @@ const firebaseApp = initializeApp(firebaseConfig);
|
|||
const auth = getAuth(firebaseApp);
|
||||
const goggleAuthProvider = new GoogleAuthProvider();
|
||||
|
||||
export { auth, goggleAuthProvider };
|
||||
// Initialize Cloud Firestore and get a reference to the service
|
||||
const db = getFirestore(firebaseApp);
|
||||
|
||||
export { auth, goggleAuthProvider, db };
|
||||
|
|
Loading…
Reference in New Issue