Building an API to work with Auth0 gatsby implementation

Help
1

Hey there, I did the Jason Lengstorf walk through on client-side protect routes on Gatsby, and wanted to build a little light weight Node/Express API to edit data I store in a database. There isn’t much out there on this so am I’m crazy for wanting to do this? Any and all direction would be more than appreciated.

2

Hi @sargtier1! Welcome to the Community! Jason is awesome.

I think if you’re looking at building a Node/Express API (which we do have some great content on), you should stop and think about the why. Since Gatsby is for static sites that typically don’t need to hit databases, what functionality do you need?

For example:

  • Are you just needing to store data somewhere that you can load into your Gatsby site (read-only)? In this case, something like Airtable with gatsby-source-airtable (or a CMS like Contentful maybe) might make more sense. That way you can use that data as GraphQL in “the Gatsby way.”
  • Are you actually needing to edit data from the UI? If so, Gatsby probably isn’t a good fit. You’d be better off with either a SPA+API or a traditional web app in that case (a “dynamic” site).

Does that make sense?

Cheers,
Sam Julien

2 Likes
3

Dude, Sam, I read your article on that exact same implementation too! Great stuff, as a newer developer it’s articles like yours that help me level up.

To answer your question, your examples do make sense. As for the why am I doing this? Well, I love Gatsby and really wanna do something crazy. I fell like most people are quick to dismiss it being a static site generator and all. I’ve built a quite a few sites with Contentful CMS as the read only data source, and even made client side calls to various APIs, so I figured if it can do that, why can’t I just use Gatsby instead of React in a MERN app?

I’m really just trying to challenge myself, and find the boundaries in Gatsby. For more context I want to use the “GraphQL Gatsby way” to pre-load as much data as I can (in this case from an external API on video game data, and the associate user data from my database). Then once the hydrate life cycle method is activated, a user can then leverage the dynamic capabilities to perform CRUD operations with respect to an express/node server (which I’ll eventually refactor into a GraphQL server). I really wanted to throw Auth0 in there cause, seriously, I think this is the coolest implementation of auth I’ve ever seen, and I want to get better with the Auth0 service.

If you still suggest against my endeavor, I will heed your advice, however it does leave me with a couple more questions:

  1. What is the point of the Gatsby-Auth0 implementation to begin with - is it strictly a read-only thing, or to prevent functionality?
  2. How would you use the client side protected routes from your article and Jason’s video in a real world scenario?
  3. Would Next.JS be a better fit for this project?

Apologies in advance for the long post. I greatly appreciate you taking the time - It really helps me out getting insight from a pro!

Cheers,
Sal

4

Thanks for the kind words Sal!

There’s really nothing stopping you from using Gatsby in the way you’re suggesting and now you’ve got me curious what will happen. You’ll just have to give some thought to what data is static and what’s dynamic. There’s some great documentation on how to use non-GraphQL data in the createPages function for the static part.

As for the dynamic part, if you think about it, using Auth0 is essentially the same concept – you’re fetching outside data from an API dynamically inside of a service. So, again, nothing stopping you from doing the same with outside APIs. Keep in mind, though, that there are some tricky things we have to do to get that working, like how we use wrapRootElement and add a workaround to the Webpack build (see here in the article). This is due to the static nature of Gatsby and how it only mounts the root element once. So if you encounter anything weird like that you may need to experiment.

So, to answer your questions:

  1. The point of the Auth0 implementation in the scenario Jason and I describe is mostly for the sake of a persisted user profile and limiting access to things. For example, the Gatsby swag store (repo) uses Auth0 to get GitHub data and associate you with the Shopify purchase (another external API!). If you end up protecting an API, you’ll also need to use Auth0 to handle that access token.
  2. I think ^^ answers this.
  3. I don’t think in your case it matters much if I understand how Next works, because in either case you want your React app to be handle the data on the client side.

Let me know how this goes. I’m curious if you run into anything weird trying to load external data dynamically. Nothing jumps out at me but I could be missing something with the way Gatsby renders things. The Store repo seems like a good guide for what you’re doing.

Cheers,
Sam

2 Likes
5

Sam, thanks for your input. I find what will make me a marketable developer is understanding these newer technologies, and really making them my own (or using them in my own way, in addition to the current meta). I’ll definitely check out the Gatsby swag store for some inspiration! I think my biggest issue is getting the API to read the token. I’ll be sure to check the resources you linked in your previous comment on APIs. Also, I’ll keep you in the loop on my progress going forward, too. I hope you have a great rest of the day, and a solid weekend too!

Cheers mate!

1 Like
6

Hey @sargtier1, I found some interesting stuff about using dynamic data with Gatsby you might find interesting:

So definitely does sound possible! I think I’m gonna try it myself!

Cheers,
Sam

1 Like