Adding Firebase Authentication

Provide an example of using Firebase to add authentication to a Next.js app with setup steps and a sign-in component example.
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

// Firebase configuration object containing keys and identifiers for your app
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',
  measurementId: 'your-measurement-id'

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, signInWithEmailAndPassword };
Initialize Firebase and export the `auth` object and the `signInWithEmailAndPassword` method for use in the authentication process.
import React, { useState } from 'react';
import { auth, signInWithEmailAndPassword } from '../path/to/firebaseConfig';

const SignInComponent = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignIn = async (event) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;
      console.log('Logged in user:', user);
    } catch (error) {
      console.error('Error signing in with email and password', error);

  return (
    <form onSubmit={handleSignIn}>
        onChange={(e) => setEmail(}
        onChange={(e) => setPassword(}
      <button type='submit'>Sign In</button>

export default SignInComponent;
Create a `SignInComponent` that includes a form for users to input their email and password and sign in. The component uses the `signInWithEmailAndPassword` method provided by Firebase on form submission.
import '../path/to/firebaseConfig';
import SignInComponent from '../path/to/SignInComponent';

function LoginPage() {
  return (
      <SignInComponent />

export default LoginPage;
Import the configured Firebase authentication and `SignInComponent`. Create a `LoginPage` component that contains the `SignInComponent` for users to log in.