This content originally appeared on Bits and Pieces - Medium and was authored by Matheshyogeswaran
Firebase Authentication is a powerful tool for managing user authentication in web and mobile applications. With Firebase, developers can easily integrate authentication methods into their applications without having to build complex authentication systems from scratch.
In this write-up, we will explore how to implement Firebase Authentication in a React application, specifically focusing on the Email/Password and Google Sign-in methods. We will walk through the steps required to set up Firebase in a React application and then demonstrate how to implement these two authentication methods.
This writeup is aimed at beginners who are new to Firebase and React and are looking for a step-by-step guide on how to implement authentication in their React applications using Firebase. By the end of this write-up, you should have a good understanding of how to integrate Firebase Authentication into your React application and be able to implement email/password and Google Sign-in methods for your users.
For the first step, create a basic React app. Now we see how to create the Firebase project in step-by-step
1. Go to console.firebase.google.com
2. Click on Create a project
3. Type “firebase-react-auth”
4. Click on Continue
5. Check I accept the Google Analytics terms
6. Click on Create project
7. Click on Continue
Now we have created the project in Firebase. Now we create the web app on that project here the step by step for that
1. Click on Create a Web app
2. Type “firebase-react-app”
3. Check Also set up Firebase Hosting for this app.
4. Click on Register app
5. Here Install Firebase in React using
npm install firebase
6. Copy the code and paste it in firebase.js
7. Click on Next
8. Here Install Firebase tools in React using
npm install -g firebase-tools
9.Click on Next
10.Click on Continue to console
Here, we have set up the web app with React. Now, we can move on to implementing sign-in functionality using email, password, and Google authentication methods.
1. Click on authentication
2. Click on Get started
3. Click on Email/Password
4. Check Enable
5. Click on Save
6. Click on Add new provider
7. Click on Google
8. Check Enable
9. Click on your mail address
10. Click on Save
Here, we have completed the Firebase setup. Now, we can move on to working with React. Specifically, in the auth.js file, we can implement the authentication functionality for our React app.
import { auth , googleProvider} from "../config/firebase";
import { createUserWithEmailAndPassword,signInWithPopup, signOut } from "firebase/auth";
import { useState } from "react";
export const Auth = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
console.log(auth?.currentUser?.email);
const signIn = async () => {
try {
await createUserWithEmailAndPassword(auth, email, password);
} catch (err){
console.error(err);
}
};
const signInWithGoogle = async () => {
try {
await signInWithPopup(auth,googleProvider);
} catch (err){
console.error(err);
}
};
const logOut = async () => {
try {
await signOut(auth);
} catch (err){
console.error(err);
}
};
return (
<div>
<input placeholder="Email.." onChange={(e) => setEmail(e.target.value)} />
<input
type="password"
placeholder="Password.."
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={signIn}> Signin</button>
<button onClick={signInWithGoogle}> Signin with google</button>
<button onClick={logOut}> logOut</button>
</div>
);
};
The component renders an input field for the email and password, and three buttons: “Signin”, “Signin with google”, and “logOut”. The useState hook is used to manage the state of the email and password input fields.
The signIn function is called when the "Signin" button is clicked. It calls createUserWithEmailAndPassword with the email and password state values, and logs any errors to the console.
The signInWithGoogle function is called when the "Signin with google" button is clicked. It calls signInWithPopup with the googleProvider and logs any errors to the console.
The logOut function is called when the "logOut" button is clicked. It calls signOut and logs any errors to the console.
In the firebase.js file, we initialize the Firebase app using the configuration details specified in the firebaseConfig object. We also create and export instances of the auth and googleProvider objects. These instances are used in the auth.js file to implement the authentication methods for our React app.
import { initializeApp } from "firebase/app";
import {getAuth, GoogleAuthProvider} from 'firebase/auth'
const firebaseConfig = {
Yours details
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
In conclusion, Firebase Authentication is a powerful tool that can simplify the process of implementing user authentication in your React applications. By following the steps outlined in this write-up, you should now have a good understanding of how to implement email/password and Google Sign-in authentication methods using Firebase in a React application. With this knowledge, you can build more secure and user-friendly applications that can help improve the user experience.
You can find the source code for this tutorial on GitHub at https://github.com/matheshyogeswaran/firebase-react-auth.git. This code can serve as a reference as you work on implementing Firebase Authentication in your own React applications. With the knowledge gained from this tutorial, you should be able to confidently integrate email/password and Google Sign-in authentication methods into your React applications using Firebase.
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
Firebase Auth with React: Implement Email/Password and Google Sign-in was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Matheshyogeswaran
Matheshyogeswaran | Sciencx (2023-05-01T13:16:18+00:00) Firebase Auth with React: Implement Email/Password and Google Sign-in. Retrieved from https://www.scien.cx/2023/05/01/firebase-auth-with-react-implement-email-password-and-google-sign-in/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.