Photo by Amol Tyagi on Unsplash

Setting authentication in Next.js apps can be stressful and confusing. To make your life easier, Auth0 created an SDK that makes this process simpler and fast.

In this blog post, I’ll show you how to add authentication to your Next.js application using the Auth0 SDK, how to display the authenticated user information, how to authenticate with a social provider, and protecting a route.

Auth0 dashboard

So the first thing you need is an Auth0 account. You can sign up for free at

Once you have your account setup, on the application settings dashboard create a new application with the Regular Web…

Improving your Git experience

Photo by Peppy Toad on Unsplash

Are you constantly repeating the same Git command or sequence of commands? Do you wish that it would be faster and easier to type those commands? With Git Aliases you can do it.

In this short blog post, I’ll introduce Git Aliases, show you how to configure them, and give you a list of my commonly used aliases.

What are Git Aliases?

Git aliases allow you to reduce the amount of text you write when trying to execute certain commands or a chain of commands. For example, imagine you are doing you are running the push — force-with-lease command. This can get really repetitive…

Photo by Christopher Gower on Unsplash

Are you building an app where you don’t have your backend implementation yet? Are you tired of maintaining a dedicated mock server? Do you find that mocking fetch or axios causes more problems in your tests than it fixes? Then you should probably consider starting using Mock Service Worker (MSW).

Recently, I’ve configured MSW in a couple of projects. Despite MSW being simple to configure there were some scenarios where I had issues. This blog post will do a small introduction to MSW, followed by the base steps while configuring it, and end with some issues I had.

What is MSW?

Mock Service…

Photo by Micah Williams on Unsplash

Authentication is hard! Nowadays, to create a simple login or logout feature, we require a considerable amount of boilerplate code. Now picture we want to add authentication with Google or Facebook? More boilerplate, right?

What if I told you that in React you can do that just by wrapping your code with a context provider and by using a custom react hook?

In this blog post, I’ll show you how to add authentication to your React application using the Auth0 useAuth0 custom hook, how to display the authenticated user information, and how to authenticate with a social provider like GitHub.


Auth0 dashboard

It is that simple to manage server state.

Hey everyone, I’m making this post to share with you a library that made managing server state on React applications easy and fun — React Query.

In this blog post, I’ll do a small introduction by explaining what led to its creation followed by an introduction to how the useQuery hook works. I’ll end this post by showing some custom configurations we can do, and how we can do cache invalidation, data refetching, and optimistic updates.

Photo by Fachy Marín on Unsplash

Until now, many React applications have been relying on global state as a way to share data between components and avoid prop drilling.


Lessons learned: are React hooks ready for the real world?

(Photo by Dawid Zawiła on Unsplash)

More than a year has passed since the release of React Hooks. By now, we know all the basics and perhaps have our apps using one or two of them.

This post consists of an agglomerate of tips and pains suffered while trying to migrate from a full-fledged pre Hooks app to a Hooks using one.

Some context

At Talkdesk, in the past year, the WFM Frontend Team decided to migrate their React application to functional components and start using React Hooks.

At the time it seemed a controversial decision. …

Are they really the same?

Hey everyone!

Very often I’ve heard “arrow functions and functions in JavaScript are the same and just have a different syntax”. To clear this up, I’m going to refer to some use cases where they behave differently, including some whys and notes.

Photo by Hello I’m Nik 🇬🇧 on Unsplash

this and arguments


Let’s look at the following anonymous function example called by setTimeout after 1000 milliseconds. Inside of it, we log the hello variable value and the hello property assigned to this.

A function using this

It would be to expect that the output would be helloand hello from this. But instead, the output was the following:

Photo by Tim Dennert on Unsplash

Hey everyone, the past week, I struggled with understating some of the insides of React Context. What I wanted to know was — why every time a context variable updates, I get a re-render on my component?

This article consists of the results of my research, as well as the recommended ways to avoid that issue.

For a better understanding of the issue, we will use the following example:


Here, we create a couple of things:

  • randomContext
  • A useRandomContext custom hook
  • A randomStore where we create two state variables and an effect that when the something variable content changes…

It’s not magic after all

Photo by Aziz Acharki on Unsplash

Hey everyone, in this article, we are going to review one of the things that I’ve heard to be the cause of some hate around JavaScript: the “magic” coercion. Afterward, we’ll use the newfound knowledge to explore equality and do some meme analysis to understand it better.

What is this witchcraft?” was probably one of the first things I thought when I learned about coercion in JavaScript. I consider it to be one of the things that makes JavaScript so fun for me but, at the same time, can be a considerable nuisance, depending on the situation at hand.


What is coercion?


Reviewing TC39 Stage 4 proposals

Photo by MontyLov on Unsplash

Hey everyone, recently, Optional Chaining and Nullish Coalescing were promoted to Stage 4 on the TC39 process. That got me very excited about what’s to come to JavaScript next year.

This article covers current proposals on Stage 4 with the expected publication year 2020.


Using sticky or global regular expressions that end up having multiple captures groups on a string can be tricky. String.prototype.match doesn’t return capturing groups if the global flag is included, and if it is only the first complete match and it’s capturing groups are returned.


Daniel Afonso

Software Engineer. Nerdy, loves to code and wants to learn everything.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store