Earlier this year I started using Nextjs more and more for developing small web apps. I initially wanted to use Gatsby, because I love it but wasn't able to because I needed authentication and dynamic routes.

You can't do that with Gatbsy...
me being an idiot, 2k19

That is when I read the "Adding App and Website Functionality" and "Building a Site with Authentication" pages on the Gatsby documentation. And oh BOY did it change my view of Gatsby!

Something finally clicked; Gatsby is just react. 🤯 I know right, what a mind-blowing statement. Obviously I knew that Gatsby sites are built with React etc, but I was fixated on the Gatsby way of building sites. Installing a source plugin, creating a createPages loop to render some pages and throw it up on Netlify. However, when I started thinking of it as Create React App with more bells and whistles, anything and everything was possible.

The first thing I did was add Firebase authentication to a site. Now, I am not going to go through any specifics since there is a great tutorial by Auth0 which I used as a base. The basic idea is;

1. Create a "private" page. /pages/app.js.
2. Tell Gatsby to render any pages with a slug of /app/* to that page.
3. Add Reach Router or React Router routes to the app.js page.
4. Create all your auth methods. Login/Signup, log out, getCurrentUser etc

At this point, I slightly changed my approach from the Auth0 article. I added AppContext using the React Context API. Which kept track of the auth state. I also created a Protected Higher-Order Component to wrap my private routes in. On load, it would check the auth state and either allow the user on the page or redirect them back to the login page.

PRETTY FREAKING COOL!

Now you might be thinking.

Why is this cool
You, maybe... 2k??

Lets talk about it

You can add preview functionality. This is solved with Gatsby Cloud, but we are developers, reinvent everything again. You'd create a pages/preview.js page and once an author is logged in, you can display all the draft posts by requesting them from your data source. Then you can route to /preview/:id, which can then display the content of the page using the same template as the public page. This will require a bit of morphing of data but it will be worth it, eventually.

Ecommerce. Provide an account to your customers to see past purchases or to see exclusive deals.

PAAS. Build out your public site using the usual Gatsby formula and provide potential customers with a quick process between discovery and conversion. Then the app part of your site can use the pages/app.js method described above.

Just think about it this way. Whatever you have built in React before, you can build it with Gatsby. The only difference, you can provide a super-fast, SEO friendly, experience to your customers to convert them quickly. Then use whatever backend or microservice architecture you want.

Hopefully my rambling helped you give Gatsby another chance if you thought that it was too restrictive and couldn't be used to build large scale applications.

✌️