@precooked/react-auth-button v1.0.3

@precooked/react-auth-button

The AuthButton component provides a flexible way to integrate Firebase authentication with multiple providers (e.g., Google, Facebook, GitHub, Apple, etc.) into your React applications.

Installation

To use the AuthButton, you need to install the package along with firebase:

npm install @precooked/react-auth-button firebase

Firebase Setup

Before using the AuthButton, make sure to set up Firebase in your project:

// src/firebaseConfig.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
};

// Initialize Firebase and get the authentication instance
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Usage

import React from 'react';
import AuthButton from '@precooked/react-auth-button';
import { auth } from './firebaseConfig';

const App = () => {
    const handleAuthSuccess = (user) => {
        console.log('User signed in:', user);
    };

    const handleAuthError = (error) => {
        console.error('Authentication error:', error);
    };

    return (
        <AuthButton
            auth={auth}
            provider="google"
            onAuthSuccess={handleAuthSuccess}
            onAuthError={handleAuthError}
            title="Login with Google"
        />
    );
};

export default App;

Props

License

MIT