DEV Community

Muhammed Mushtaha
Muhammed Mushtaha

Posted on • Edited on

Simplify Facebook Login in React with react-fb-login-btn

Hello everyone,

I want to share with you a new React component called react-fb-login-btn. It helps you add Facebook login to your React applications easily.

Introduction

Adding Facebook login to your app can be hard sometimes. With react-fb-login-btn, you can do it in a simple way. This component is built with TypeScript and Tailwind CSS. It allows you to customize the button to fit your app's design.

Why Use react-fb-login-btn?

  • Easy to Use: You don't need to deal with the Facebook SDK directly.
  • Customizable: Change the button's look to match your app.
  • TypeScript Support: It uses TypeScript for better code quality.
  • Handles Events: Easy to handle login success or failure.
  • Supports RTL: Works with languages that are right-to-left.

Installation

You can install it using npm:



npm install react-fb-login-btn


Enter fullscreen mode Exit fullscreen mode

Or with yarn:



yarn add react-fb-login-btn


Enter fullscreen mode Exit fullscreen mode

Basic Usage

First, import the component into your project:



import React from 'react';
import { FacebookLoginButton } from 'react-fb-login-btn';

const App = () => {
  const handleSuccess = (response) => {
    console.log('Login successful:', response);
    // Handle successful login here
  };

  const handleFailure = (error) => {
    console.error('Login failed:', error);
    // Handle login failure here
  };

  return (
    <div>
      <FacebookLoginButton
        appId="YOUR_FACEBOOK_APP_ID"
        onSuccess={handleSuccess}
        onFail={handleFailure}
      />
    </div>
  );
};

export default App;


Enter fullscreen mode Exit fullscreen mode

Note: Replace "YOUR_FACEBOOK_APP_ID" with your actual Facebook App ID. You can get it from the Facebook Developers website.

Customization Options

The FacebookLoginButton has several props to customize it:

  • appId (string, required): Your Facebook App ID.
  • onSuccess (function): Called when login is successful.
  • onFail (function): Called when login fails.
  • shape (string): 'rectangular' or 'circle'. Default is 'rectangular'.
  • theme (string): 'blue', 'dark', 'light', or 'custom'. Default is 'blue'.
  • text (string): The text on the button. Default is 'Login with Facebook'.
  • scope (string): Permissions you want to request. Default is 'public_profile,email'.

More Examples

To see more examples and how to customize the button, please visit our Storybook documentation.

I hope you find it useful!

Feedback and Contributions

If you have any questions or suggestions, please visit the GitHub repository. Contributions are welcome!

Thank you for reading!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more