Sign In, SignUp and LogOut

Let’s first set up the firebase to a new project.

npm i firebase
const app = initializeApp(firebaseConfig);
I change it to
const fire= initializeApp(firebaseConfig);
and also added
import firebase from 'firebase';
export default fire;
import fire from '../fire'
import {Login} from './Login'
import {Hero} from './Hero'
import '../App.css'

function Register() {
const [user, setUser] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [passwordError, setPasswordError] = useState('');
const [emailError, setEmailError] = useState('');
const [hasAccount, setHasAccount] = useState(false);
const clearInputs = () => {
setEmail("")
setPassword("")
}
const clearErrors = () => {
setEmailError("")
setPasswordError("")
}
const handleLogin = () => {
clearErrors();
fire
.auth()
.signInWithEmailAndPassword(email, password)
.catch(err => {
switch(err.code) {
case "auth/invalid-email":
case "auth/user-disabeled":
case "auth/user-not-found":
setEmailError(err.message);
break;
case "auth/wrong-password"
setPasswordError(err.message);
break;
}
})}

const handleSignup = () => {
clearErrors();
fire
.auth()
.createUserWithEmailAndPassword(email, password)
.catch(err => {
switch(err.code) {
case "auth/email-already-in-use":
case "auth/invalid-email":
setEmailError(err.message);
break;
case "auth/week-password":
setPasswordError(err.message);
break;
}
})
}

const handleLogout =() => {
fire.auth().signOut();
}

const authListener = () => {
fire.auth().onAuthStateChanged((user) => {
if (user) {
clearInputs();
setUser(user);
} else {
setUser("")
}
})
}
useEffect(() => {
authListener();
}, [])
return (
<div className = "App">
<div classname="login">
<div className="container">
{ user ? (
<Hero handleLogout={handleLogout}/>
) : (
<Login
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
handleLogin={handleLogin}
handleSignup={handleSignup}
hasAccount={hasAccount}
setHasAccount={setHasAccount}
emailError={emailError}
passwordError={passwordError}
/>
)}
</div>
</div>
</div>
)}
export default Register
import React from 'react'
import './style.css'
export const Login = (props) => {const {
email,
setEmail,
password,
setPassword,
handleLogin,
handleSignup,
hasAccount,
setHasAccount,
emailError,
passwordError} = props;
return (
<div className="base-container">
<div className="header">LogIn</div>
<div className="content">
<div className="image">
<img src="pass in any pic url"/>
</div>
<div className="form">
<div className="form-group">
<lable htmlFor="username">Username</lable>
<input
type="text"
placeholder="username"
autoFocus
required
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<p className="errorMsg">{emailError}</p>
</div>
<div className="form-group">
<lable htmlFor="password">Password</lable>
<input
type="password"
placeholder="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<p className="errorMsg">{passwordError}</p>
</div>
</div>
</div>
<div>
<div className="footer">
{hasAccount ? (
<>
<button className="btn" onClick={handleLogin}>Sign in</button><p>Have an account ? <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span></p>
</>
) : (
<>
<button onClick={handleSignup} className="btn">Register</button>
<p>Don't have an account ? <span onClick={() => setHasAccount(!hasAccount) }>Register</span></p>
</>
)}
</div>
</div>
</div>
)
}
import React from 'react'export const Hero = ({handleLogout}) => {return (
<div classname="hero">
<nav>
<h2>Welcome</h2>
<button onClick={handleLogout}>Logout</button>
</nav>
</div>
)}
.base-container {
width: 100%;
/* // full size of the page */
display: flex;
flex-direction: column;
align-items: center;
}
.header {
font-size: 24px;
font-family: "Open Sans",
sans-serif;
}
.content {
display: flex;
flex-direction: column;
}
.image {
width: 21em;
}
.image > img {
width: 100%;
height: 100%;
}
.form {
margin-top: 2em;
display: flex;
flex-direction: column;
align-items: center;
}
.form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
}
.form-group > label {
font-size: 20px;
}
.form-group > input {
margin-top: 6px;
min-width: 18em;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans",sans-serif;
background-color: #f3f3f3;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
}
.form-group > input > :focus {
outline: none;
box-shadow: 0px 0px 12px 0.8px #0e81ce96;
}
.footer {
margin-top: 3em;
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");.App {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans",
sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow: 0px 0px 12px 2px rgba(15, 15, 15, 0.2);
border-radius: 4px;
position: relative;
z-index: 99;
width: 100%;
height: 100%;
z-index: 99;
padding: 17px 10px;
}
.btn {
font-size: 21px;
padding: 5px
20px;
border: 0;
background-color: #3498db;
color: #fff;
border-radius: 3px;
transition: all
250ms
ease-in-out;
cursor: pointer;
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Preparing to Learn JavaScript

Why You Should Stop Ignoring New Web Browser Features

React Forms Made Easy with react-binden🚀

Async Pipe’s benefits over subscribe

How to Create an Animated Hamburger Menu with Vanilla JavaScript

A hamburger menu with an arrow pointing to a cross indicating what will happen from animation start to animation end.

Node js Interview Question

Upgrading the Simple 4x4 Grid with JavaScript

Graphql query returning an unexpected data — Is it an Apollo cache issue?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stela Capsa

Stela Capsa

More from Medium

React Basic — What goes in componentDidMount?

A quick went through from creating a React web app to deploy with cPanel — Beginner’s guide

Lessons learned publishing a Content Security Policy

Make API Calls from a Chrome Extension