Authentication Progress and Discoveries in Week 3 of Collaborative Data Visualization Platform Development

Hello again everyone, and welcome back for week 3 of building the collaborative elephant data visualization platform! This week has been a fascinating journey filled with progress, new learnings, and a few unexpected detours along the way.

Authentication Secured: A Big Step Forward!

Following up on last week's work on the sign-up and login UIs with Formik and Yup validation, this week's focus shifted to the backend. I successfully implemented an API for user signup, and with the help of NextAuth, we now have user login functionality using both email/password and Google sign-in! This is a big step forward, allowing users to easily and securely access the platform. All user data is safely stored in our trusty MongoDB database for now.

The Allure of Prisma: A Brief Exploration

As developers, we're naturally curious about new technologies, and this week, I couldn't resist taking a peek at Prisma, a popular object relational mapper (ORM). After comparing it to Mongoose, my current database interaction tool, I decided to stick with Mongoose for this project. Since the project is on the smaller side and I'm still familiarizing myself with everything, Mongoose seemed like the better fit at this stage. However, Prisma is definitely on my radar for future exploration – experimenting with different tools is a great way to expand our development skillset!

Conquering Challenges, One Step at a Time

Of course, development isn't always smooth sailing. Here are a few hurdles I encountered this week, along with the solutions I found:

  • The MongoDB Mystery: Initially, I ran into some connection issues with MongoDB. The culprit turned out to be my ever-changing IP address. The solution, while not ideal, involves whitelisting my IP address in MongoDB's network access page daily.

  • NextAuth Customization: I encountered a snag while trying to get NextAuth working with my custom login page. While NextAuth does provide built-in UI under their default routes, I opted to keep my custom pages as it aligns with the project's overall design vision. This highlights the flexibility of NextAuth and the ability to tailor authentication flows to specific needs.

  • Typescript's Type Trials: Using TypeScript with NextAuth led to some type-related errors in my user object. The solution involved creating a custom type definition file at the project's root to augment the NextAuth options.

  • The Google Provider Puzzle: Integrating the Google provider presented a bit of a challenge. Due to my user schema requiring a password field, Mongoose threw a validation error during Google sign-ups. While some solutions set the password field to "false" in the schema, this felt like a potential security concern for the credentials provider. After exploring options, I decided to temporarily implement a default hashed password for Google sign-ups. This isn't the most secure long-term solution, and I'm actively researching better approaches to ensure robust security.

Next Week: Dashboards, Data (Hopefully!), and Signing Out

The wait for the IUCN's response on data access continues, but the project keeps moving forward! Next week, I'll be focusing on building the user dashboard – the map view that welcomes authenticated users. This exciting addition will also include a menu for profile management, note-taking features, and, most importantly, a logout button! Integrating NextAuth sessions will allow me to display authenticated views and restrict access to specific pages within the platform.

The Learning Journey Continues!

As you can see, development is an ongoing adventure filled with learning experiences, unexpected challenges, and the satisfaction of overcoming them. We're making steady progress on this project, and I'm excited to share more in the coming weeks. Stay tuned for week 4!

Feel free to leave a comment below and share your experiences with authentication or using Mongoose in your projects!