DEV Community

codeek
codeek

Posted on

🚀 OAuth 2 Sign-In with Facebook — React Authentication & Authorization Playlist

#react #javascript #frontendchallenge #frontend

Implementing authentication from scratch can be time-consuming, especially when users expect to sign in with a single click. OAuth 2.0 authentication solves this problem by allowing users to log in using their existing accounts from providers like Facebook.

In this tutorial, you'll learn how to integrate Facebook Sign-In into a React application using Firebase Authentication. Firebase securely handles the OAuth flow while React manages your application's UI.

By the end of this guide, users will be able to sign in and sign out using their Facebook account with just a few lines of code.

📌 Prerequisites

Before getting started, make sure you have:

  • React (Vite) project
  • Firebase project
  • Firebase Authentication enabled
  • Meta Developer account
  • Basic understanding of React Hooks

Install Firebase:

npm install firebase
Enter fullscreen mode Exit fullscreen mode

Step 1: Create a Firebase Project

Navigate to the Firebase Console and create a new project.

Once your project is created:

  • Add a new Web App
  • Copy your Firebase configuration
  • Install the Firebase SDK

Step 2: Enable Facebook Authentication

Inside Firebase Console:

Authentication
      ↓
 Sign-in Method
      ↓
    Facebook
Enter fullscreen mode Exit fullscreen mode

Enable Facebook Authentication.

You'll need:

  • Facebook App ID
  • Facebook App Secret

These credentials are obtained from your Meta Developer application.

Step 3: Create a Meta (Facebook) App

Visit the Meta Developers Dashboard.

Create a new application and add the Facebook Login product.

After creating the application you'll receive:

  • App ID
  • App Secret

Copy both values into Firebase Authentication settings.

Finally, add the OAuth Redirect URI provided by Firebase into your Facebook application's OAuth settings.

Step 4: Configure Firebase

Create a firebase.js file.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  appId: "...",
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
Enter fullscreen mode Exit fullscreen mode

Step 5: Create the Facebook Provider 

import { FacebookAuthProvider } from "firebase/auth";

export const facebookProvider = new FacebookAuthProvider();
Enter fullscreen mode Exit fullscreen mode

If your application requires additional permissions:

facebookProvider.addScope("email");
Enter fullscreen mode Exit fullscreen mode

Step 6: Implement Facebook Login 

import {
  FacebookAuthProvider,
  signInWithPopup,
} from "firebase/auth";

import { auth } from "./firebase";

const provider = new FacebookAuthProvider();

const loginWithFacebook = async () => {
  try {
    const result = await signInWithPopup(auth, provider);

    console.log(result.user);
  } catch (error) {
    console.log(error);
  }
};
Enter fullscreen mode Exit fullscreen mode

Step 7: Create the Login Button 

<button onClick={loginWithFacebook}>
  Continue with Facebook
</button>
Enter fullscreen mode Exit fullscreen mode

When users click the button:

  • Facebook popup opens
  • User grants permission
  • Firebase authenticates the user
  • User information becomes available

Step 8: Access User Information 

const user = result.user;

console.log(user.displayName);
console.log(user.email);
console.log(user.photoURL);
Enter fullscreen mode Exit fullscreen mode

Typical user information includes:

  • UID
  • Name
  • Email
  • Profile Picture
  • Access Token

Step 9: Implement Logout 

import { signOut } from "firebase/auth";

const logout = async () => {
  await signOut(auth);
};
Enter fullscreen mode Exit fullscreen mode 
<button onClick={logout}>
  Logout
</button>
Enter fullscreen mode Exit fullscreen mode

Step 10: Observe Authentication State

Instead of manually checking login status, Firebase provides a listener.

import { onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Logged in");
  } else {
    console.log("Logged out");
  }
});
Enter fullscreen mode Exit fullscreen mode

This keeps your React UI synchronized with the authentication state.

📂 Project Structure 

src/
│
├── firebase.js
├── App.jsx
├── Login.jsx
├── Navbar.jsx
└── main.jsx
Enter fullscreen mode Exit fullscreen mode

🚨 Common Errors

Popup Closed

The user closed the authentication popup before completing login.

Unauthorized Domain

Add your application's domain inside:

Firebase Authentication
        ↓
Authorized Domains
Enter fullscreen mode Exit fullscreen mode

Invalid OAuth Redirect

Ensure the redirect URI from Firebase exactly matches the one configured inside your Meta Developer application.

App Not Live

If your Facebook application is still in Development Mode, only authorized test users can authenticate.

✅ Best Practices

  • Never expose sensitive credentials outside Firebase configuration.
  • Use onAuthStateChanged() to manage authentication state.
  • Handle authentication errors gracefully.
  • Protect private routes after successful login.
  • Store additional user profile data in Firestore or your own backend.

🎉 Conclusion

Facebook Sign-In provides a fast and familiar authentication experience for users. By combining React with Firebase Authentication, you can integrate secure OAuth 2.0 login without implementing the entire authentication flow yourself.

In this tutorial, you learned how to:

  • Configure Firebase Authentication
  • Create a Meta Developer application
  • Enable Facebook Login
  • Authenticate users using signInWithPopup
  • Read authenticated user information
  • Sign users out
  • Track authentication state

With only a few Firebase APIs, you can add production-ready Facebook authentication to your React applications.

🎥 Watch the Complete Video Tutorial (Part 16)

Prefer learning by building?

Follow the complete hands-on implementation in Part 16 of the React Authentication & Authorization Playlist, where we build Facebook OAuth Sign-In from scratch using React and Firebase Authentication.

📺 Watch here

https://www.youtube.com/watch?v=z1SpI42MlzU&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=16

🚀 Follow the Complete React Authentication & Authorization Playlist

This tutorial is one part of a complete series covering modern authentication in React.

Throughout the playlist, you'll learn how to build secure authentication systems using:

  • Firebase Authentication
  • JWT Authentication
  • OAuth Providers
  • Protected Routes
  • Role-based Authorization
  • Password Reset
  • Email Verification
  • Authentication Best Practices

🎬 Start the playlist here

https://www.youtube.com/watch?v=gbjqaiwjTZ8&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=1

If you found this article helpful, consider:

  • ❤️ Leaving a reaction
  • 💬 Sharing your thoughts in the comments
  • 🔖 Saving it for future reference
  • 🚀 Following me on Dev.to for more React and Firebase tutorials

Happy coding! 🚀

react #firebase #oauth #facebook #authentication #javascript #webdev #frontend #vite #beginners

Top comments (0)