In my last post, Implementing GitHub OAuth with NextAuth.js, we set up a standard single sign on flow with GitHub OAuth in NextAuth.js. This article assumes that you have followed along with that article already, and have your own version of that project locally. If not, but you already have a Next.js project, then you can follow along here just the same.

Last time, we set up a very basic dashboard to demonstrate displaying a signed-in user’s name, avatar, and some usage data from the GitHub API. Since then, NextAuth.js has evolved into Auth.js, but the GitHub implementation remains largely the same. However, if you haven’t upgraded your Next.js projects in a while, I would recommend doing so first.

In this post, we’ll pick up where we left off: upgrading your project’s dependencies, then decomposing your components into a scalable library using atomic design principles (atoms, molecules, organisms, templates, and pages). From there, we’ll install and configure Storybook for Next.js and Tailwind, write your first component stories in Component Story Format 3, and set up shared fixtures so you can preview and test components without depending on live GitHub API calls.