Integrar Firebase Auth con Next.js (Page Router)

{
  "rules": {
    "threads": {
      ".read": true,
      ".write": true,
      ".indexOn": ["identifier"]
    },
    "comments": {
      ".read": true,
      ".write": "auth != null",
      ".indexOn": ["thread"]
    }
  }
}

// lib/firebase.ts

import { getAuth } from "firebase/auth";

const database = getDatabase(app);
const auth = getAuth(app);

export { database, auth };

// store/AuthProvider.ts

import { createContext, useEffect, useState } from "react";
import { auth } from "@/lib/firebase";

export const AuthContext = createContext<any | null>(null);

export const AuthProvider = (props: any) => {
  const [user, setUser] = useState<any | null>(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });

    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={user}>{props.children}</AuthContext.Provider>
  );
};

// pages/_app.ts

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import { AuthProvider } from "@/store/AuthProvider";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </AuthProvider>
  );
}

// components/SignInWithGoogle.tsx

import { Button } from "@chakra-ui/react";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
import { auth } from "@/lib/firebase";

export const SignInWithGoogle = () => {
  const toast = useToast();

  const handleSignIn = async () => {
    try {
      const provider = new GoogleAuthProvider();

      await signInWithRedirect(auth, provider);
    } catch (err) {
      toast({
        description: "¡Oops! Something went wrong.",
        status: "error",
      });
    }
  };

  return <Button onClick={handleSignIn}>Sign in</Button>;
};

// components/SignOut.tsx

import { Button, useToast } from "@chakra-ui/react";
import { auth } from "@/lib/firebase";

export const SignOut = () => {
  const toast = useToast();

  const handleSignOut = async () => {
    try {
      await auth.signOut();

      toast({ description: "¡Goodbye! 👋." });
    } catch (error) {
      toast({
        description: "¡Oops! Something went wrong.",
        status: "error",
      });
    }
  };

  return <Button onClick={handleSignOut}>Logout</Button>;
};

// pages/posts/[id].tsx

import { useContext } from "react";
import { SignInWithGoogle } from "@/components/SignInWithGoogle";
import { SignOut } from "@/components/SignOut";
import { AuthContext } from "@/store/AuthProvider";

export default function Post({ post, thread }: any) {
  const user = useContext(AuthContext);

  return (
    <Container py={16}>
      <Flex gap={4} align="center" justify="space-between">
        <Heading size="md">Welcome {user && user.displayName}</Heading>
        <Box>{user ? <SignOut /> : <SignInWithGoogle />}</Box>
      </Flex>
    </Container>
  );
}

// components/Editor.tsx

import { useContext } from "react";
import {
  VStack,
  FormControl,
  Textarea,
  HStack,
  Button,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { formatISO } from "date-fns";
import * as fbdb from "firebase/database";
import { database } from "@/lib/firebase";
import { AuthContext } from "@/store/AuthProvider";

export const Editor = ({
  thread,
  parent = null,
  placeholder = "Join the conversation...",
  onCancel,
}: {
  thread: string;
  parent: string | null;
  placeholder?: string;
  onCancel?: () => void;
}) => {
  const user = useContext(AuthContext);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting, isValid },
  } = useForm({
    resolver: yupResolver(
      yup.object().shape({
        message: yup.string().min(2).required(),
      })
    ),
  });

  const toast = useToast();

  const onSubmit = handleSubmit(async (values) => {
    if (!user) {
      // Add logic for the case of no user session
      return;
    }

    try {
      const commentRef = fbdb.push(fbdb.ref(database, "comments"));

      await fbdb.set(commentRef, {
        thread,
        author: {
          uid: user.uid,
          name: user.displayName,
          email: user.email,
          picture: user.photoURL,
        },
        message: values.message,
        parent: parent,
        createdAt: formatISO(new Date()),
      });

      reset({ message: "" });

      if (onCancel && typeof onCancel === "function") onCancel();
    } catch (err) {
      toast({
        description: "¡Oops! Something went wrong.",
        status: "error",
      });
    }
  });

  return (
    <VStack minW="100%" as="form" onSubmit={onSubmit}>
      <FormControl isInvalid={errors.message ? true : false}>
        <Textarea
          placeholder={placeholder}
          size="sm"
          resize="none"
          {...register("message")}
        />
      </FormControl>
      <HStack>
        {onCancel && typeof onCancel === "function" && (
          <Button onClick={onCancel}>Cancel</Button>
        )}
        <Button type="submit" isLoading={isSubmitting} isDisabled={!isValid}>
          Discuss
        </Button>
      </HStack>
    </VStack>
  );
};

// lib/firebase-utils.ts

export function orderByDate(prev: any, current: any) {
  return (
    new Date(current.createdAt).valueOf() - new Date(prev.createdAt).valueOf()
  );
}

export function sortTreeNodes(nodes: any[]): any[] {
  const map = new Map<string, any>();
  const roots: any[] = [];

  // Create a mapping of id to node
  nodes.forEach((node) => {
    map.set(node.key, node);
  });

  // Find the root nodes and add them to the roots array
  nodes.forEach((node) => {
    if (!node.parent) {
      roots.push(node);
    }
  });

  // Recursively traverse the tree and add child nodes to their parent's children array
  function traverse(node: any) {
    const children: any[] = [];

    nodes.forEach((childNode) => {
      if (childNode.parent === node.key) {
        children.push(traverse(childNode));
      }
    });

    node.children = children;

    return node;
  }

  // Sort the root nodes and their children recursively
  roots.forEach((root) => {
    sortChildren(root);
  });

  // Sort the children of a node and their children recursively
  function sortChildren(node: any) {
    if (node.children) {
      node.children.sort(orderByDate);
      node.children.forEach((child: any) => {
        sortChildren(child);
      });
    }
  }

  // Flatten the tree into a list of nodes
  const sortedNodes: any[] = [];

  roots.forEach((root) => {
    sortedNodes.push({ ...root, children: traverse(root).children });
  });

  return sortedNodes;
}

// components/DiscussionThread.tsx

import { useEffect, useState } from "react";
import { Box, Divider, VStack } from "@chakra-ui/react";
import {
  getCommentsByThread,
  orderByDate,
  sortTreeNodes,
} from "@/lib/firebase-utils";
import * as fbdb from "firebase/database";
import { database } from "@/lib/firebase";
import { Editor } from "./Editor";
import { Comment } from "./Comment";

export const DiscussionThread = ({ identifier }: { identifier: string }) => {
  const [comments, setComments] = useState<any[]>([]);

  useEffect(() => {
    // Get all comments by thread
    async function loadComments() {
      const data = await getCommentsByThread(identifier);

      if (!data) return;

      setComments(data.sort(orderByDate));
    }

    loadComments();

    // Watching new comments
    const commentRef = fbdb.ref(database, "comments");

    const endpoint = fbdb.query(
      commentRef,
      fbdb.orderByChild("thread"),
      fbdb.equalTo(identifier)
    );

    fbdb.onChildAdded(endpoint, (snapshot) => {
      const newComment = { ...snapshot.val(), key: snapshot.key };
      const existingComment = comments.find((c) => c.key === newComment.key);

      if (existingComment) return;

      setComments((prevComments) => [newComment, ...prevComments]);
    });

    return () => {
      // Stop watching when component is unmounted
      fbdb.off(endpoint, "child_added");
    };
  }, [identifier]);

  return (
    <Box>
      <Editor thread={identifier} />
      <Divider borderColor="gray.500" my={8} />
      <VStack divider={<StackDivider />} spacing={6}>
        {sortTreeNodes(comments).map((comment) => (
          <Comment key={comment.key} thread={identifier} comment={comment} />
        ))}
      </VStack>
    </Box>
  );
};

// components/Comment.tsx

import { AuthContext } from "@/store/AuthProvider";
import {
  VStack,
  Box,
  Flex,
  Avatar,
  Heading,
  Text,
  HStack,
  Button,
  Collapse,
} from "@chakra-ui/react";
import { format, parseISO } from "date-fns";
import { useContext, useState } from "react";
import { Editor } from "./Editor";

export const Comment = ({ thread, comment, ...rest }: any) => {
  const user = useContext(AuthContext);

  const [isReplyListCollased, setIsReplyListCollased] = useState(false);
  const [isReplyFormCollased, setIsReplyFormCollased] = useState(false);

  const replyListToggle = () => setIsReplyListCollased(!isReplyListCollased);
  const replyFormToggle = () => setIsReplyFormCollased(!isReplyFormCollased);

  return (
    <VStack w="100%" spacing={8}>
      <Box minW="100%" {...rest}>
        <VStack align="flex-start" spacing={4}>
          <Flex gap={4} align="center">
            <Avatar
              size="sm"
              name={comment.author.name}
              src={comment.author.picture}
            />
            <Box>
              <Heading size="sm">{comment.author.name}</Heading>
              <Text>{format(parseISO(comment.createdAt), "d MMMM, yyyy")}</Text>
            </Box>
          </Flex>
          <Box>{comment.message}</Box>

          <HStack w="100%" justify="flex-end">
            {comment.children && comment.children.length > 0 && (
              <Button size="sm" variant="link" onClick={replyListToggle}>
                {!isReplyListCollased
                  ? `${comment.children.length} Respuestas`
                  : `Ocultar respuestas`}
              </Button>
            )}

            {user && (
              <Button size="sm" variant="link" onClick={replyFormToggle}>
                Responder
              </Button>
            )}
          </HStack>
        </VStack>
      </Box>

      <Collapse in={isReplyFormCollased} style={{ width: "100%" }}>
        <Box
          w="calc(100% - 2rem)"
          ml="auto"
          borderLeft="5px solid"
          borderColor="gray.300"
          pl={4}
        >
          <Editor
            placeholder={`Respondiendo a ${comment.author.name}...`}
            thread={thread}
            parent={comment.key}
            onCancel={replyFormToggle}
          />
        </Box>
      </Collapse>

      <Collapse in={isReplyListCollased} style={{ width: "100%" }}>
        <VStack
          divider={<StackDivider borderColor="gray.500" />}
          w="calc(100% - 2rem)"
          ml="auto"
          borderLeft="5px solid"
          borderColor="gray.300"
          pl={4}
          spacing={6}
        >
          {comment.children.map((child: any) => (
            <Comment
              key={`child-${child.key}`}
              thread={thread}
              comment={child}
            />
          ))}
        </VStack>
      </Collapse>
    </VStack>
  );
};