Harnessing the Power of Framer + AI with Firebase Backend

// Import necessary Firebase modules
import { useState, useEffect } from "react"
import { initializeApp, getApps, getApp } from "firebase/app"
import {
    getAuth,
    onAuthStateChanged,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signOut,
} from "firebase/auth"

// Firebase configuration
const firebaseConfig = {
    apiKey: "REPLACE_WITH_YOURS",
    authDomain: "REPLACE_WITH_YOURS",
    projectId: "REPLACE_WITH_YOURS",
    storageBucket: "REPLACE_WITH_YOURS",
    messagingSenderId: "REPLACE_WITH_YOURS",
    appId: "REPLACE_WITH_YOURS"
}

// Ensure Firebase app initialization
const initializeFirebase = () => {
    if (!getApps().length) {
        initializeApp(firebaseConfig)
    }
}

initializeFirebase()
const auth = getAuth()

export default function AuthForm() {
    const [user, setUser] = useState(null)
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [error, setError] = useState("")

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser)
        })
        return () => unsubscribe()
    }, [])

    const handleSignUp = async () => {
        try {
            await createUserWithEmailAndPassword(auth, email, password)
            setError("")
        } catch (err) {
            setError(err.message)
        }
    }

    const handleSignIn = async () => {
        try {
            await signInWithEmailAndPassword(auth, email, password)
            setError("")
        } catch (err) {
            setError(err.message)
        }
    }

    const handleSignOut = async () => {
        try {
            await signOut(auth)
            setError("")
        } catch (err) {
            setError(err.message)
        }
    }

    return (
        <div style={formContainerStyle}>
            {user ? (
                <div>
                    <h2>Welcome, {user.email}</h2>
                    <button onClick={handleSignOut} style={buttonStyle}>
                        Sign Out
                    </button>
                </div>
            ) : (
                <div>
                    <h2>Sign In / Sign Up</h2>
                    <input
                        type="email"
                        placeholder="Email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        style={inputStyle}
                    />
                    <input
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        style={inputStyle}
                    />
                    <button onClick={handleSignIn} style={buttonStyle}>
                        Sign In
                    </button>
                    <button onClick={handleSignUp} style={buttonStyle}>
                        Sign Up
                    </button>
                    {error && <p style={errorStyle}>{error}</p>}
                </div>
            )}
        </div>
    )
}

// Styles
const formContainerStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "10px",
    padding: "20px",
    border: "1px solid #ddd",
    borderRadius: "8px",
    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
    color: "white",
}

const inputStyle = {
    width: "200px",
    padding: "10px",
    borderRadius: "4px",
    border: "1px solid #ccc",
}

const buttonStyle = {
    padding: "10px 20px",
    backgroundColor: "#007bff",
    color: "white",
    border: "none",
    borderRadius: "4px",
    cursor: "pointer",
}

const errorStyle = {
    color: "red",
    fontSize: "12px",
}