Lessons Learned Building a React Auth Library with Cursor.

David Lopez — Tue, 18 Mar 2025 16:07:57 +0000

What Surprised Me About AI's Help?

Using Cursor IDE with Claude 3.5 Sonnet, I found coding became much easier, even for someone like me who already knows how to program. As a dad with one kid and two more on the way, I don’t have a lot of free time for side projects. But with Cursor's composer feature in "agent" mode, I could type in a few prompts before work or while eating breakfast. Once I saw how fast it was to add new features and test them, I was motivated to continue and could spend an hour or two working on the project.

One of the hardest things about side projects is staying motivated. Since I already code for my job, I don’t always feel like doing more of it in my free time. But Cursor's AI felt like a coding buddy instead of just a tool. The agent composer mode, which can use tools, run terminal commands, and edit files, kept track of things for me, so I didn’t have to remember every little detail.

Another cool thing was how Claude 3.5 Sonnet in Cursor changed my workflow. I didn’t have to write all the code myself. I could just check what it suggested, see if it looked good, and then move forward. I didn't get hung up coding and optimizing line by line—I just focused on getting things done. If there were mistakes, I knew I could debug them later.

Cursor IDE also helped me try out new tools. For this project, I used vite, nx, and pnpm—tools I hadn’t used much before. Normally, setting up new tools takes a lot of time because you have to figure out all the settings. But Claude 3.5 Sonnet helped me skip most of that by giving me quick answers instead of making me dig through documentation. That saved me a ton of time and effort.

Where Did AI Slow Me Down?

Cursor's AI wasn’t great at setting up my project in the beginning. It defaulted to using an outdated project setup tool, Create React App, which no one uses anymore because it's no longer maintained.

I wanted a specific project setup using pnpm, vite, and nx to build a monorepo (a setup where multiple projects live in one big folder). It ended up being easier and faster to use the code generators in these tools instead of relying on Cursor's AI to generate the scaffolding. AI was helpful for giving me the right terminal commands for these tools, but I still had to know about them and tell it specifically to use them.

Another issue was that Cursor sometimes got confused about how my project was organized. Since I was using a monorepo, AI sometimes acted like it was working on just one small project.

When it tried to fix bugs, it would often get stuck in a rut, and it felt like it was trying to fix the bug by brute force. In these situations, reminding it that it was just working before the last change helped get it back on track. Also, reminding it that it was working in a monorepo helped too.

When I needed a way to refresh login tokens, Cursor's AI added an import statement for a function that didn’t exist in the library I was building. It would have been nice if it also realized that it needed to implement this function for it to work. It was another sign that Claude 3.5 Sonnet lost the monorepo context.

If I had blindly accepted all of Cursor's AI suggestions, my project would have ended up broken.

Would a Non-AI Approach Have Been Better?

In some cases, yes. Using the official setup tools (nx, vite, etc.) was way better than trying to get AI to generate everything from scratch.

One thing Claude 3.5 Sonnet in Cursor IDE could do better is recognizing when existing tools are the best choice. Instead of trying to write all the setup code, AI should have just told me to use these tools to generate code and build new packages from scratch. Even when I told AI to copy a popular open-source monorepo setup, it didn’t get it right. It didn’t use the right tools, and it didn’t even create a real monorepo.

But once I got past the setup stage, Cursor’s AI-powered agent composer was really helpful for writing the rest of the project.

What’s Next for This Project?

I’d love for other developers to try it out and tell me what features they need. Some ideas I have for improvements include:

A pre-made React component for signing in and signing up.
Better options for customizing how users sign up.
A way to recover lost passwords.
Support for passwordless login and multi-factor authentication (MFA).

The big goal is to create a simple React library that connects to AWS Cognito without requiring a bunch of extra tools. This would let developers add authentication to their apps without needing to install unnecessary software.

I plan to use this library in my own future projects because it makes setting up authentication so much easier.

If you're interested in checking out the project or contributing, you can find the repository here: GitHub - letsbelopez/cognito. Feedback and suggestions are always welcome!

AI is an amazing tool, but it’s not perfect. It’s great for making coding easier, speeding up repetitive tasks, and writing boilerplate code, but it still needs human oversight. Cursor IDE with Claude 3.5 Sonnet didn’t replace my coding skills—it just helped me work faster. And that’s what excites me the most about the future of AI-assisted development.

How to Load a PDF in a Browser from a PDF Byte Array

David Lopez — Mon, 23 Mar 2020 17:26:22 +0000

I got stuck on this seemingly easy task. I've somehow had gone my whole career without having to do this, but I've seen it done countless times on other sites.

I think the reason why I got stuck was because I tried the most complex solutions first thinking that they're more likely to work. I was wrong. Lesson learned. Try the easiest solution first.

Here's my solution. I ended up using an embed tag and make the src attribute equal to the api endpoint that was returning the byte array.

<div class="pdf">
  <embed src="https://api_url/path/to/endpoint" type="application/pdf" />
</div>

Your last step would be to style it however you want and configure the PDF.

Configuring the PDF

After you get the PDF loading, you may also be wondering how to size the PDF to fit in the <embed> tag.

The problem is that your PDF may not always fit beautifully in the browser window when it loads. Maybe it's really small or it's too large. This article is how to fix that.

There are specific types of query parameters for interacting with a PDF in the browser. You use these to help format the PDF. They look like this:

filename.pdf#view=FitH

And in the case where we're using the <embed> tag:

<embed src="https://api_url/path/to/endpoint#view=FitH" type="application/pdf" />

Instead of the parameters starting with a '?', it will start with a '#'. The '#' and everything after is called a fragment. Fragments don't get sent to the server during an HTTP request.

The keys and values in the fragment will tell the browser how to size the PDF. Follow the link below for a list of possible keys and values to use.

https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

I wanted the PDF page to fit on the page and using this fragment, #view=FitV, solved my problem.

You may think it's strange that your typing in these keys and values into Chrome but they come from an Adobe document. Me too. I think it's because Chrome tried to use Adobe's system but I couldn't find any information about it from Google. All keys and values may not be properly documented or map over into Chrome. You'll have to test them out for now. If you find any better documentation, please let me know.

Now go ahead and try a few of these PDF query parameter fragments on your own PDF.

DEV Community: David Lopez