Hello Friends, Today we will learn about how to authenticate the user using firebase in RecatJS
Step 1: First we have to go to firebase console using this link https://console.firebase.google.com
– And create application and go to authentication
Step 2: Enable the Email/Password provider for sign in and authenticate the user.
Step 3: Go to setting -> project setting and than take the credential from there
Prerequisites: You have created react app
– Install the packages to authenticate user using firebase
npm install firebase bootstrap react-bootstrap
– Now create file and past the below code for connect the firebase application
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"
const firebaseConfig = {
apiKey: "AIzaSyA_oT3zVq2o4-HmCoEe-Kqpd8PaGzoP7fg",
authDomain: "react-firebase-4298a.firebaseapp.com",
projectId: "react-firebase-4298a",
storageBucket: "react-firebase-4298a.appspot.com",
messagingSenderId: "33843227339",
appId: "1:33843227339:web:899764acef60c7b7c5c94e",
measurementId: "G-DMT5PTPD9T"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
export { app, auth };
– Create SignIn page using below code
import React from 'react'
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import { Formik } from 'formik';
import * as yup from 'yup';
import { Card } from 'react-bootstrap';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../../firebase'
import { useNavigate } from 'react-router-dom';
const SignIn = () => {
const navigate = useNavigate()
const SubmitData = (e) => {
signInWithEmailAndPassword(auth, e.email, e.password).then((response) => {
navigate('/')
})
}
const schema = yup.object().shape({
email: yup.string().email().required(),
password: yup.string().required()
});
return (
<div>
<Card style={{ width: '35rem' }} className={'ms-auto me-auto'}>
<Card.Title className='p-0 border'>
<h3 className='text-center pt-3 pb-3'>Sign In</h3>
</Card.Title>
<Card.Body className='border'>
<Formik
validationSchema={schema}
onSubmit={SubmitData}
initialValues={{
email: '',
password: ''
}}
>
{({
handleSubmit,
handleChange,
values,
touched,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group
as={Col}
md="12"
controlId="validationFormik102"
className="position-relative"
>
<Form.Label>Email Id</Form.Label>
<Form.Control
type="email"
name="email"
value={values.email}
onChange={handleChange}
isInvalid={errors.email}
isValid={touched.email && !errors.email}
/>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group
as={Col}
md="12"
controlId="validationFormik103"
className="position-relative"
>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
name="password"
value={values.password}
onChange={handleChange}
isInvalid={errors.password}
isValid={touched.password && !errors.password}
/>
</Form.Group>
</Row>
<Button type="submit" className='w-100 p-2 m-0'><h4 className='m-0'>SignIn</h4></Button>
</Form>
)}
</Formik>
</Card.Body>
</Card>
</div>
)
}
export default SignIn
– And add the code for create SignUp page
import React from 'react'
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import { Formik } from 'formik';
import * as yup from 'yup';
import { Card } from 'react-bootstrap';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
import { auth } from '../../firebase';
import { useNavigate } from 'react-router-dom';
const SignUp = () => {
const navigate = useNavigate()
const SubmitData = (e) => {
createUserWithEmailAndPassword(auth, e.email, e.password).then(async (response) => {
const user = response.user
await updateProfile(user, {
displayName: e.name
})
navigate('/')
})
}
const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
password: yup.string().required()
});
return (
<div>
<Card style={{ width: '35rem' }} className={'ms-auto me-auto'}>
<Card.Title className='p-0 border'>
<h3 className='text-center pt-3 pb-3'>Sign Up</h3>
</Card.Title>
<Card.Body className='border'>
<Formik
validationSchema={schema}
onSubmit={SubmitData}
initialValues={{
name: '',
email: '',
password: ''
}}
>
{({
handleSubmit,
handleChange,
values,
touched,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group
as={Col}
md="12"
controlId="validationFormik101"
className="position-relative"
>
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
name="name"
value={values.name}
onChange={handleChange}
isInvalid={errors.name}
isValid={touched.name && !errors.name}
/>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group
as={Col}
md="12"
controlId="validationFormik102"
className="position-relative"
>
<Form.Label>Email Id</Form.Label>
<Form.Control
type="email"
name="email"
value={values.email}
onChange={handleChange}
isInvalid={errors.email}
isValid={touched.email && !errors.email}
/>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group
as={Col}
md="12"
controlId="validationFormik103"
className="position-relative"
>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
name="password"
value={values.password}
onChange={handleChange}
isInvalid={errors.password}
isValid={touched.password && !errors.password}
/>
</Form.Group>
</Row>
<Button type="submit" className='w-100 p-2 m-0'><h4 className='m-0'>SignUp</h4></Button>
</Form>
)}
</Formik>
</Card.Body>
</Card>
</div>
)
}
export default SignUp
– After that create the home page
import React from 'react'
import { Link } from 'react-router-dom'
const Home = (props) => {
return (
<div>
<div>
<h2>
<Link to={'/signin'}>Sign In</Link>
</h2>
<br/>
<h2>
<Link to={'/signup'}>Sign Up</Link>
</h2>
</div>
<p>{props.name ? `Welcome - ${props.name}` : "Login Please!"}</p>
</div>
)
}
export default Home
Output:
