next-fiery-auth v1.0.0

Next-Fire-Auth

A modular authentication package for Next.js applications using Firebase Authentication and NextUI components.

Features

• Email/Password authentication
• Google authentication
• Custom fields support
• Email verification
• Modular components
• TypeScript support
• Customizable UI
• Firebase Firestore integration

Installation

npm install next-fire-auth
# or
yarn add next-fire-auth

Usage

1. Initialize Firebase

import { initializeFirebase } from "next-fire-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",
};

initializeFirebase(firebaseConfig);

2. Using the AuthForm Component

import { AuthForm } from "next-fire-auth";

const config = {
  firebase: firebaseConfig,
  customFields: [
    {
      name: "fullName",
      type: "text",
      label: "Full Name",
      placeholder: "Enter your full name",
      required: true,
    },
  ],
  enableGoogleAuth: true,
  onAuthSuccess: (user) => {
    console.log("Auth success:", user);
  },
  onAuthError: (error) => {
    console.error("Auth error:", error);
  },
  redirectPath: "/dashboard",
};

export default function AuthPage() {
  return <AuthForm config={config} isSignIn={false} />;
}

3. Using Individual Components

import { AuthInput, useAuth } from "next-fire-auth";

export default function CustomAuthForm() {
  const { signIn, loading } = useAuth(config);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <form>
      <AuthInput
        type="email"
        name="email"
        label="Email"
        value={email}
        onChange={setEmail}
      />
      <AuthInput
        type="password"
        name="password"
        label="Password"
        value={password}
        onChange={setPassword}
      />
    </form>
  );
}

Configuration Options

The AuthConfig interface supports the following options:

interface AuthConfig {
  firebase: FirebaseConfig;
  customFields?: CustomField[];
  onAuthSuccess?: (user: any) => void;
  onAuthError?: (error: Error) => void;
  theme?: {
    primaryColor?: string;
    backgroundColor?: string;
    textColor?: string;
  };
  enableGoogleAuth?: boolean;
  enableEmailAuth?: boolean;
  additionalUserData?: Record<string, any>;
  redirectPath?: string;
}

Custom Fields

You can add custom fields to the registration form by configuring the customFields array:

const customFields = [
  {
    name: "fullName",
    type: "text",
    label: "Full Name",
    placeholder: "Enter your full name",
    required: true,
    validation: (value) => {
      if (value.length < 3) return "Name must be at least 3 characters";
      return null;
    },
  },
];

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.