Breaking News: Grepper is joining You.com. Read the official announcement!

login and signup with firebase and reactjs

Clumsy Chicken answered on March 8, 2023 Popularity 9/10 Helpfulness 3/10

answer login and signup with firebase and reactjs

related firebase signup with react

login and signup with firebase and reactjs

Comment

import React, {useState} from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import {  createUserWithEmailAndPassword  } from 'firebase/auth';
import { auth } from '../firebase';
 
const Signup = () => {
    const navigate = useNavigate();
 
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('');
 
    const onSubmit = async (e) => {
      e.preventDefault()
     
      await createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            console.log(user);
            navigate("/login")
            // ...
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage);
            // ..
        });
 
   
    }
 
  return (
    <main >        
        <section>
            <div>
                <div>                  
                    <h1> FocusApp </h1>                                                                            
                    <form>                                                                                            
                        <div>
                            <label htmlFor="email-address">
                                Email address
                            </label>
                            <input
                                type="email"
                                label="Email address"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}  
                                required                                    
                                placeholder="Email address"                                
                            />
                        </div>

                        <div>
                            <label htmlFor="password">
                                Password
                            </label>
                            <input
                                type="password"
                                label="Create password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)} 
                                required                                 
                                placeholder="Password"              
                            />
                        </div>                                             
                        
                        <button
                            type="submit" 
                            onClick={onSubmit}                        
                        >  
                            Sign up                                
                        </button>
                                                                     
                    </form>
                   
                    <p>
                        Already have an account?{' '}
                        <NavLink to="/login" >
                            Sign in
                        </NavLink>
                    </p>                   
                </div>
            </div>
        </section>
    </main>
  )
}
 
export default Signup

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.freecodecamp.org

Tags: firebase javascript reactjs

Link to this answer
Share Copy Link

Contributed on Mar 08 2023

Clumsy Chicken

0 Answers Avg Quality 2/10

Closely Related Answers

firebase signup with react

Comment

import { db } from "../firebase.config";
import { createUserWithEmailAndPassword, getAuth, updateProfile } from "firebase/auth";
import { setDoc, doc, serverTimestamp } from "firebase/firestore";

const onSubmit = async (e) => {
      e.preventDefault();
      try {
         const auth = getAuth();
         // console.log(auth);

         const userCredential = await createUserWithEmailAndPassword(auth, email, password);
         //  console.log({ userCredential });
         const user = userCredential.user;

         updateProfile(auth.currentUser, {
            displayName: name,
         });

         const formDataCopy = { ...formData };
         delete formDataCopy.password;
         formDataCopy.timestamp = serverTimestamp();
         // console.log(formDataCopy)
         await setDoc(doc(db, "users", user.uid), formDataCopy);

        navigate("/");
        
      } catch (error) {
         // console.log(`error message`, error);
         toast.error("Somethings went wrong with registration");
      }
   };

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: firebase firebas

Link to this answer
Share Copy Link

Contributed on Mar 13 2023

Shirshak Kandel

0 Answers Avg Quality 2/10

login and signup with firebase and reactjs

Contents

More Related Answers

login and signup with firebase and reactjs

Closely Related Answers

firebase signup with react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.