Sign In, SignUp and LogOut

Stela Capsa

5 min readAug 31, 2021

With React and Google Firebase

I’ll write code for a very basic register form, fully functional.

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

Here we are creating a new project in firebase.

In your terminal add the next line to install the firebase.

npm i firebase

Next step lets add firebase to the app.

In the terminal lets create a new file name fire.js

src > fire.js let’s drop the next code from the google firebase to our new created file.

The code in the code editor should look like that:

I did a small change in the last line of code, I rename the variable from app to fire

const app = initializeApp(firebaseConfig);
I change it to
const fire= initializeApp(firebaseConfig);
and also added 
import firebase from 'firebase';
export default fire;

Now let’s authenticate.

If, after pressing Authentication button, your screen looks different, press Get Started button, and follow the same steps.

Next step well start to create the components with react hooks. I’ll add all files in order. First file is as default index.js

Index.js imports App file.

App.js file, I prefer to keep it for routs that I may add it in the future, for right now is importing only one file Register.js

src>registration>Register.js — in src folder I created an other folder registration and this folder will hold all the components.

Register.js

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>
)
}

Hero.js is responsible to log out user.

import React from 'react'export const Hero = ({handleLogout}) => {return (
<div classname="hero">
<nav>
<h2>Welcome</h2>
<button onClick={handleLogout}>Logout</button>
</nav>
</div>
)}

style.css file holds all form styling

.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;
}

App.css holds container and btn styling

@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;
}