DEV Community: mungaben

Taming the Flame: Securely Connecting Next.js and Firebase with TypeScript

mungaben — Thu, 04 Jan 2024 20:35:16 +0000

Part 1: Laying the Foundation

1. Next.js, Let's Go!

Creating a New Next.js Project:

Open your terminal and run the following command to create a new Next.js project:

   npx create-next-app my-nextjs-app

Replace my-nextjs-app with your desired project name.

Opening an Existing Project:

If you have an existing Next.js project, navigate to its directory in your terminal.

2. Firebase: Let the Flame Ignite!

Creating a Firebase Project:

Visit the Firebase console (https://console.firebase.google.com/) and click on "Add project."
Provide a project name and select your preferred location.
Click on "Create project."

Enabling Authentication and Firestore:

Within your Firebase project, navigate to the "Build" section in the sidebar.
Click on "Authentication" and enable the "Email/Password" sign-in method (and any others you'd like).
Click on "Firestore Database" and enable it as well.

Stay tuned for Part 2, where we'll dive into connecting Next.js with Firebase, setting up authentication, and creating components for user interactions!

## Taming the Flame: Securely Connecting Next.js and Firebase with TypeScript in a Technical Blog

Building web applications with Next.js and Firebase is a powerful combo, offering smooth development and robust backend services. But how do we securely integrate these tools and unlock their full potential? This blog dives into the technical details of connecting Next.js and Firebase with TypeScript, ensuring a secure and well-structured approach.

Fire and Secrets: Keeping the Flame Hidden

Security is paramount, and protecting our Firebase credentials is essential. We avoid hardcoding them in our code by utilizing environment variables. Next.js provides the NEXT_PUBLIC_ prefix for environment variables exposed to the client-side, while keeping them hidden from server-side rendering. In your .env.local file, store your Firebase configuration object obtained from the console. It will look something like this:

NEXT_PUBLIC_FIREBASE_API_KEY="..."
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="..."
... other Firebase configuration properties ...

Remember, never share this file!

TypeScript to the Rescue: Typing our Way to Safety

Next.js embraces TypeScript, and in our firebase.ts file, we can leverage its power for type safety. We start by importing specific functions from the Firebase SDKs that we'll need, such as initializeApp and getFirestore from the "firebase/app" and "firebase/firestore" packages respectively. Then, we access our environment variables with type assertions, like this:

export const API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY as string;
export const AUTH_DOMAIN = process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN as string;
... other variables ...

This tells TypeScript the exact type of each variable, preventing potential errors and enhancing code clarity.

Building our Firebase Bridge: The Configuration Object

With our secrets secured and types defined, we create the Firebase configuration object by assembling the accessed environment variables. This object forms the blueprint for connecting to Firebase during initialization.

const firebaseConfig = {
  apiKey: API_KEY,
  authDomain: AUTH_DOMAIN,
  ... other configuration properties ...
};

One App, Many Flames: Reusing the Connection

Next, we check if a Firebase app instance already exists. If not, we initialize one using the initializeApp function and the configuration object. If an instance already exists, we simply retrieve it. This ensures efficient resource management and prevents redundant initializations.

export let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

Opening the Doors to Firestore and Analytics: Easy Access for All

Finally, we extract instances of Firestore and Analytics from the initialized Firebase app. These instances serve as gateways to interact with these specific Firebase services throughout our Next.js components.

export const db = getFirestore(firebase_app);
export const analytics = getAnalytics(firebase_app);

Beyond the Basics: Building upon our Secure Connection

This blog has laid the foundation for a secure and typed connection between Next.js and Firebase. From here, you can explore and implement various features like user authentication, data storage in Firestore, and real-time updates with Cloud Functions. Remember, this is just the beginning. Go forth and conquer the flames of Firebase with the power of Next.js and TypeScript!

By understanding these core concepts and applying them to your projects, you can build robust and secure Next.js applications powered by the reliable services of Firebase. Remember, stay secure, use types, and keep the flames of development burning bright!

Ready to dive deeper? Check out these resources for further exploration:

Firebase Documentation: https://firebase.google.com/docs
Next.js with Firebase tutorial: https://m.youtube.com/watch?v=S_sV6bYWKXQ
TypeScript documentation: https://www.typescriptlang.org/

This blog post provides a technical explanation of connecting Next.js and Firebase with TypeScript, focusing on security and code structure.

4. Login/Logout Symphony: Secure Your Doors!

Initializing Firebase in TypeScript:

Install type definitions for Firebase:

   npm install --save-dev @types/firebase

Create a TypeScript file named firebase.ts:

   import firebase from 'firebase/app';
   import 'firebase/auth';

   const firebaseConfig = process.env.FIREBASE_CONFIG as FirebaseConfig;

   if (!firebase.apps.length) {
     firebase.initializeApp(firebaseConfig);
   }

   export const auth = firebase.auth();

Creating Login and Signup Pages with TypeScript:

Create new Next.js pages using .tsx extensions (e.g., pages/login.tsx and pages/signup.tsx).
Import types for Firebase authentication:

   import { auth, UserCredential } from '../firebase';

Use Firebase's authentication methods with TypeScript types:

   // Signup example
   const signup = async (email: string, password: string): Promise<UserCredential> => {
     try {
       return await auth.createUserWithEmailAndPassword(email, password);
     } catch (error) {
       // Handle signup errors
       throw error;
     }
   };

Stay tuned for the next part, where we'll explore even more exciting features of Firebase within Next.js! In the meantime, you can witness a practical implementation of these concepts in action:

Live Demo:

Website: https://firebase-in-next-js.vercel.app/: https://firebase-in-next-js.vercel.app/
GitHub Repository: https://github.com/mungaben/Firebase-in-next-js: https://github.com/mungaben/Firebase-in-next-js

Explore the code, interact with the live application, and witness firsthand how Next.js and Firebase collaborate seamlessly to create dynamic and secure web experiences.

Stay curious, stay fiery, and stay tuned for more!

Determining Tests in Test-Driven Development (TDD)

mungaben — Mon, 23 Oct 2023 12:27:37 +0000

Determining Tests in Test-Driven Development (TDD)

In the world of Test-Driven Development (TDD), guidance is provided on how to decide what tests to write. The chapter emphasizes the following key points:

Determining the Next Most Important Thing

When deciding which tests to write next, developers should zero in on the next most important thing that the system does not yet do. This entails identifying the functionality or behavior that is pivotal for the system but has not been implemented. Prioritizing these essential tasks ensures that developers make progress toward the overarching goals of the system.

Thinking from the User's Perspective

Another crucial aspect mentioned in the chapter is to think from the user's perspective when determining what tests to write. This involves considering how users will interact with the system and identifying the functionality that is indispensable to their needs. By empathizing with the user's experience, developers can prioritize tests that address core requirements and provide genuine value to end-users.

Incremental Development

The chapter underscores the importance of incremental development within TDD. Rather than attempting to implement all the desired functionality at once, developers should focus on one small piece at a time. This approach enables a more manageable and iterative development process, where each test builds upon the previous ones. The system gradually evolves, making it more adaptable and aligned with the desired requirements.

By heeding these principles—determining the next most important thing, thinking from the user's perspective, and embracing incremental development—developers can effectively prioritize their testing efforts. This ensures that they address the most critical aspects of the system, delivering value to end-users and maintaining a focused, efficient development process.

Direct and Indirect Effects of Test-Driven Development (TDD)

mungaben — Mon, 23 Oct 2023 12:22:56 +0000

Direct and Indirect Effects of Test-Driven Development (TDD)

Test-Driven Development (TDD) has both direct and indirect effects on the software development process. This approach offers valuable insights and brings numerous benefits to developers and teams. Here's an in-depth explanation of these effects:

Design Feedback Mechanism

TDD serves as a design feedback mechanism by providing continuous feedback on the design of the codebase. When developers write tests first, they are compelled to think about the desired behavior and interface of the code before writing the implementation. This practice fosters the creation of code that is modular, loosely coupled, and adheres to good software design principles.

Embracing Challenges and Pain

Embracing the challenges and initial discomfort associated with TDD is crucial. TDD may seem difficult or time-consuming at first, but it is through this process that developers uncover design flaws, identify edge cases, and improve the overall code quality. By embracing these challenges and the initial learning curve, developers can reap long-term benefits from TDD.

Direct Effects of TDD

The direct effects of TDD are numerous and significant. They include:

Improved Code Quality: Writing tests first allows developers to catch bugs early in the development process, resulting in more reliable and robust code.
Increased Test Coverage: TDD encourages comprehensive test coverage, ensuring that code is thoroughly examined.
Reduced Debugging Time: Bugs are detected early, making debugging more efficient and less time-consuming.
Modular and Testable Code: TDD fosters the creation of modular, testable code, leading to easier maintenance and future enhancements.

Indirect Effects of TDD

TDD's indirect effects are equally valuable and include:

Improved Collaboration and Communication: TDD promotes a shared understanding of the codebase and encourages frequent code reviews and discussions among team members.
A Culture of Continuous Improvement: TDD cultivates a culture of continuous improvement and learning within the development team, leading to ongoing enhancements in development processes and practices.

By understanding both the direct and indirect effects of TDD, developers can better appreciate the value it brings to the software development process. TDD not only results in improved code quality and efficiency but also fosters better collaboration, communication, and an overall culture of continuous learning and improvement within the development team.

The Test List in Test-Driven Development (TDD)

mungaben — Mon, 23 Oct 2023 12:17:25 +0000

The Test List in Test-Driven Development (TDD)

Maintaining a test list is a valuable practice in Test-Driven Development (TDD) to help developers stay organized and focused during the development process. Here's a deeper explanation of the concept and its significance:

Purpose of the Test List

The test list serves as a tool to assist developers in maintaining organization and focus during the TDD process. It acts as a central repository for tracking various aspects of the development process, including:

New Test Ideas: The test list captures new test ideas, whether they involve additional scenarios, edge cases, or specific behaviors that need testing. This ensures that all relevant test cases are considered and none are overlooked.
Staying Focused: It helps developers prioritize and stay focused on the current test and phase they are working on. This focus minimizes distractions and ensures that immediate goals and tasks are clear.
Managing Features: The test list can be used to track the implementation of new features as the codebase evolves. It ensures that all features are documented and addressed systematically.
Refactoring Tasks: In addition to new features, the test list can also be a reference for refactoring tasks. As code is improved and optimized, the test list helps keep track of these tasks and ensures that they are completed in an organized manner.

Staying Organized and Efficient

By maintaining a test list, developers can enhance their organization, focus, and efficiency throughout the TDD workflow. It guarantees that all necessary tests are written, features are implemented, and refactoring tasks are addressed systematically. This, in turn, contributes to the creation of a more robust and maintainable codebase.

In summary, the test list is a valuable tool that plays a pivotal role in the TDD process. It helps developers manage their tasks, maintain focus, and ensure that all aspects of code development are systematically addressed.

Triangulation in Test-Driven Development (TDD)

mungaben — Mon, 23 Oct 2023 12:09:36 +0000

Triangulation in Test-Driven Development (TDD)

Triangulation is a valuable technique used in Test-Driven Development (TDD) to expose deficiencies in code and iteratively refine it to handle various scenarios, especially edge cases. Here's a detailed explanation of how triangulation works:

Exposing Deficiencies

Triangulation involves writing additional tests that cover different scenarios or edge cases. By creating multiple tests, developers can verify that the code functions correctly under a variety of inputs and conditions. This practice is essential for exposing any deficiencies or bugs in the code that might not have been immediately apparent.

Gradually Refining the Code

As deficiencies are uncovered through the additional tests, developers can progressively refine the code to address those specific scenarios. This process entails making incremental changes to the codebase, ensuring it can handle the diverse conditions identified by the tests. The primary goal is to gradually enhance the code's functionality and robustness over time.

Handling Edge Cases

Triangulation is particularly effective for dealing with edge cases—scenarios involving unusual or extreme inputs or conditions. By writing tests that encompass these edge cases, developers can guarantee that the code correctly manages them. This not only enhances the overall reliability and correctness of the code but also ensures it's well-prepared to handle uncommon real-world situations.

Triangulation is a critical technique in TDD because it propels the development process by continually revealing and addressing deficiencies in the code. By composing tests that span a wide range of scenarios, developers can instill confidence in the code's behavior and ensure that it adeptly manages all possible cases.

In summary, triangulation is a powerful method in TDD for enhancing code quality, making it more robust, and improving its reliability by addressing diverse scenarios and edge cases.

The TDD Cycle: Red, Green, Refactor

mungaben — Mon, 23 Oct 2023 12:03:54 +0000

The TDD Cycle: Red, Green, Refactor

Test-Driven Development (TDD) follows a repetitive cycle consisting of three phases: Red, Green, and Refactor. Each phase plays a vital role in the development process. Here's a closer look at what happens in each phase:

Red Phase

In the Red phase, a failing test is written. This means that a test is created to check for a specific behavior or functionality that has not been implemented yet. The test is expected to fail initially because there is no corresponding production code in place. This phase ensures that the developer has a clear understanding of what needs to be done.

Green Phase

In the Green phase, the focus shifts to implementing the code necessary to make the previously failing test pass. The goal is to write the minimum amount of code required to meet the test's requirements. This phase involves crafting the production code that satisfies the test's criteria, resulting in a passing test.

Refactor Phase

The Refactor phase follows the Green phase. During this phase, the code is improved without altering its behavior. Refactoring is essential for maintaining the quality and readability of the codebase. Developers can make changes to the code's structure, eliminate duplication, enhance naming conventions, and apply various refactoring techniques to improve the code's design and maintainability.

The TDD cycle is iterative, meaning it repeats continuously. After the Refactor phase, the process returns to the Red phase to write the next failing test. This iterative approach ensures that the codebase evolves incrementally. Each cycle adds new functionality and enhances the overall quality of the code.

In summary, the TDD cycle of Red, Green, Refactor is a powerful practice for building robust, maintainable software. By following this cycle, developers can systematically develop code that meets specific requirements, remains efficient, and is easy to maintain.

Test Driven Development

mungaben — Mon, 23 Oct 2023 11:56:09 +0000

The Laws of Test-Driven Development (TDD)

Test-Driven Development (TDD) is a software development practice that emphasizes writing tests before writing production code. It consists of three fundamental laws that guide the process:

The First Law: You must write a failing test before you write any production code.

This law underscores the importance of starting with a failing test. Before diving into writing production code, you should first create a test that verifies the expected behavior or functionality. This practice ensures that you have a clear understanding of what needs to be implemented and helps you avoid ambiguity.

The Second Law: You must write only enough production code to make the failing test pass.

The second law encourages developers to write the minimum amount of code necessary to make the failing test pass. The focus here is on implementing the simplest and most straightforward solution that satisfies the test case. This approach helps prevent over-engineering, keeps the codebase lean, and minimizes unnecessary complexity.

The Third Law: You must refactor the code after the test passes to improve its design.

After the test passes, it is crucial to engage in refactoring, which involves restructuring the code to enhance its design and maintainability. Refactoring aims to make the code cleaner, more readable, and aligned with best practices. It is an essential step in TDD to ensure that the codebase remains adaptable and maintainable over time.

By adhering to these three laws, developers can effectively practice Test-Driven Development. Writing failing tests first provides clarity about the desired functionality, writing only the necessary code keeps the codebase focused and efficient, and refactoring ensures that the code remains of high quality and can evolve with changing requirements.

Start applying these TDD laws in your development process, and you'll find that they can lead to more reliable, maintainable, and well-designed software.

Happy testing!

set up sanity in next13 >

mungaben — Mon, 24 Jul 2023 16:07:02 +0000

*create next app *-npx create-next-app@latest
navigate project folder

add install npm install next-sanity @sanity/client @portabletext/react @sanity/image-url -run npx sanity init configure it

it creates -studio page -entry to embedded studio
-.env file
- sanity folder with client and schemas