Open Source, Open Doors: Wrapping Up Hacktoberfest 4

After four consecutive weeks of Hacktoberfest, I’ve finally completed the challenge with four approved PRs. I have to admit, I felt quite nervous at the start of this event, as open-source felt like something outside my comfort zone. However, beginning with smaller issues helped me build confidence, and soon enough, I was motivated to seek out more complex issues to solve. Part of this drive, I think, came from being a student—contributing to a developer community gave me a sense of real-world experience.

If you’d like to read more about my Hacktoberfest journey, feel free to check out my personal page, where I’ve recorded my reflections after each PR. But without further ado, let’s dive into my final week’s PR.

Overview of Mikochi: A Minimalist Remote File Browser

Mikochi is a lightweight, self-hosted remote file browser, ideal for users managing files on private servers or NAS (Network Attached Storage). This tool allows users to easily navigate through remote directories, perform file management tasks like uploading, downloading, renaming, and deleting files, and even stream media files directly to players like VLC or MPV.

Built with a modern web interface powered by JavaScript/Preact and an API backend in Go/Gin, Mikochi provides a seamless and responsive experience for remote file browsing.

What I worked on

In this project, I tackled an issue related to enhance user control and security in Mikochi, I implemented a log-out feature accessible via a "Log Out" button in the application’s navbar. This feature was designed to securely log users out by clearing authentication tokens and redirecting them to the login page. On the frontend, the log-out button triggers an API call to a new /logout endpoint, clears the JWT from local storage, and refreshes or redirects the page to ensure users are fully logged out. On the backend, I built logic to handle the /logout endpoint by adding the token ID to a list of invalidated tokens. This list is checked in the JWT authentication middleware, ensuring that any request with an invalidated token is rejected with a 403 response. This addition improved Mikochi's security, helping users control active sessions and protecting their accounts on shared or public devices.

Solution

In this PR, I implemented a secure log-out functionality for Mikochi, addressing both frontend and backend requirements to enhance user session control. On the frontend, I created a Logout component to handle the API call to /api/logout and clear the JWT from local storage. When the user clicks "Log Out," the JWT is removed, a POST request is sent to the backend to validate the log-out, and the page redirects the user to the main login screen using window.location.href. On the backend, I modified the JWT generation in generateAuthToken() to include an ID property, allowing tokens to be invalidated effectively. I then added a handler in backend/auth/handlers.go to manage logout requests by appending the JWT ID to an invalidated token list. The JWT middleware checks each request, denying access if the token has been invalidated and returning a 403 response. To verify the functionality, I conducted manual testing by re-inserting a previously invalidated token into local storage after logout, ensuring that any attempt to reuse it failed, effectively securing the logout process.

My Thoughts

For me, this was a fascinating project, blending backend and frontend development into a single project. The issue I addressed on the frontend was relatively straightforward—creating a logout button, with a bit of CSS to improve its appearance. I’ve been learning React for a while, so while I needed a brief refresher, it helped me understand the code and components already in the source.

On the backend, the project owner had containerized the project using Docker, which was familiar ground for me. The most time-consuming part, however, was working with Go, the backend language for this project. I had no prior experience with Go, but tackling this issue gave me the opportunity to learn it to a functional level, which I found quite rewarding.

The above is the detailed content of Open Source, Open Doors: Wrapping Up Hacktoberfest 4. For more information, please follow other related articles on the PHP Chinese website!