Configuring authentication with Azure B2C in Next.js is not a particularly straight forward process. We’ll look at how to facilitate this using the NextAuth.js library.

Image for post
Image for post

Authentication with Azure B2C and Next.js

Authentication with Next.js is, at least for me, a bit of a nebulous problem, especially if development requirements are not 100% solidified. Since you have access to both the client and server(less) environments, you could handle authentication purely in the client, on the server, or with a mix of both.

Add in the task of configuring authentication with Azure B2C and complications are compounded. …


A comprehensive step-by-step guide to configuring Jest, React Testing Library, ESLint, and Path Aliases in a Next.js project.

Image for post
Image for post

Next.js is amazing when it comes to installing, learning the framework, and jumping into the code. Its superb documentation & zero-config philosophy make this possible, and not having to think about configuration is wonderful…right up to the point when you want to add some additional configuration.

This configuration is, technically, useless to your final product. It won’t make it faster, or reduce your bundle size, or add amazing new features.

How’s that for a hook…🙄

But it’s important 🤩 Consider this step the first reminder to go slow to go fast (esp. check the second to last paragraph). …


Using Rollup, Babel, and React we’ll look at why & how you might abstract a third-party component library to create your own component library.

Image for post
Image for post

Component libraries are useful. They allow developers to add features quickly and with confidence that they will have consistent style & functionality. Libraries may be built in-house or by a third party. The former offers complete control over implementation but takes more time and resources to build; The latter can be implemented quickly, but relies on the existing implementation.

I like third party libraries, and have found that almost any limitations can be overcome by abstracting the library components on the side of the implementing application. When the library to implementing application ratio is 1 to 1, like in personal projects or on a small team, this process is relatively straight forward. …


Expose your React Navigation navigators for simple state sharing between any child screens in React Native.

Image for post
Image for post

Update 1/7/2020:

Please note that this was written with Expo 32.x & React-Navigation 3.x. I believe the same general ideas apply, but due to changes (modularization in particular) in the packages the code as-written will not be exactly the same.

I’ve been using React Navigation in my React Native projects lately and liking it a lot. It has all of the features I’ve needed and is relatively straight forward to work with out of the box. If you’re here you‘ve probably been working with it too, so I’m going to assume a basic working knowledge of both React Navigation and React Native.

Recently I ran into an annoying issue that took me a while to solve — the need to share of state between related screens in a navigator. …

Ben Fox

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