Next.js: restrict pages to authenticated users

Many websites have pages that need to be restricted to authenticated users, for example profile pages or dashboards. Next.js web framework comes with a lot of functionality built-in JS compilation, rendering code on server and caching. When it comes to most other aspecs, it's up to a programmer to build, including such needed functionality as restricting access to some pages only to authenticated users. In this article we are going to build just that: a function that augments a page object, that could be used like that: Here's the implementation in TypeScript: In order to make it work on server we are going to need one more utility function fetchWithCookies . When making HTTP request from inside a Web Browser, the browser automatically sends cookies with each requests and then stores new cookies if a response comes in with set-cookie header. On server-side we need to build this feature ourselves, because neither Next.js nor NodeJS make any a

Phone Authentication in Ruby

Using SMS to authenticate a user has the following benefits: Everybody has a phone. Users don't have to remember passwords. Protect against robots & duplicate accounts. Familiarity. You should not use SMS a sole authentication method for systems that require high-security. What I am going to cover in this article is how to make an API that generates "phone tokens" that can be used to sign-in / sign-up. This way you don't need to create a user record before a phone is verified. User stories Below is 2 user stories we are going to cover. As a returning user. I want to sign-in . I go to the login screen and enter my phone . I receive an SMS with the verification code, enter the code . I am logged in. As a new user. I want to sign-up . I go to the login screen and enter my phone . I receive an SMS with the verification code, enter the code . I

Encrypt & Decrypt text in Ruby

If you want to pass some information to a client that you don't want the client to read or temper with, read on! The usage of our TextEncryptor is straightforward: data = { ... } serialized_data = JSON.dump(data) encoded_data = TextEncryptor.encrypt(serialized_data) # ... serialized_data = TextEncryptor.decrypt(encoded_data) data = JSON.parse(serialized_data) Implementation: One of the ways I use this is to store a proof that a phone number is verified on client side and allow exchanging that encoded phone number token to login or signup. You can read more about this in one of the following blog posts. Thank you for reading!

Faster Google Maps load times

Google Maps is notoriously slow. The moment you add a Google Map to your page you can cut your Lighthouse performance score in half. There are several ways you can fight with it: Add async/defer to your Google script - certainly helps, but no much. This technique is very common so I won't be talking about it. Loading the map only when a user scrolls to it. This works well the map is located below the fold. Code . Using a static google maps image. There are cases when you might not need an interactive map and an image is all you need. The API for it is surprisingly versatile. Code . Skipping fonts loading. Whenever you include Google maps script it automatically fetches a Roboto font. The map works perfectly fine without it, you can shave off a decent amount of time if you know how to block the font. Code . Using a static preview of the map and then loadi

Ruby on Rails optimization techniques

There’s a reputation that Ruby on Rails apps are slow, however, because of its simplicity, readability and many good techniques and tools available out of the box, it’s easy to make ROR apps behave faster than other language frameworks. So unless your app’s business model heavily depends on how much each transaction cost (WhatsApp, Twitter, and other social networks) ROR can be the right tool for you. Let’s begin! No Optimization No optimization article would be complete without mentioning premature optimization. So the first rule of optimization is that you shouldn’t optimize unless you have a problem, and unless you know for sure there’s going to be a bottleneck, you should focus on readability and business value instead of solving a problem that doesn’t exist. Measure The second rule is measure! How do you know you are making improvements unless you have numbers to back you up? There are different tools available based on what you want to measure. For optimizing spe

Running ActiveJob after transaction

Transactions! If you know how to cook them they can be a real life saver when it comes to dealing with inconsistent data. But... There's always a "but", am I right? Unfortunately at some point you add code to your system that has sideeffects outside of your database, and obviously transactions won't help you with that. One of such things is Active Job (unless it's based on Delayed Job, which stores your jobs in the same database. Imagine the following scenario: What is wrong here? A lot actually! First of all the SendSmsJob . The SMS is sent regardless of whether a charge via ChargeCustomer succeeds or not. If the charge fails the customer is still going to get the SMS, even though the whole transaction was rolled back. Confusing experience. Second PrepareForShippingJob (it could be any other job referencing the order). What happens if the job is executed before the transaction commits? Payment gateways are not the fastest kids on the block, and

Importing Compose.IO MongoDB dump into local docker instance

Importing Compose MongoDB dump into local docker instance Sometimes in order to easily test performance on your local machine or to test data migrations on real data you need to import production database. To make things a bit more complicated we are going to use docker. In general I avoid making such tutorials, but I was surpised to find out there are no tutorials for this particular operation . If you inspect what contents of the dump that Compose provides you look like, it's something like that: What this folder contains is actually raw database data. So no need for mongorestore and such tools. Also keep in mind that even if your local Mongo uses WiredTiger format, this old format is still going to work. Just show me the code Fine! # tab 1 # extract the backup tar -xvf backup.tar -C backup # stop running mongo instance docker-compose stop mongo # spin up mongo container and run a bash command in it docker-compose run mongo /bin/bash # executing code inside