Skip to main content

sometechblog.com

Protect NextAuth.js input fields with Cloudflare Turnstile captcha

Received a complaint email from Amazon SES (Simple Email Service) pointing out that my SES account could be closed because the complaint rate exceeded 0.51%. Bots were apparently abusing the input field to send signin emails to unknowing email addresses. The only exposed input field in my NextJS app is on a magic-link form, see it here.

Cloudflare offers an easy and free captcha solution with Turnstile. To get started you need 2 keys, a site key and secret key. You can see how to get them here. Once you’ve been issued the keys, you can integrate it with the magic-link form.

How I Avoid NextJS’s Image Component and Host Larger Files Elsewhere to Save Costs

If you want to keep your hosting costs low and not be forced to take the steep path from “Hobby” to “Pro”, avoid NextJS’s ‘Image’ component. Only 1,000 images are included in the free “Hobby” plan and even with a “Pro” plan it costs after 5,000 images; $5 per 1,000 images. Of course, you also avoid the “data transfer” limitations which you can hit fast with an embedded video and traffic.

Manage Key Binding Across React Components in a Larger App

When I started building my application I used a routing-based structured and as the application evolved I transitioned – at least partially – to a domain-driven structure. In the domain-driven structure the application is essentially divided in multiple smaller applications with their own domains. In my case that includes “generators”, “dataSources”, “subscriptions”.

This means that everything related to the subscription domain is located in the src/modules/subscriptions folder and then consumed on various pages be it pricing page or as a modal popup on the app page.

Enable NextAuth to Work Across Subdomains

By default NextAuth authenticates the domain provided by the NEXTAUTH_URL environmental variable and if it is on a sub domain like www.example.org also all domains below www like subdomain.www.example.org or subdomain.subdomain.example.org. It is often smart to make the domain authentication work across all sub domains to avoid restrains when branching out API services or deploying on sub domains.

To do this you need to set the cookie domain to root wildcard. If my web app is deployed on https://www.sqlai.ai/ then the root domain is sqlai.ai. The wildcard cookie domain that can be accessed on all subdomains is .sqlai.ai. The .www.sqlai.ai is only available on www.sqlai.ai and its sub domains.

Don’t Overpay for Bandwidth

After adding an embedded video to the landing page of my app I noticed bandwidth usage rose dramatically. The embedded video is auto-loaded for best experience and provides a sleeker experience than a YouTube embed. In a week the landing page videos both the optimized .webm (5.1MB) and .mp4 (20.4MB) consumed close to 25GB of bandwidth.

This would push me out of the free tier and into a steeply priced PRO subscription. A PRO subscription cost $20/mo ($240/y) and includes 1TB of bandwidth, but Vercel charge $40 per additional 100GB. Nothing crazy but costs creep up on you if you are vigilant. But thankfully an alternative exists.