Devlog - 4

Today I connected my website to firestore for database
I have implemented the saving of login information of user to user collection of firestore database

This is the implementation code:

service\userService.js :

async function saveUserLogin(userRecord) {
   return db
       .collection("users")
       .doc(userRecord.uid)
       .set(
           {
               displayName: userRecord.displayName || null,
               email: userRecord.email,
               photoURL: userRecord.photoURL || null,
               lastLoginAt: new Date(userRecord.metadata.lastSignInTime)
           },
           {merge: true}
       )
}

service\userService.js :

router.post("/sessionLogin", async (req,res) => {
  const idToken = req.body.idToken;
  const expiresIn = 60 * 60 * 24 * 13 * 1000;

  try {
    const sessionCookie = await admin.auth().createSessionCookie(idToken, { expiresIn: expiresIn });
    const options = {maxAge: expiresIn, httpOnly: true, secure: false};

    const decodedClaims = await admin.auth().verifySessionCookie(sessionCookie, true);
    const userRecord = await admin.auth().getUser(decodedClaims.uid);
    
    await saveUserLogin(userRecord)

    res.cookie('session', sessionCookie, options)
    res.status(200).send({status: "success"})
  } catch (err) {
    console.error(err)
    res.status(401).send('Unauthorized request!');
  }
})

I also created the redirect from login page if login successful / refresh in login fail (these things where previously missing)

Also there are many UI improvements made, that’s not written in this Devlog

(●’◡’●)

Devlog

Time spent: 8 hours 15 minutes across ~6 days

This week I mostly worked on security-related improvements and continued work on the invitation template system.

Security Fixes

When I opened GitHub, I got a security notification. After checking it, I found that a Firebase client-side API key was present in the repository.

I know Firebase client API keys are not secret credentials by themselves, but leaving them exposed can still make abuse easier, especially if other protections are missing. Since the project is still in development, I decided to clean it up now rather than later.

What I did:

• Revoked the old API key
• Generated a new one
• Moved the configuration into environment variables
• Made sure sensitive files are not pushed to GitHub

res.locals.firebaseClientCred =
  Buffer.from(process.env.firebaseClientCred, "base64")
    .toString("utf-8");

The long-term plan is to separate development and production configurations.

Right now localhost access is required for development, so strict domain restrictions are not practical yet. Once the project is deployed, I plan to have:

• A development API configuration that allows localhost
• A production API configuration that only allows requests from the final website domain

The developer configuration will stay out of production deployments. Even if development code is accidentally pushed, it should fail instead of exposing access that was never intended for production.

The backend Firebase SDK setup was already safe, so most of this work was focused on the client-side configuration.

Navbar Improvements

I also implemented automatic navbar link highlighting.

Instead of manually setting the active page for every route, the navbar now checks the current URL and highlights the correct link automatically.

function highlightCurrentPageLink() {
  const currentPageUrl = window.location.pathname;

  const links = document.querySelectorAll("#navbar-ul li a");

  links.forEach((link) => {
    const href = link.getAttribute("href");

    if (href.split("/")[1] === currentPageUrl.split("/")[1]) {
      link.classList.add("active");
    } else {
      link.classList.remove("active");
    }
  });
}

Small change, but it makes maintaining the navigation much easier.

User Menu

Worked on the user menu and logout functionality.

Nothing huge here, but it is another piece of the authentication flow that is now coming together.

Template System

I created the HBS file structure for the template page and spent a lot of time thinking about how templates should actually be implemented.

This is currently the biggest blocker. There are several ways to handle template rendering and customization, and I don’t want to lock myself into a design that becomes difficult to maintain later.

A lot of the development time this week went into planning, experimenting, and changing approaches rather than writing large amounts of code.

Next

• Create separate Firebase development and production configurations
• Add domain restrictions after deployment
• Continue work on the invitation template system
• Finish the template rendering workflow
• Improve user account features

There is still a lot to do, but the project is becoming more stable and secure before moving further into feature development.

Devlog-2:

Today , I added a beautiful animation to the home page
made the home page overall beautiful

Also fixed a authentication error :

• the fix was simple - I accidently wrote (res, req) instead of (req, res) in express router
• Also completed the login page design

What’s next :

• Surely build a footer tomorrow 😁
• Also planning to create a template creation tool for Admin

Note: the PHONE image have a cool animation effect.

completely done by hands , no AI

only used AI for clearing doubt

within 8h 33m , I made the home page, firebase auth, designed logo etc..

currently I am working on designing the ‘Login with google’ page

• I thought I should only submit and link the project after completing the full project … 😟
  but I didn’t forget to connect hackatime 😁🥳