Ep. #49, Auth in the JAMstack with Sam Julien of Auth0

Brian Douglas: Welcome to another installment of JAMstack Radio. Sam, tell us why you're here.

Sam Julien: I am a developer advocate engineer for Auth0, the identity and access management company.

I'm also a Google developer expert for Angular and web technologies, and I've recently been really getting into Gatsby.

So, I made a course on Thinkster.io called Up and Running with Gatsby. I've just been nerding out a lot lately on the JAMstack and Gatsby.

Then for work, just puzzling over the new sets of challenges that the JAMstack provides for authentication, and that sort of thing.

Brian: Excellent. I'm curious, what was your introduction to JAMstack? How did you discover it?

Sam: My introduction to the JAMstack and Gatsby is mostly due to my interest in writing.

When I first started with Auth0 I was on the technical content team, and I had moved from --

Like, I did a regular engineering job at a place in Portland and moved on to the content team at Auth0.

I was doing a lot of writing, and a teammate of mine recommended looking at Gatsby.

At the time we were considering rewriting the Auth0 blog.

I don't know if we're still going to do that, but that's how I got into Gatsby was through a teammate at Auth0 recommending it.

It just really scratched the itch of both having the markdown support, but also just writing code in order to build a platform for writing. It's that developer nerd side and writing side all at once, and I just fell in love and really got into it.

Then when you introduce deployment and all that stuff, it's also really easy. It was just really nice right out of the gate.

Brian: Cool. Then obviously being part of Auth0 and an authentication company, what's the experience with Gatsby been leveraging Auth0?

I'm assuming you're using Auth0 for your sites at Auth0.

Sam: Yeah, so it's largely the same as a regular React application.

There's just a couple of extra little caveats because of the build process, for example, in the web back build you need to--

The Auth0 SDK, like a lot of SDKs, access some window properties and things like that that are specific to running in the browser.

When Gatsby does its build, it doesn't have access to those browser APIs.

You have to do a little bit of a workaround to say, "If we're not running in the browser just ignore these calls to the window," and things like that. Provide this Auth0 variable, and that's pretty common with dependencies in Gatsby.

So that's one caveat, you also have to-- Gatsby abstracts away your route app component, so you need to use this thing called--

I think it's called "Wrap route element" in order to wrap your app component in whatever provider you're using for authentication, whether that's Auth0 or anyone else.

But aside from that, it's largely the same as doing regular old authentication and React for a single page application.

Brian: OK. My challenge with authentication in the JAMstack is I never know what to do with the JWT, and storing it in local storage. Is that OK or is that not OK?

Sam: You don't want to store a token in local storage.

Brian: Is that making it too easy for the hackers?

Sam: Yeah. It can be a vulnerable place to store things, so you definitely want to just keep the token in memory.

The interesting thing about the JAMstack is that it starts to blur the lines between the front end and the back end, so you have to look at what technology you're using and what your goals are.

For example, Next. Full disclosure, I haven't done a lot with Next, but Next allows these different --

You could go full static site, or you could do server-side rendering or this in-between method where you've got this serverless deployment.

So essentially, you want to look at "Do I need sensitive information when the app loads? Like, on render? Or do I need it after the render, basically?"

Because if you're doing something like server side rendering with Next and you need sensitive information, then you just treat it like a traditional web app where you would use sessions and things like that, and the server would know about that kind of thing.

Otherwise you'll treat it more like a single page application, where you do the token exchange and everything, and store the tokens in memory.

Brian: Yeah. Going back to when you mentioned sessions, if I wanted to use that pattern do I have to create some sort of cache?

Or, some sort of key value store to store those sessions, to keep that in memory? Or is that built in to Auth0?

Sam: One of our principal architects wrote this awesome article on different approaches to authentication in Next, so what you do is you'd essentially be doing the traditional web app route where you've got cookies and session cookies, and things like that.

Brian: Gotcha.

Sam: You would use something like Passport in that instance, where you're doing the traditional route and managing that kind of thing.

But hopefully you would use something at least like Passport to handle all the nuts and bolts of it, so you don't have to roll that yourself.

Brian: I've only recently really started getting really knees-deep into Gatsby.

I've leveraged Gatsby for a long time, but never for any projects that have any long-standing existence.

I'm loving it for having things like storing data, so for this podcast we have thejampicks.netlify.com, that's a Gatsby site.

I'm able to just jump into a CMS, write a bunch of links and make sure that those are copied over from the regular show notes, and people can organically find the picks from the site after the fact.

That experience has been a lot of fun. Some things I want to approach is having a public API to that content as well, and it seems like Gatsby--

Because GraphQL and the way it's been approached as far as the ecosystem, it's been nice to find other solutions for things to do.

I'm curious, has that been the same experience for yourself?

Sam: I think what's really causing Gatsby to flourish is the ecosystem, and having things like plugins for Contentful, or like Airtable.

You have all these options for different sources that can just drop in a plugin, and then you can write your content on a CMS or add data to rows in an Airtable spreadsheet, basically.

You get to abstract away a lot of the data access and stuff like that, and then just use GraphQL to access it in your components, which is really nice.

Brian: Yeah. It's extremely elegant on that approach. Leveraging and co-locating your GraphQL inside of your components.

I've set up a couple, quite a few React and GraphQL projects. I've done it differently every single time.

Like Gatsby, pulling that up and just having those decisions made for me when I Gatsby in it, that's a great experience.

Sam: It's interesting for me, because Gatsby was my way into React.

Because I have been mostly an Angular guy for a while, starting with Angular.js back in the day and then going through the migration and everything.

So it's interesting to move back and forth between ecosystems, and I can definitely see how since React seems like an "Assemble as you go" platform, where you pick and choose what you want to build in your application.

Whereas Angular is the opposite of that, they give you everything right from the start. So I can see how Gatsby is really meeting a need for people.

It's built on top of Create React app, but it's like Create React app to the nth degree of adding all these other layers of data and stuff. So, that's really cool.

Brian: I think what they really did well, and I talked to Kyle and I talked to Jason about Gatsby too, in length.

But what they've really done well is the ecosystem and the community, which brings me to the next thing that Auth0 is really involved in, which is the Gatsby shop.

So if I want to see if I'm eligible for free Gatsby socks, because they basically give away swag for contributions, the cool thing about that is that I can log in and then right off the bat I get to see my contributions.

So, I have a very light experience of Auth0.

I know there are some other add-ons and plugins to co-locate other data, so is Auth0 powering that data from GitHub as well?

Sam: If I recall, what's happening there is they're using GitHub as the social log in, so it's like this single sign on, and you're authenticating through Auth0 with your GitHub credentials.

Then I don't know whether they've added that to the-- Like, behind the scenes, that they've added that to the Auth0 flow.

Or, if once you're authenticated then they make another call over to GitHub. That would be something to look into in the code.

Theoretically I know that you could enrich the user profile with that data coming back from the round trip of authentication, but I don't know if that's exactly the way that that they do it.

I think it might be, but I'm not positive on that yet.

Brian: I'm looking at the Auth.js file in the open source GitHub repo, and they're using off Auth0.js.

Which I assume that's the SDK that gives you all of the out of the box stuff.

Sam: It is, yeah. In the last few months we've actually--

We've released a new library just for single page applications called Auth0 Spa.js, which is a lighter-weight version of Auth0.js. A

uth0.js isn't deprecated or anything, it's still used all over the place. But if you are starting from scratch a new React app or Gatsby or whatever, JAMstack.

You'd probably want to use the spa SDK that we released a few months back, but there's not really any reason to go back and refactor this to use that necessarily.

It would be a good pull request if somebody out there wants to do that, they could go and refactor to use the new SDK.

But yeah, I don't see anything in here about having to go get any-- Like, make a second call to GitHub.

So I'm going to surmise that they've enriched that on the Auth0 side.

Like, you go and get the GitHub profile and bring that back as part of the user profile.

Brian: Actually, as you're talking I'm skimming through the code itself, and I think they're just getting a token from Auth0 for GitHub, and then they're leveraging GraphQL and GitHub's GraphQL API to use that same token.

At the point of sign on you have a token from GitHub thanks to Auth0 and that social log in, and that same token can be leveraged to access data directly from GitHub.

Sam: Cool.

Brian: In this case they're going to Gatsby org and they're finding all your contributions as a user, and then based on how many of those contributions, you get that many socks.

Sam: Perfect. That's great.

Brian: Excellent. So we covered-- This is a pretty elegant workflow for auth-ing in the jam, and I think it's like --

I don't know too many other people who are doing it this easy when it comes to Auth0.

Like I said, one of my one-off side projects in code sandbox will use a tool like Auth0.js to get that auth in, and then present some data.

Me as a-- It's probably similar for yourself, as a developer advocate our job is side projects.

It's nice having a workflow to reach for on a regular basis, and not have to worry about rebuilding that from scratch every time you want to show off a cool little widget.

Sam: Yeah, exactly. This is going to sound like marketing speak, because it's my job, but honestly one of the things that I like about Auth0 is that it's very scalable.

If you want to do a simple log in and not have to mess with very much, you can do that for free, and then it can go all the way up to a real world production application.

You can scale it up really highly, but you're using the same basic set of tools each time, so you don't have to have this new learning curve for every iteration of your product.

Brian: Yeah. I'm curious though, as far as Auth0 goes, I'm sure the company has got to make money somehow.

Is there a limitation, or a certain ceiling? If I'm going to start a side project, do I have to be aware of-- I can only have two users on this, or something?

Sam: The free plan is actually pretty generous.

It has 7,000 free active users and unlimited log ins, it lets you do two social identity providers, which most of the time if you're going to use Google and GitHub or something, that's pretty decent for a side project.

You can do server less rules, and things like that. So that's a pretty nice free plan, and then we had a developer plan and developer pro plan that go up from there.

It usually has to do with the number of active users and the number of social providers, and then there's additional features like multifactor authentication and stuff like that you end up having to pay for.

Then the at the upper end of that, that's when you get into enterprise stuff.

Brian: I guess all the compliance things that you would need.

Sam: Yeah, like HIPAA and all those kinds of enterprise connections, things like that.

But if you're having to worry about that, then chances are you're not the one having to pay for it.

You've got a different chain of command for that.

Brian: Excellent. You mentioned your blog, hopefully listeners will check that out and run through that.

It seems like it's written out of the tutorial form, so you can follow the steps and get Auth into your Gatsby app.

Anything else you want to bring up?

Sam: No, I think that's basically it. I wrote that article on Gatsby, and I'm going to update that, or actually probably write a new version of it with the new SDK.

Then Sandrino's article that I mentioned that we can link to, is also really helpful for whether or not you're using Auth0.

It's just a really helpful article on understanding the different deployment models of something like Next, and how to authenticate.

Brian: Cool. If you don't mind, I guess we'll transition ourselves to jam picks. These are things that we're jamming on.

Music related, food related, code related. Nothing's out of bounds.

I see you've actually already prepared, so do you want to go first, Sam?

Sam: Sure. Again, this is going to sound funny because I work for Auth0, but my boss Kim Mida is --

We were friends before I worked at Auth0, so it doesn't count ass recommending my boss.

But she's been writing a lot of articles and starting to give talks and stuff on how to become a speaker and how too get the most out of conferences and stuff like that, so I am linking too her dev.to page because she's starting to do more stuff like that.

I think people are really resonating with it because she's going to be speaking at a few conferences next year on how to get into technical speaking, and stuff like that.

I just wanted to give a shout out to that, because I think people are really going to like that stuff.

The other one I wrote down was a heated blanket. I live in the Pacific Northwest and II live on a piece of land in thee country, and it gets cold up here.

I've found that using a heated blanket during the day is first of all, way cheaper than using a heater, and also super effective.

So, I really want to just encourage people who live in cold areas to maybe check out a heated blanket.

It's going to cost way less than running your heater constantly.

Brian: So we didn't go over this, but Auth0 is a pretty remote company.

Sam: Yeah, I think the numbers now are closer to 60% remote.

Just because we've opened some more offices around the world, and so a lot of the sales team work from the office.

But as far as developers and DevRel and stuff like that, it's mostly remote. You'll find us all over the place.

Brian: OK, cool. I was assuming that your heated blanket is because you work from home all day.

Sam: Yeah. I work from home from this small organic farm with chickens and stuff like that, so our main source of heat is a wood stove but I have la space heater in my office.

It's super expensive to run that constantly during the winter.

Brian: Sam, I'm afraid you buried the pick. I need to know more about this organic farm and your wood stove.

Sam: Yeah, I never know who knows what about me.

A few months back, some friends and I and my girlfriend, we bought this piece of property in the rural Pacific Northwest.

The people that we bought it from already had been doing a bunch of farming.

Like, when I say "Organic farming," I mean things like permaculture, where it's the small scale sustainable thing.

So we have a couple greenhouses, we have a bunch of fruit trees, and we have about 19 chickens that we're raising to lay eggs and stuff like that.

We moved in too late in the year to start planting things, but we'll start doing that in the next year. But yeah, that's the story. It's a pretty fun adventure.

Brian: It sounds fun. You said you're getting into writing, so hopefully you'll have just all this content written out in your experience so we can all follow along with your chickens.

Sam: Yeah, I need to start blogging about it more regularly.

I've tweeted about it, but I need to write things down. Like, we had some llamas for a while and that was really fun.

We borrowed them from our neighbor. Our neighbor is a beef farmer, so we buy local beef from this guy. It's an adventure.

It's just really funny because during the day, I'm programming and making screencasts about authentication and Gatsby, and stuff like that.

Then I walk outside and I chop wood and check on the chickens, and we'll go to the green house.

It's a really funny two different worlds.

Brian: So when the apocalypse comes through, you're definitely prepared on one front.

But also working home, you're protected from zombies as well.

Sam: Exactly.

Brian: You're good on all fronts. So if you don't mind, I'll share my picks.

Not as great as getting beef from your beef farmer neighbor, but my first pick is TestingJavaScript.com.

This is Kent C Dodds who's actually been on this podcast as well, recently he quit his job at PayPal and is going full time into screencasting and open source maintaining.

He did a whole slew of screencasts and collected some of his older egghead videos, and shared how to test JavaScript properly.

In conjunction with this, he's also open sourced some projects as well, which is testing JavaScript, the NPM module, and I went through it and I completely changed the way I approach testing my React components.

It's been super helpful, and I feel like I can finally get back to a fuller test coverage. So, definitely check that out.

I also want to share my other pick, I tend to always pick some TV show or movie I'm watching.

I spent two weeks down in Brazil for some work related stuff and some conferences, and during the time Hulu recently announced you can download TV shows.

So I downloaded the entire TV show, which is called Wu-Tang: The American Saga. Listeners also know I'm very big in to hip hop.

It's a great show, it goes in the background of how Wu-Tang was-- Their origin story, through Rza and getting everybody together out in the projects in Staten Island.

So, I highly recommended it if you want to see some glamorized hip hop culture from the early 90s.

Definitely check that out. Also, check out Brazil if you can. It's a very interesting country.

It's as big as the US and they don't care about speaking English, so I learned some Portuguese when I was out there because-- I basically called it "Survival Portuguese."

I had to pronounce words very weirdly. I don't know if this is going to be super offensive to some people, but I'm going to say it anyway. We can cut it later.

Portuguese is like if Americans who don't want to speak Spanish, want to speak Spanish.

Things like "Julio" would actually be "Julio," and "Tres" would be "Tres," so it's actually pretty good for the American tongue because things are pronounced the way you would think they would be pronounced.

But I struggled, because I speak Spanish. That was what I learned in school, so I had to fake my Portuguese accent so people would give me a bagel.

So, those are my picks. Sam, thanks for coming on. Thanks for sneaking in that last pick about your organic farm that you're living on and your llamas.

Thanks for talking about auth in the jam, hopefully people will find your blogs. Definitely check out Kim's post as well.

Sam: Yeah, thanks a lot.

Brian: Listeners, keep spreading the jam.