DEV Community: ariburaco

Introducing ChatGPT File Uploader Extended: A Chrome Extension for Easy File Processing (PDF, WORD, EXCEL and ZIP Files!)

ariburaco — Mon, 22 May 2023 11:33:42 +0000

Are you tired of manually processing various file types? Look no further! Introducing ChatGPT File Uploader Extended, a powerful open-source Chrome extension developed using React, TypeScript, and Vite. This extension revolutionizes the way you handle files by providing a chatbot-like conversation system for seamless file upload and processing. Whether you're dealing with text files, code snippets, documents, or spreadsheets, ChatGPT File Uploader Extended has got you covered.

Try the Extension

Features

ChatGPT File Uploader Extended offers the following features:

Upload and Process Different File Types: With support for various file formats including TXT, JS, PY, HTML, CSS, JSON, CSV, MD, TS, TSX, JSX, PDF, DOC, DOCX, XLS, and XLSX, you can easily upload and process files of different types using this extension.
Automatic Text Extraction: Say goodbye to manual extraction! The extension automatically extracts the text content from PDF, Word, and Excel files, saving you valuable time and effort.
Chunked Processing: To overcome the limitations of chatbots, ChatGPT File Uploader Extended implements chunked processing for large files. This ensures smooth processing by dividing the file into manageable chunks.
Configurable Chunk Size: You have control! The extension allows you to configure the chunk size according to your needs. Adjust the chunk size to optimize the conversation flow and achieve the desired processing speed.
Configurable Prompts: You have more control! The extension allows you also to configure each prompt while it is sending the parts.
Simulated Conversation Prompts: Enhance the user experience! ChatGPT File Uploader Extended generates conversation prompts based on the file context, simulating a natural chat-like interaction.
User-Friendly Interface: The extension provides a user-friendly interface for selecting files and monitoring the upload progress. You can easily track the status of your uploads and stay in control.
Supported on Google Chrome: ChatGPT File Uploader Extended is a browser extension designed specifically for Google Chrome, ensuring seamless integration with your browsing experience.

Installation

Follow these simple steps to install the ChatGPT File Uploader Extended Chrome extension:

Clone the repository:

   git clone https://github.com/ariburaco/chatgpt-file-uploader

Navigate to the project directory:

   cd chatgpt-file-uploader

Install dependencies:

   pnpm install

Start the development environment:

   pnpm run build:watch

Note: You might need the execute run pnpm run dev for the first time to generate some js files.

Open Google Chrome and go to chrome://extensions.
Enable the "Developer mode" toggle.
Click on the "Load unpacked" button.
Select the dist directory from the project folder.

Congratulations! The File Uploader extension should now be installed and visible in your extensions list.

Usage

Once you have installed the File Uploader extension, you can easily upload and process files using the following steps:

Navigate to chat.openai.com.
You will see the Upload File button below the message box.
Click on the Upload File button.
The File Uploader interface will open in a new tab.
Specify the desired chunk size (number of characters per chunk) to control the conversation flow.
The selected file will be divided into chunks and sent to the chatbot-like conversation system for processing.
The conversation prompts generated based on the file context will be displayed in the chat.
Wait for each chunk to be processed before proceeding to the next one.
Once a chunk is processed, the interface will be cleared, and you can upload another file if needed.
If you want to stop sending the file as a chunk, you need to refresh the page.

Screenshots

Configuration

The File Uploader extension provides a configuration option for the chunk size. By default, the chunk size is set to 500 characters. If you want to change the chunk size, follow these steps:

Locate the "Chunk Size" input field.
Enter the desired chunk size value. A range of 10,000 to 15,000 characters is recommended for optimal performance.

Supported File Types

ChatGPT File Uploader Extended supports a wide range of file types for upload and processing, including:

TXT: Plain text files
JS: JavaScript files
PY: Python files
HTML: HTML files
CSS: CSS files
JSON: JSON files
CSV: Comma-separated values files
MD: Markdown files
TS: TypeScript files
TSX: TypeScript JSX files
JSX: JSX files
PDF: PDF files
DOC: Microsoft Word documents (DOC format)
DOCX: Microsoft Word documents (DOCX format)
XLS: Microsoft Excel spreadsheets (XLS format)
XLSX: Microsoft Excel spreadsheets (XLSX format)
ZIP Files

ZIP Files

You can select a ZIP file that contains multiple text-based files. If the files are like images, or png that cannot be directly read as text, we have introduced a feature to skip those files. basically, we can ignore some kind of extensions or we can specify the names of the files directly in the extension settings as below:

About the Boilerplate

ChatGPT File Uploader Extended is built upon the chrome-extension-boilerplate-react-vite boilerplate, which provides a solid foundation for developing Chrome extensions using React and TypeScript.

Conclusion

ChatGPT File Uploader Extended simplifies the process of uploading and processing files by leveraging the power of React, TypeScript, and Vite. Say goodbye to manual file handling and embrace a more efficient and interactive approach. Give the extension a try and experience the convenience it brings to your file-processing workflows.

If you have any questions or need further assistance, please don't hesitate to reach out to us. Happy file processing with ChatGPT File Uploader Extended!

Please if you have any suggestions, please let me know, and I'll try to implement them. Also, feel free to contact me to contribute the project.

The Project inspired by this youtube video: https://www.youtube.com/watch?v=iR99LO28nzM&t=2s

Last but not least, of course this post is prepared with the help of ChatGPT :)

Optimizing Next.js App Performance for Speed and SEO

ariburaco — Sat, 28 Jan 2023 21:33:10 +0000

Introduction

Welcome to our article on optimizing your Next.js app's performance through the use of getServerSideProps and getStaticProps. As a big NextJS fan, I want to show how can we get the best results using NextJS's power.

In this article, we will delve into the details of these two methods and show you how to use them effectively to fetch data in the most efficient way possible. Whether you're a seasoned Next.js developer or just getting started, this article will provide you with the knowledge you need to take your app's performance to the next level. So, let's get started and see how we can use these powerful tools to improve the speed and functionality of your Next.js app.

The importance of optimizing the Next.js app's performance

When it comes to building web applications, performance is key. Nobody wants to use a slow and clunky app, and in today's fast-paced world, people expect websites to load quickly and smoothly. This is especially true when it comes to Next.js, a popular framework for building React apps. With Next.js, you can build powerful and efficient web apps, but it's important to take the time to optimize your app's performance to ensure that it runs at its best.

What is the meaning of Optimization

Optimizing your Next.js app's performance can mean the difference between a successful app and one that falls short. It can also mean the difference between a good user experience and a frustrating one. And let's not forget about SEO, search engines like Google will also reward the fast and optimized websites with better ranking which will bring more traffic to your website.
If you're working with Next.js, you might have heard of this fancy feature called incremental static regeneration. Basically, it's a way for Next.js to optimize the performance of your web app by only regenerating the parts that have changed, instead of the whole thing every time. Sounds pretty cool, right?

Let's break down getServerSideProps and getStaticProps, and how they can help you optimize your Next.js app's performance.

Understanding getServerSideProps

getServerSideProps is a method that lets you fetch data on the server-side during the initial request. This is perfect for situations where the data being fetched is specific to the user, or when the data is dynamic and changes often.

Here's a simple example of how you might use getServerSideProps to fetch a user's profile information:

export async function getServerSideProps(context) {
  // Fetch user's profile information
  const res = await fetch(`https://my-api.com/users/${context.params.userId}`);
  const user = await res.json();

  // Pass user data to the page component
  return { props: { user } }
}

Understanding getStaticProps

On the other hand, getStaticProps is a method that lets you fetch data at build time, and the data is then stored as a JSON file. This is perfect for situations where the data being fetched is static, and doesn't change often.

Here's an example of how you might use getStaticProps to fetch a list of blog posts:

export async function getStaticProps() {
   const slug = context.params?.slug as string;

    const blogPosts = await client.getEntries({
      'fields.slug[in]': slug,
    });

    const blogPost = blogPosts.items[0].fields as IBlogPostFields;

    return {
      props: {
        blogPost,
      },
    };
}

To be able to use getStaticProbs, we need to specify all the paths of pages that we want to create statically. So, with getStaticPaths function we are defining all the paths.

export async function getStaticPaths(){
  const allPosts = await client.getEntries();

  const paths = allPosts.items.map((post) => {
    return {
      params: { slug: post.slug },
    };
  });

  return {
    paths,
    fallback: 'blocking',
  };
}

The differences between getServerSideProps and getStaticProps

So, the main difference between getServerSideProps and getStaticProps is that the former is executed on the server-side during the initial request and the latter is executed during the build time.

It's important to keep in mind that, getStaticProps is only called at build time, whereas getServerSideProps is called on each request, so it's better to use it for dynamic data, and use getStaticProps for static data, this way you can get the best performance out of your Next.js app.

Improving the getStaticProps with On Deman Revalidation

One way you can take advantage of this is by using on-demand revalidation. It's a fancy way of saying that you can selectively revalidate certain parts of your app, without having to regenerate the whole thing. You can do this using the getStaticProps and getServerSideProps methods, which let you specify which data needs to be revalidated.

So, we said that static pages are only generated when the build time. But what if we want to serve these pages dynamically and frequently? NextJS

There is a great feature for revalidating static page content using the NextJS API directory. Here is the official example from NextJS:

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

I found the best way of revalidating the posts for Contentful Headless CMS is creating a webhook while creating, publishing, and updating. With this way, we can trigger the revalidating functionality in the background.

In Conclusion

Optimizing the performance of your Next.js app is crucial for building a successful and efficient web application. By using features like getServerSideProps and getStaticProps, you can improve the speed and performance of your app, and make sure that it's running at its best. Remember that performance is not only important for user experience but also for SEO, faster website means better ranking and more traffic. By following the best practices outlined in this article, you can take your Next.js app to the next level and ensure that it's running at its peak performance.

Note: This article prepared with help of ChatGPT

Resources

getServerSideProps

getStaticProps

getStaticPaths

Incremental Data Fetching

Removing sensitive data from Git history

ariburaco — Tue, 24 Jan 2023 16:48:30 +0000

Hello folks, this will be a quick but really handy post. Let's say we are working on a side project that we didn't care the sensitive data like credentials of API keys and we want to make the repo public on Github.

I've found a great tool to clear all the commit history of the specific file, in my case it was .env.example.

The tool is called git-filter-repo and it is developed with python.

So, to use the library, first we need to install the python script using:

pip install git-filter-repo

and then we are running this code to delete all the history of the selected file:

git filter-branch --force --index-filter "git rm --cached --ignore-unmatch <the path of file that you want delete>" --prune-empty --tag-name-filter cat -- --all

When you run the code, you will see the remote branch and local are different. Now, you just need to push your local changes with this command:

git push origin --force --all

That's it! Now, when you check the Github, you wont't see any history about that file.

Hope this will help someone having the same issue.

Sending Emails with Ease: A Step-by-Step Guide to Using Nodemailer with TypeScript in Next.js

ariburaco — Sun, 22 Jan 2023 11:00:23 +0000

About Nodemailer

Nodemailer is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS SES, and more. In this post, we will be using Nodemailer with TypeScript to send emails from a Next.js application.

Before diving into the code example, let's go over some key concepts of Nodemailer. Nodemailer is a module for Node.js applications to send emails. It supports various transport methods such as SMTP, AWS SES, and more. With Nodemailer, you can send plaintext or HTML emails, attachments, and more.

Use Cases for Nodemailer

Nodemailer is a versatile library that can be used in a variety of different use cases. Some common use cases include:

Sending confirmation emails: When a user signs up for a service or makes a purchase, a confirmation email can be sent to their email address to confirm the action.
Sending password reset emails: When a user forgets their password, a password reset link can be sent to their email address to allow them to reset their password.
Sending notifications: Applications can send notifications to users via email, such as updates on their account or new features that have been added.
Sending marketing emails: Applications can send marketing emails to users, such as newsletters or promotional offers.
Sending bulk emails: Applications can send bulk emails to a large number of users at once, such as in the case of a mass mailing campaign.
Sending automated emails: Applications can send automated emails in response to certain events or actions, such as when a user's account is about to expire.
Send HTML email Templates: Applications can use Nodemailer to send HTML email Templates, which can be designed and customized to match the look and feel of the application.
Sending emails with attachments: Applications can use Nodemailer to send emails with attachments, such as invoices, receipts, or other files.

These are just a few examples of the many use cases for Nodemailer, it is a very flexible library that can be used in many different ways to meet the needs of your application.

In this post, we'll be using the SMTP transport method to send emails using a Gmail account. We will be using TypeScript to write our code, which adds type safety and improved code organization to our application.

Now that we understand the basics of Nodemailer and TypeScript, let's take a look at the code example.

Implementation of Emailer Class

The code below shows an implementation of the Nodemailer library in TypeScript. The Emailer class is used to send emails using a Gmail account. It uses the nodemailer.createTransport() method to create a transporter object, which is used to send emails.


import * as nodemailer from "nodemailer";
import { MailOptions } from "nodemailer/lib/json-transport";

export class Emailer {
  private readonly transporter: nodemailer.Transporter;

  constructor() {
    this.transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.GMAIL_USER,
        pass: process.env.GMAIL_PASSWORD,
      },
    });
  }

  public sendEmail(mailOptions: MailOptions) {
    return this.transporter.sendMail(mailOptions);
  }

  public notifyAdminForNewUser(email: string, username: string) {
    this.sendEmail(notifyAdminNewUserEmailTemplate(email, username));
  }

  public notifyUserForSignup(email: string, username: string) {
    this.sendEmail(newUserEmailTemplate(email, username));
  }
}

export const emailer = new Emailer();

export const newUserEmailTemplate = (email: string, username: string) => {
  return {
    from: process.env.GMAIL_USER,
    to: email,
    subject: `${username}, Welcome to the our website`,
    text: "Welcome to the our website",
    html: `
      <h1>Welcome to our website!</h1>
      <p>We're glad you've decided to join us. We hope you find everything you're looking for here and enjoy using our site.</p>
      <p>If you have any questions or need any help, please don't hesitate to contact us. Thank you for signing up!</p>
    `,
  } as MailOptions;
};

export const notifyAdminNewUserEmailTemplate = (
  email: string,
  username: string
) => {
  return {
    from: process.env.GMAIL_USER,
    to: process.env.GMAIL_USER,
    subject: `New User: ${username} - email: ${email}`,
    text: `New User: ${username} - email: ${email}`,
    html: `
      <h1>New User: ${username}</h1>
      <p>email: ${email}</p>
    `,
  } as MailOptions;
};

The class has two methods, notifyAdminForNewUser and notifyUserForSignup, which use the sendEmail method to send emails to the new user and the admin, respectively. The sendEmail method takes in a mailOptions object, which contains the recipient's email, subject, and the message.

The newUserEmailTemplate and notifyAdminNewUserEmailTemplate functions are used to create the mailOptions object for the new user and admin emails, respectively. They take in the user's email and username as arguments and return an object with the recipient's email, subject, and message.

It's worth noting that the code is using process.env.GMAIL_USER and process.env.GMAIL_PASSWORD to authenticate with gmail, You should replace it with your own Gmail user and password.

To obtain the Gmail password, you should go to the settings on Gmail and create an App Password, please remember that you need to activate the 2FA for your google account.

Conclusion

Nodemailer with TypeScript makes it easy to send emails from a Next.js application. With the help of the Emailer class and the mailOptions object, you can send emails with ease. Of course, this implementation will only work on the server side of the NextJS Application. If you want to send email from client side, you just need to create an API endpoint under the /pages/apidirectory.

In this post, we've shown how to send emails using a Gmail account, but you can also use other transport methods such as AWS SES to send emails. You can expand the class methods to meet your needs.

Note: The post prepared by the help of ChatGPT, but all code part is written by my.

Thank you for reading my post! If you enjoyed it and found it informative, I would greatly appreciate it. If you're interested in more content like this, be sure to check out my blog for more articles on similar topics.

Animate everything with Framer Motion

ariburaco — Sat, 21 Jan 2023 22:03:53 +0000

What is Framer Motion

Framer Motion is a powerful animation library for React. It provides a set of easy-to-use components that allow developers to add animations to their React applications with minimal code.

One of the key features of Framer Motion is its use of the Physics engine, which allows for realistic and natural-feeling animations. This means that animations in Framer Motion respond to the user's interactions in a way that feels more intuitive and less robotic.

Use cases of Framer Motion

Page Transitions: Framer Motion can be used to create smooth page transitions, allowing you to create a seamless user experience as users navigate through your application. For example, you can use the AnimatePresence component to fade out the current page while fading in the new page, creating a smooth transition between pages.
Image Carousels: You can use Framer Motion's animation capabilities to create dynamic and engaging image carousels. For example, you can use the motion.div component to create a slide transition between images, and use the useAnimation hook to control the timing and easing of the animation.
Animated Buttons: Framer Motion can also be used to add animations to buttons, making them more engaging and interactive. For example, you can use the motion.button component to create an animated button that changes color or size when hovered over, creating a more dynamic and engaging user experience.
Scroll-Triggered Animations: Framer Motion's useViewportScroll hook can be used to create animations that are triggered when the user scrolls to a certain point on the page. For example, you can use this hook to create a floating effect for an element as the user scrolls down the page.
Drag and Drop Interactions: Framer Motion's drag and dragControls components can be used to create drag and drop interactions in your application. For example, you can use these components to create a to-do list where users can drag and drop items to reorder them.
Parallax Scrolling: Framer Motion's useTransform hook can be used to create a parallax scrolling effect, where elements on the page move at different speeds as the user scrolls. This can be used to create a more immersive and dynamic user experience.

Another great feature of Framer Motion is its use of the Animation controls, which allow developers to easily control the timing, duration, and easing of animations. This makes it easy to create complex animations with minimal code and allows for fine-tuning of the animation to achieve the desired effect.

A Simple Opacity Animation Component

import { AnimatePresence, motion } from "framer-motion";
import React from "react";

interface AnimateOpacityProps {
  children: React.ReactNode;
}

const AnimateOpacity = ({ children }: AnimateOpacityProps) => (
  <AnimatePresence mode="wait">
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      {children}
    </motion.div>
  </AnimatePresence>
);

export default AnimateOpacity;

Conclusion

In addition to its powerful animation capabilities, Framer Motion also provides a set of layout and gesture components that make it easy to add advanced interactions to your React applications. For example, the layout component allows you to easily create responsive and flexible layouts, while the gesture component provides a set of easy-to-use gestures such as swipe, tap, and press.

Overall, Framer Motion is an excellent choice for developers looking to add animations and advanced interactions to their React applications. Its powerful animation capabilities, intuitive API, and easy-to-use components make it a great choice for both beginners and experienced developers alike.

If you're looking to add animations to your React projects, Framer Motion is definitely worth checking out. It's easy to use, powerful, and provides a great set of features that make it a great choice for any React developer.

Note: the post is created by the help of ChatGPT. But the React component itself created by me.

Authentication with Firebase in NextJS, with SSR!

ariburaco — Fri, 20 Jan 2023 11:40:06 +0000

Introduction

In this post, we will learn how to set up user authentication in a Next.js application using Firebase. Firebase is a popular backend-as-a-service provider that offers a variety of tools for building web and mobile applications, including user authentication. By the end of this tutorial, you will have a basic understanding of how to use Firebase to authenticate users in your Next.js application, allowing them to sign in, sign up, and sign out.

Getting Started

The first step will create a project under firebase console, once you create a web project, firebase will provide you a code snippet to use on the client side.

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
 apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
 authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
 projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
 storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
 messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
 appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};


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

Client Side Authentication

Once you initialize the firebase app, you are good to go!

Firebase has a lot of providers for authentication, like social logins with Google, Github, Apple, Facebook and etc. Also, you can choose a simple email and password login. In this example, I’ll create the users manually, since only admin users will be able to log in.

After selecting the provider and creating the users, we can start building our sign-in logic.


 import { auth } from 'configs/firebase-config';
 import { onIdTokenChanged, User } from 'firebase/auth';

 const [admin, setAdmin] = useState<User | null>(null);

 useEffect(() => {
   const unsubscribe = onIdTokenChanged(auth, async (user) => {
     if (user) {
       setAdmin(user);
     } else {
       setAdmin(null);
     }
   });

   return unsubscribe;
 }, []);

So, we will use this useEffect hook on the login page, if someone logs in, it automatically assigns the user to our state. And this is the actual login function:

import { signInWithEmailAndPassword } from 'firebase/auth';

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

 const signInwithFirebase = async () => {
   try {
     await signInWithEmailAndPassword(auth, email, password);
   } catch (error: FirebaseError | unknown) {
     if (error instanceof FirebaseError) {
        console.log(code);
     }
   }
 };

That’s it! Now you are authenticated with Firebase Auth. After this point, you can create a Context Provider to store the Auth User in the whole application.

There is one caveat in this approach and that is SSR. Since we are checking the authentication on the client side, when we first load the page, we might get some flickery behaviors. But wait, there is a solution for this also!

Server Side Authentication - Power of the “getServerSideProps”

So, the basic idea is that we need to validate the authenticated user on the backend server before loading the page. Able to do this, we need another library called firebase-admin, with this library we are able to do a lot of things such as creating users, databases, and validations.

Here is the basic configuration of the firebase-admin app:


import * as admin from 'firebase-admin';

/* eslint-disable import/prefer-default-export */
import { credential } from 'firebase-admin';
import { initializeApp } from 'firebase-admin/app';

const serviceAccount = require('ServiceAccountFile.json');

if (!admin.apps.length) {
 initializeApp({
   credential: credential.cert(serviceAccount),
 });
}

export const adminSDK = admin;

Once we configured the adminSDK, we can use it on our application.

So, the logic of the server side auth verification is that we need to validate the users token on the backend. So, once we are logged in as a user, firebase gives us a unique user token. Somehow we need to pass this token value to our backend and the best way to do this cookies!

Here is the implementation of the server side validation of the authenticated user:

import nookies from 'nookies';
import { adminSDK } from 'configs/firebase-admin-config';

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 const cookies = nookies.get(ctx);
 if (!cookies.token) {
   return {
     props: {
       isLoggedIn: false,
     },
   };
 }

 try {
   const token = await adminSDK.auth().verifyIdToken(cookies.token);
   if (!token) {
     return {
       props: {
        isLoggedIn: false,
       },
     };
   }

   // the user is authenticated!
   const { uid } = token;
   const user = await adminSDK.auth().getUser(uid);

   return {
     props: {
       isLoggedIn: true,
     },
   };
 } catch (error) {
   return {
     props: {
       isLoggedIn: false,
     },
   };
 }
}

And of course, once we logged on the client side we need to store the user token in the cookies. So, the client side implementation will be change a little bit.

useEffect(() => {
   const unsubscribe = onIdTokenChanged(auth, async (user) => {
     if (user) {
       setAdmin(user);
       const token = await user.getIdToken();
       nookies.set(undefined, 'token', token, { path: '/' });
     } else {
       setAdmin(null);
       nookies.set(undefined, 'token', '', { path: '/' });
     }
   });

   return unsubscribe;
 }, []);

Conclusion

That’s it! Now, you have both client and server-side authentication. Using this approach you can create excellent web applications.
We have learned how to set up user authentication in a Next.js application using Firebase. We have seen how Firebase makes it easy to handle user registration and login, and how to use Firebase's authentication API to authenticate users in our application. We also saw how to use Firebase's Firestore to store user data and how to protect routes based on the authenticated user. With this knowledge, you should now be able to add user authentication to your Next.js applications easily and securely. Happy hacking!