The Jamstack Can Do That: Access Control
I yam who I yam ٩(^෴^).
Welcome to Remotely Interesting brought to you by Netlify.
People who were remotely interesting:
Did you know that Jamstack could do that?? Apparently, Phil didn't BUT fear not, we helped him remember he actually knew alllll about how you can easily add authentication, gate content and do so much more with authentication in the Jamstack.
Discussion Points
SHOW NOTES:
Blog Posts & Projects
As always, we hope you find it remotely interesting.
TRANSCRIPT:
Tara Z. Manicsic: [00:00:00] Previously
on Remotely interesting.
Jason Lengstorf: [00:00:04] Yeah. If I was doing that instead of making pasta, I'd might have a six pack by now.
Cassidy Williams: [00:00:09] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:12] This is remotely interesting.
Divya Tagtachian: [00:00:14] It seems
a little presumptuous.
Sarah Drasner: [00:00:16] No, no, no. That's the name of the
show.
Tara Z. Manicsic: [00:00:18] So, today on remotely interesting. We want to talk about a segment that we're excited about called the Jamstack can do that. Hopefully if we're interesting, we can continue to do this topic on other subtopics today. We're going to talk about access control. So talking about gated content, authentic Haitian and personal light station and wherever are.
Amazing minds wander to
next
Phil Hawksworth: [00:00:56] The Jamstack can't do
that stuff. Can't do that stuff on the static side, obviously
bill,
Cassidy Williams: [00:01:03] but that's incorrect
Tara Z. Manicsic: [00:01:07] I was like, wait, that's not, I was just like, Oh no,
Phil Hawksworth: [00:01:12] thanks for tuning in.
Tara Z. Manicsic: [00:01:15] Goodbye, but what,
Phil Hawksworth: [00:01:17] but you hear that a lot though, right? I mean, we've, we've all heard, like, no, that's where the ceiling is and you can't bust through that. That's why I'll never build a static site or Jamstack side because you can't do this dynamic kind of stuff. This authentication stuff.
Tara Z. Manicsic: [00:01:34] How do you
do it?
Phil Hawksworth: [00:01:36] I usually ask Jason how he does it. I mean, I don't want to do it like I'm passing the buck, but my goodness Jason's been doing a lot of demos of this kind of thing recently.
Jason Lengstorf: [00:01:48] Uh, yeah. I mean, there, there are a bunch of ways to do it. I think Cassidy was just going to talk about, um, you, you just did a next project with us, right?
Cassidy Williams: [00:01:55] I did. Oh yeah, I did one. I called it members only because I was like, you have to be a member, but there is, there's really nothing to see. It was just like, Oh, you made it. Let's
Tara Z. Manicsic: [00:02:06] go. You just want to have an excuse to wear that jacket.
Phil Hawksworth: [00:02:08] Yeah. Yeah.
Jason Lengstorf: [00:02:09] That's true. Yeah. What I, what I love most about that demo is that you managed to work the word grody into a software demo.
The word kind of made me Brody. It's like, it's a word that probably hasn't been heard. Outside of the third grade in 1994, besides our team meetings, besides
Phil Hawksworth: [00:02:30] usually in the sections of the team meetings where I'm just looking blank. Here's some like nineties, America, and a references that just go way over my head.
So how well do we spell groty? Is it groty grody road geography? Sorry. Yeah,
Tara Z. Manicsic: [00:02:49] come on.
Phil Hawksworth: [00:02:52] I love that. I'm trying to decide whether or not to add this to the show notes at this point.
Sarah Drasner: [00:02:58] Yeah.
Tara Z. Manicsic: [00:03:00] We actually like, so just to like little plug, we actually have a bunch of really great posts on the I blog where we have all covered.
Certain things like net identity, which make it really easy to do a, to do sign in and sign up on your page. But just like, like I know it did for angular and it was two lines of code, like one in the main index HTML, and one in the actual template. And it pulled in the net, the fi uh, identity widget, which is, uh, something that our team has been working on a lot lately.
And it's open source, check it out. We'll have the link for it in the show notes. Did we want to talk about that much at all? Or should we let it speak for itself?
Jason Lengstorf: [00:03:43] I mean, I think it might be kind of interesting just to, to dive into a little bit of the, like what's happening with access control and authentication.
So like yeah. When you're, whenever you're building a site that is going to have access, you need to be able to identify a person so that you can determine whether or not that person has the ability to access that content. Um, and so there've been ways to do this over the years. You know, if you, if you ever worked on like rails or PHP or things, I like that you may have dealt with, um, server sessions.
And server sessions were great because you could just store some information on your, on your server and like check somebody's request to make sure that they were that person and decide whether or not you sent them that content. Um, so when you move into the jam stack, that gets significantly more complicated.
We don't have a server, we don't have a place to store that secure detail. So how do we let somebody say I am who I am, um, and determine whether or not they get to see some content. And so I think that what, uh, what a lot of that'll leads a lot of people to assume that it's just not possible, but fortunately, because people much smarter than me are out there working on these hard problems, they have introduced things like Jason web tokens and cookie-based roles where you're able to, um, hit a what's called an OAuth provider and you get back an access token and that access token is encoded.
And it uses a secure secret that has to get validated somewhere. Um, but that says like, I am me and you can get assigned different roles. You can get assigned different, whatever. The, the nice thing about these is that they're just, they're called Jason web tokens because they're just Jason. So I, as a, uh, app developer can say, well, here's my user.
And I want to add this custom information to their token and you can add more or less anything you want to it. Um, and then when you send this token with a request to say like, Hey, give me protected content. The we can use serverless functions, we can hit an API, we can hit whatever it is that we want to and say, I would like some content, please.
Here's my token. And then the server has a secret key that it uses to say, is this a valid token? And then if the token is valid, it'll pull that custom data out and you can use it to say, Oh yeah, this person has an admin role. They can make this change. Or this person has a membership. They can see this content.
Um, and that allows us to do this really, really powerful stuff in the Jamstack. That may seem like you have to have a server to do it, but in fact, you can do it pretty much anywhere. Um, using the, either, uh, Jason web tokens and serverless functions, or if you are using, um, cookie-based access tokens, you can do it without JavaScript at all.
Uh, because like nullify and a few other providers support something called role based access control, where you can actually just write in your, in your redirects. If somebody has the role of admin, allow them to see this slash admin route, if not redirect them to the login page. That
Tara Z. Manicsic: [00:06:46] alone to me is so crazy because like, you're not even hitting up the server anymore.
So you're like reducing server calls and it's just, it's using re like, uh, when I did that, the first time I was like that worked.
Jason Lengstorf: [00:07:01] Yeah. It really does feel like, I mean, especially for someone like me who came from the server world of writing like sessions and stuff, the ease of setting up the basics of authentication. Is kind of staggering.
Sarah Drasner: [00:07:16] I
Phil Hawksworth: [00:07:16] made up a joke
Cassidy Williams: [00:07:18] just
Phil Hawksworth: [00:07:19] quick side note.
Cassidy Williams: [00:07:20] So sometimes Jason goes to parties, but he's the only web developer there.
So he's the token web Jason.
Tara Z. Manicsic: [00:07:30] Oh.
You can't see this, but Jason is so excited about that. Joe
Sarah Drasner: [00:07:41] jumping out of his seat, he's prodding.
Tara Z. Manicsic: [00:07:45] He's not
Sarah Drasner: [00:07:46] shaking his head and complete this may
Cassidy Williams: [00:07:51] I promise I was listening to what you were saying, Jason. I wasn't thinking about that joke the entire time
Phil Hawksworth: [00:07:58] I saw you. I saw you making notes. You had like a whiteboard where you're working out the mechanics of that joke and how
easily
Sarah Drasner: [00:08:09] I
Cassidy Williams: [00:08:10] think sweat off my brow.
Tara Z. Manicsic: [00:08:13] I think you actually had something non jokey to say.
Phil Hawksworth: [00:08:16] What's the point at this stage?
Sarah Drasner: [00:08:19] No, I mean,
Phil Hawksworth: [00:08:20] it's funny, the number of times I kind of come back to getting excited about that. If I redirect, um, I'm a lot of fun at parties. Um, but you know, the number of the number of times, I kind of find myself kind of saying.
Well, you can do that. And this little redirect file, because now on the, on the surface of it, you know, it's just this little conflict file where you say, um, any request that matches this path, you can redirect it or rewrite it, proxy it to this, this destination. And that's, there's a lot of power just in there.
Um, but then when you start to add some of the rules to it, like, well, This match will only work if the user has, um, language setting in their browser. So then you can start to do, um, you know, internationalized, localized content or, um, this, uh, this, the person making the request is in. In this country, then again, you can route people to localize content.
And this is just an extension of that. You can say, if this person has this role, then you're, they're authenticated to go to this destination and the vape that all of that stuff has been pre-rendered and it's just like, well, we've generated it and we'll put it somewhere that people can access. If these rules are satisfied.
It makes it really easy to kind of reason about it and really easy to, while you're developing it to kind of test this out and say, okay, well, here's the content and this is what will happen based on these sets of rules. And I don't know the, the amount of power that comes from this kind of little simple redirects config file that, uh, that is kind of unassuming and very, it's just one file in your, in your repo.
Um, it keeps on catching me off guard. So, um, so yeah, I realized that that's how this, this stuff works.
Tara Z. Manicsic: [00:10:01] You're touching on two things that I I'm like super excited about that. I think we should just have the whole topic on it at some point, but like we have with Nettleford edge handlers coming out, that's doing a lot of work on that CDN edge node, you know, based on redirects, it's going to be so powerful.
And then like one of our coworkers, Divya tech, Cassian's like super into the functionality of redirects and she has something special coming out soon that. Um, I won't touch on, but it's amazing.
Sarah Drasner: [00:10:32] So hopefully
Tara Z. Manicsic: [00:10:33] we'll get to talk about that soon. Um, but she's, she's really delved into the topic of redirects because they are so powerful and also, um, there's so much that you could do with them, that it gets quite conf can get quite confusing because you know, like with a lot of power comes great responsibility, so, you know, you gotta do it.
Right. Um, so keep your ear to the web.
Phil Hawksworth: [00:10:58] Yeah,
Cassidy Williams: [00:11:06] the coolest thing about redirects that like blew my mind was the ability to make a URL shortener with it. I think that's the coolest little trick that you can do with it. And I know internally we have like a Slack bot where. If you put in a URL, it'll shorten it and then put it in a redirects file somewhere.
And it just works. I think that is the coolest thing, because that, that kind of solves a problem and creates a solution to things that a lot of individual developers have wanted to do. But it's not something that you really think that you can do. You're just like, Oh, well I have to use Bitly or tiny URL or this or that.
But the fact that you could make your own on your own. Server and domain and stuff is the coolest concept to me.
Jason Lengstorf: [00:11:49] Yeah. Uh, Kent C Dodds built the thing. That's like a one-click deploy that gives, and it also gives you a local shell command. So like once you install his thing, you have a command in your, in your terminal, that's just shortened.
And then you drop a link in and it will automatically update your redirects file, deploy it and that Levi and in about 15 seconds. You've got a short link. That's like on your custom domain. It's really, really nice.
Tara Z. Manicsic: [00:12:13] I feel I can see dads is like, Every, you know, everybody's like, Oh, I should do this thing.
And then nobody does it. I think I feel it can't see dads gets all of those mind things and he's like, I'll do it.
Phil Hawksworth: [00:12:27] Yeah.
Cassidy Williams: [00:12:27] I think this is the domain names.
Sarah Drasner: [00:12:30] Yeah.
Phil Hawksworth: [00:12:31] No, no, that's perfect.
Jason Lengstorf: [00:12:36] I feel like, like, what I like about Ken is I think that so many of us, uh, we have ideas and we think they're cool. And then when we actually sit down to work on them, we talk ourselves out of it.
Cause we're like, Oh, somebody has already built that. Or a, I don't know, maybe it's not that cool. And I think Ken is like, I'm not going to be the one to decide that you just shifted. I'm sure that he has dozens of projects that no one has ever looked at. But a lot of the things that he shipped, I'm sure as he shifted, he was like, no one's ever going to look at this.
And then it's this, you know, this school thing. I always try to remember, like, you should be more like, can't just ship it. Like what's the worst that could happen is you ship it and nobody uses it. Right.
Tara Z. Manicsic: [00:13:13] I could be like, can't,
Phil Hawksworth: [00:13:17] you're mad when he did that. I was so mad when he, uh, did a little video tutorial of like, Oh, I found out you could make this URL shortener.
And here's how I did it. And he made, I made a little video of how he did it and. I was so annoyed when I saw it, because way back before then when we first did notify functions, I thought, Oh, we could use now if I functions and the redirect API to make a URL shortner and I made this thing that does the same thing, but it's so convoluted.
It was so good. It was like, it would take them form post and user net functions. They kind of put it over here and then kick off a build and yada, yada, yada, and I was really smug about it. And then. Can just does the same thing, much more elegantly and simply, and like, Oh yeah, I could have done it like that.
So that's how I, now I stole that straight back and that's how I run my own, my own URL shortener. The hardest thing about it was trying to come up with a compelling domain name. I spent more time trying to find a good domain name for a URL shortener. Then actually implementing a notice,
Tara Z. Manicsic: [00:14:21] started saying you're a shortner and been like, you were all shot.
Phil Hawksworth: [00:14:26] Oh, you just drop all the trouble of ours. No, constant.
Cassidy Williams: [00:14:33] I know about doing that. One thing was by name where, you know how like with accessibility, there's like the 11 for the number of characters and accessibility I was thinking of doing now it's my name? So it'd be like C5, Y a dot something for that kind of domain.
That's good. Yeah. Right.
Tara Z. Manicsic: [00:14:49] I mean, it's very egocentric, but
Phil Hawksworth: [00:14:51] yeah. I mean, this is for me.
Jason Lengstorf: [00:14:54] I figured out that the, uh, the dot AAF a top level domain is available. You have to go through like gandhi.net. But so I was able to buy Jason dot AAF. That's a pretty good one for awhile only using it as a shortener, but now I've, I've actually launched a personal site on it.
That is like the silliest thing I've ever built. But, um, but, uh, yeah, the, those are. Those are a lot of fun. And I don't think a lot of people know about them until this podcast. So go out there and get one right now, if you want to get your first name.
Tara Z. Manicsic: [00:15:26] Okay. We're not really seeing this podcast until I get mine.
I'm not joking.
Phil Hawksworth: [00:15:38] So we, we kind of veered away from, uh, cause, cause we, we, we talked a little bit about the. Like the orphan and some of the stuff that Jason said, but we were going to, I think we were going to talk a little bit about some of the stuff that custody did with next to North as well. Is that, did, did we go down that Avenue very much or it feels like we kind of skipped past, you
Jason Lengstorf: [00:15:58] talked about it being grody.
Yeah.
Phil Hawksworth: [00:16:01] At the beginning of the. Yeah,
Jason Lengstorf: [00:16:04] that was how we started Phil. How far we've come?
Sarah Drasner: [00:16:09] I think it's been a 15 minutes.
Cassidy Williams: [00:16:14] What did I do? Oh yeah. So I made, I made this project with next JS authentication. It was, it's interesting because I'm very used to vanilla reacts things and, and how redirects and routing and stuff works with that. And so it was funky to mess with it with. Next because it's just a different kind of router, but it was relatively simple to put together.
Um, again, with the identity widget, like I, it wasn't the two lines of code that it was for angular, but I just made like a file where I made like a wrapper for the functions that I want to use and called it and an effect. And it ended up being maybe not two lines, but like five lines in each component that I wanted to use it in.
And so it was really nice and simple to be able to make that.
Tara Z. Manicsic: [00:16:58] I really, so one of the articles that I was really impressed by Jason recently are the manage subscriptions and protect content with Stripe. Yeah. Um, and using, using cause you know, money is great.
Cassidy Williams: [00:17:10] I love. Um,
Tara Z. Manicsic: [00:17:12] so like being able to be like, give me money and I give you something is a great thing to be able to do with code.
Um, and it's, uh, it's such a thorough and like complete post. Which is total Jason post, but, um, you want to talk to that at all? Or like, is there anything about
Jason Lengstorf: [00:17:35] I talk to my thoroughness and post? Yes. I start to write and I can't stop until I have 7,000 words,
Tara Z. Manicsic: [00:17:43] the whole podcast on
Sarah Drasner: [00:17:44] that.
Tara Z. Manicsic: [00:17:44] So,
Sarah Drasner: [00:17:45] um, no.
Jason Lengstorf: [00:17:47] So the, the thing that's really exciting about that is like, because of, of what I was talking about with the JSON web tokens and the fact that we can write whatever we want in there.
Um, we can use third party API APIs to tie together different accounts and put that information into a JSON web token. So in this, the Stripe thing, um, what we're doing is like whenever you create a new network identity account. So when you register for an account on the site, we have web hooks for that.
So we have like an identity signup. Serverless function that lets you fire. Um, any, any arbitrary code that you want to run when somebody signs up. So you could add them to your newsletter. You can, uh, do what we did here and create a new free Stripe subscription for them. Um, and so we, we created a few plans.
There's a free plan. There's a, like a medium tier and a high tier. And as soon as you sign up, you automatically get the free subscription that that's your, your membership to the site. You can go to anywhere that's free. And then if you choose to upgrade, you go through Stripe's billing dashboard. And then when you upgrade in Stripe, they fire a web hook and that web hook, it can be sent wherever.
So we set up another serverless function that says, listen for Stripe Webhooks. And if you get one that says the account change, rewrite this person's roles in there, their identity user, to say that they have whatever tier of subscription. And that way, whenever they make a request, now they've got a role of like premium or pro or whatever the subscription is that they bought.
And we can show them different content based on that
Phil Hawksworth: [00:19:19] right there. Rose Jason, sorry, just to interrupt you. When you say rewrite their roles, is that updating what their role resolves to in the, in the token? Yeah.
Tara Z. Manicsic: [00:19:29] Rewrite their stars. Don't you know, that song.
Sarah Drasner: [00:19:36] Yeah. That sounds
Phil Hawksworth: [00:19:39] grody
Jason Lengstorf: [00:19:42] bill. First time I ever sing to you and you call me Brody. Um,
Phil Hawksworth: [00:19:46] so,
Jason Lengstorf: [00:19:47] but yeah, so, so the way that like Netflix, my identity works is by default. We include support for roles, uh, and that's, what's built into the role based redirects and those sorts of things. So, um, the easiest way to work with us is like those roles get packaged up into the JSON web token.
So if we rewrite the roles, when you get a Stripe web hook or, or when somebody does something and you want to change their privileges, you can just update the roles and net with identity, which will automatically update their Jason web token with their new role. And then when we do a request for like give me content, then that content can be gated based on role.
So if they have free only show them free, if they've got premium, show them free and premium and so on. Um, and so we, we did it in this one with, uh, with like an async request, like do a serverless function, but we could have used the cookie-based redirects too. And it would work the same.
Tara Z. Manicsic: [00:20:43] Just a quick asterisk.
I didn't realize before using that fry identity, that there's like different levels of customization, as far as how far you want to dig into the code, because you can set rules just like straight off the bat. In the UI on netlist FI's identity tab. Um, and I just thought that was, yeah, really interesting.
If you're like not super comfortable with setting the code of how you want that to be that you're like, okay, I will manually, it goes through these, you know, we have 30 users, I'm going to set their roles to whatever name I want to at the moment. Um, and that way you have rules right off the bat. Um, I just think it's really interesting as far as like accessibility to who can manage these
Jason Lengstorf: [00:21:23] things.
Yeah. Especially with invite only stuff.
Cassidy Williams: [00:21:27] Yeah. Yeah. I think it's a really powerful tool for gamification too. Cause you can unlock different pages and stuff. If someone has gotten to a certain level and you could even, you could make a really cool game with it. Like let's just say you wanted to do some kind of tabletop role-playing thing.
You could have certain people are only able to access certain pages based on the role that they have. And, and there there's a lot of really cool things that you could do with that to make. Some kind of game experience and playable experience through access that way.
Jason Lengstorf: [00:22:01] Yeah. That sounds like a fun side project
Phil Hawksworth: [00:22:06] is don't go down there yet.
Jason Lengstorf: [00:22:08] Buy the domain name.
Cassidy Williams: [00:22:12] I bought the domain name.
Phil Hawksworth: [00:22:20] But that's one of the things I like about this, the tutorial that, that gives the example that Jason is kind of describing there, although I would say as well, when, when Jason, when you shared that link, when it was staged and said, would anyone just mind just casting yeah. Rise over this post before I post it.
And we all, we all gradually kind of, I mean, obviously we rushed to help, but some of us, some of us rushed faster than others. And now he's like, Oh yeah, I'll have a look at this. And then I realized the scroll bar, the actual handle in the scroll bar was like two pixels deep because there's yeah, this
Jason Lengstorf: [00:22:53] Rollbar becomes a circle
Phil Hawksworth: [00:22:55] because, sorry.
Um, but having said that this, that, that tutorial there had lots of screenshots in it, thankfully as well. So it was like, Oh, actually it's not that much. But also from start to finish, it's like this complete walkthrough of every, everything you need to implement, you know, um, gated content, the actual kind of stubbed out content, API and integration with a payment provider, all of the logic to stitch it together, identity authentication, subscription management.
This is a. A lot, a lot in there. So I feel like I'm criticizing you for the size of the scroll bar was a little premature after seeing actually what happens when you read it. But the thing I really like about the example as well, Is that we know we've mentioned, um, rooting people with the redirects API to stuff that's been generated ahead of time.
Your example is, is the other thing is say, Oh, well, it's, this is access to different, different content through an API, right? Cause you, you express your content through an API and that's such a big piece of building things together with the Jamstack, you know, being able to say. Your content, your resources, whatever they are, they live on this API that could be anywhere.
And if you can push that up with roles and say, attribute different access rights to that. And then you've got this piece where you can assign roles to a user that's. These are really powerful building blocks to stitch together. So for me, that was a, that was a really nice example, reading through that thinking, wow, there's this actually has a really strong Swiss army knife of all of these things that I can do with these, these building blocks or mixing my metaphors horribly.
I'm sorry. And
Tara Z. Manicsic: [00:24:30] did you know that the Jamstack could
Phil Hawksworth: [00:24:31] do that
Cassidy Williams: [00:24:34] with building blocks in a stack?
Jason Lengstorf: [00:24:39] Uh, but I do think like the thing that, that is maybe one distinction that's worth drawing is like, you know, um, when you're doing server-based content, you don't have to think about like what should be generated ahead of time versus not. Um, so a lot of what we've been talking about is content than everybody would see if they have access to.
Um, and so something that we haven't talked about is like, what about content that only one person would see, like your user dashboard or your account profile or your billing settings or something like that. Um, so. You know, I, I, I feel like I've been talking a lot, so maybe somebody else wants to talk a little bit about how, you know, how do you manage that on the Jamstack.
Phil Hawksworth: [00:25:21] And th I mean, that by itself is a pretty good example of that, right? I mean, it's, it's kind of unfortunate to use. It's very self-referential, but, you know, we've the net, the fire admin, uh, Application is the perfect example of that, right? Because it's a react app where the UI is statically generated and is served from a CDN, but then all of the requests for the data, it comes through an API and that is personalized down to a single, single user.
Right. So that's, that's based on the authentication of. Unidentified user. So they're making, um, authorized requests to an API and being able to hear there is a database somewhere in there, it's all in the API and it's all personalized to an individual. Um, so you can absolutely do that, uh, on the Jamstack because it's a question of making authenticated.
Requests to an API. And in this case, in this case, it's not just roles, it's an idea of a user. So, you know, you're able to make those requests to an API then return the right data for a specific user is it's not all about pre-generated things on the Jamstack.
Jason Lengstorf: [00:26:26] Well, put mr. Hawksworth,
Tara Z. Manicsic: [00:26:28] mr. Hawks were.
Phil Hawksworth: [00:26:32] You guys are called me some things.
Tara Z. Manicsic: [00:26:39] No, but I think just in general, like Jason was saying earlier, coming from a more server centric world, the steps that it. Takes with JWTs is really impressive to me. Um, and like redirects just how, just like, you know, that there's not one short fire away do off. Um, and then it isn't as calm. Like I'm spending time on off before I just, I never wanted to touch it because it was just so convoluted and complicated that.
It was extremely daunting and it just feels so much easier. I mean, it's totally, I totally sound like a Koolaid drinker, but that's okay. Um, because I feel like my work is done faster. Thanks to how things are handled with the jam second off. Well,
Jason Lengstorf: [00:27:29] I think, I mean, I feel like that's how all of us ended up on the Jamstack right.
Is we were working in other companies doing things different ways and started moving this way and like, I at least in my case, and I think this is true of all of us. We, we came to nullify after building on the Jamstack and realizing that was the way we wanted to build websites.
Phil Hawksworth: [00:27:47] And for me, and I suspect for many as well, it starts with kind of the thin end of the wedge.
You don't think, well, all of the projects I've ever done in the past, I could do them with this model. You kind of start by identity. Well, I'm building a project where. I mean this, these are all, these are pages that aren't going to change very often or at all. And so I can sidestep all that complexity and just kind of distill it down to the simplest thing.
But then over time started to realize. Oh, the horizon is actually further away than I thought the ceiling is higher than I thought I can, I can do kind of search and I can do authentication. And, you know, and I don't, I don't think I would have ever gone straight to that. Um, it's just, I've, I've kind of eased it in that way and discovered more things over time, which I think might be one, one of the challenges now, because.
These, this ecosystem has grown up now, so you can jump straight in and do all of these things, but it's, it feels like a big jump. If you're used to doing it another way. Cause you, you, haven't kind of gradually put your toe in the water and East across and discover another boundary you can get through.
You've got people like I was banging on saying, Oh no, you can do all of these things. And it's like, wait, what can you that's? That seems backward to me. But you, I think, I think we've probably had the benefit of easing easing in and discovering things bit by bit.
Tara Z. Manicsic: [00:29:01] I do want to kind of wrap it up. And so I have two requests from all of them.
You, um, one, if you have any other tidbits or that things that have stumped you along the way that you want to share as far as awesome. Um, and then also. If you could like gait or restrict the people who are allowed to do certain things in your life.
Sarah Drasner: [00:29:30] Yeah.
Tara Z. Manicsic: [00:29:31] Well, we'll say, Oh, I'll go first. And, um, I just want to, like, I love the team at off zero and I just want to do a, like shout out to, um, like checking their stuff out as well. Um, working with them has been really nice. Um, and, uh, The thing that I would gait is what people could wake me up from sleeping.
So I would only give that access to like one or two people and it would change constantly cause I hate being woken up and that way people can't do it.
Phil Hawksworth: [00:30:06] You had that loaded up. Didn't you
remember
Tara Z. Manicsic: [00:30:10] when Jason asked us a question and I was like, what?
Jason Lengstorf: [00:30:14] That's, what you were working?
Phil Hawksworth: [00:30:15] I was waiting. Okay.
Sarah Drasner: [00:30:18] Someplace very special. I was asleep noticing.
Tara Z. Manicsic: [00:30:23] All right. Who is anybody have, do you want me to make some music until someone figures there?
Jason Lengstorf: [00:30:29] I have a tidbit, a one that's been very helpful for me, which is that, uh, when you start working with authentication, one of the things that you're going to be dealing with a lot is the tokens themselves.
Um, did I just steal your thing?
Phil Hawksworth: [00:30:41] Yes. Yes. Sorry.
was meant to be just between us, but yes.
Jason Lengstorf: [00:30:48] Excited. So it's all yours. I'll I'll back off.
Phil Hawksworth: [00:30:51] No, no, no, go on.
Jason Lengstorf: [00:30:52] I've been talking to all episodes.
Phil Hawksworth: [00:30:54] I've got another thought thing I know. Is that a, that's a tidbit. Isn't
Sarah Drasner: [00:30:58] it.
Phil Hawksworth: [00:31:02] Okay.
Jason Lengstorf: [00:31:03] With the author, you're going to be working with Jason web tokens a lot. And so, um, One of the things that helped me was starting to understand how they work and a really, really good resource for that is jwt.io, which you can take any token and then go paste it into JWT, to IO, and it'll decode it and show you what the details are.
Um, and so, and what's nice about JWTs is that like JWTs only include public information. Uh, you have to have the JWT secret to modify it or actually use it for anything. So, uh, when you go to JWT to IO, you can see the token. Um, but if you modify it, you to invalidate it. So it's not like it's, you know, giving you keys to the kingdom or anything.
Um, but that's a really, really handy thing to have.
Phil Hawksworth: [00:31:49] That's a good one. I mean, it's, it's, it's so good. I wish I'd thought of it myself.
Tara Z. Manicsic: [00:31:54] You didn't say what you would gatekeeper or, or user role restrict in your life.
Jason Lengstorf: [00:32:00] Oh, Hmm. Okay. So I, uh, I, I think if I was going to add role-based permissions to anything, it would be when people invite me to dinner, you could only invite me to dinner if.
Hmm, maybe I should back this one out that was like totally gonna offend vegans or something. Okay. Let's edit
Sarah Drasner: [00:32:27] that out.
Yeah.
Jason Lengstorf: [00:32:31] Like I was making a joke yesterday that my love language is cheese and I was like, I should make that joke more often. And then I, I didn't, I decided not to because you know, people who don't like cheese get mad at me when I say stuff like that.
Tara Z. Manicsic: [00:32:45] I know that it's so Gouda come on.
Jason Lengstorf: [00:32:54] wow. You both did same joke, different cheese. Nice.
Phil Hawksworth: [00:32:59] Wow.
Jason Lengstorf: [00:33:03] Unbelievable.
Phil Hawksworth: [00:33:05] Oh, Oh, am I now I'm the only one who hasn't made a joke, pun joke, but the pressure, isn't
Sarah Drasner: [00:33:12] a joke.
Phil Hawksworth: [00:33:13] Sorry.
Jason Lengstorf: [00:33:14] Hold on. I'm going over to way over here with that.
Phil Hawksworth: [00:33:16] This is a I don't. I want to drag my joke. Funds the tidbits and thoughts.
All right. So my, my tidbit, my tidbit, um, I was just Googling for it. Cause I can't actually remember the URL, but I will get the URL before this goes out.
Tara Z. Manicsic: [00:33:32] Okay. I'd like to imagine that you were giggling
Sarah Drasner: [00:33:34] Phil's Phil's tidbit
Phil Hawksworth: [00:33:39] Googling for a
Tara Z. Manicsic: [00:33:40] third.
Phil Hawksworth: [00:33:42] So, um, so in a similar kind of vein to, um, The JWT kind of playgrounds. Um, there's a nice example that our wonderful colleague Gerald, uh, put together a long time ago, uh, for trying out net of identity. Um, I can't remember it, is it it's identity
Tara Z. Manicsic: [00:33:59] getting started with JWT and identity?
Is it in that article?
Phil Hawksworth: [00:34:03] Yes, probably in that article actually is probably linked out from that. So the combo, the combo you're getting to. Tidbits for the price of one. So that's amazing, but yeah, he's he built this, he wrote this nice article, but then he linked to a lovely example, which is just a very simple site that allows you to try authenticating and then seeing the result.
And you can then look at them kind of, yeah. I like it, cause there's a very reduced example. So there's lots not, it doesn't do a lot. It just simply gave some content. Um, and it's a really nice example and a good place to just, just experiment and try that out for the first time. So that's my, that's my, that was my tidbit.
Right. So then my thought thing, um, Can I, can I add another layer to, and can I do it time-based um, because there are particular times the day that I would not like to see, um, posts that Jason has shared, um, particularly like between meals, because sometimes either I've just eaten or as a long time to my, until I'm gonna be again, Jason has a horrible knack of making delicious things and then.
Artfully crafting beautiful photographs of them and then sharing them at the point that I'm like, well, I need to eat again now. And I've just had a meal and now I'm going to have to eat something like this. And it's, I'll be honest, it's becoming a problem. So
Jason Lengstorf: [00:35:25] your, your thought thing was to creatively say that you're going to block me.
Phil Hawksworth: [00:35:34] Like a block of cheese,
Sarah Drasner: [00:35:36] the block of
Phil Hawksworth: [00:35:39] Phil's
Cassidy Williams: [00:35:40] feeling
Phil Hawksworth: [00:35:40] blue, I'm going to do so much better next time around. I'm going to be able to get in on this, but Cassidy's stealing all the pumps.
Sarah Drasner: [00:35:48] Um, so,
Cassidy Williams: [00:35:50] um, if I were to give a tidbit or thoughts thing, I'd say to think about your redirects early and don't like, throw them in. Later where like, Oh, after I log in, I want to redirect or after someone goes through a certain flow and a redirect, I planned that out early because that will save you a lot, a lot of headaches later.
And that is something that I have learned the hard way. Um, and if I were to have some gated content, I guess I'd say like people who are allowed to respond to my jokes.
Sarah Drasner: [00:36:25] Because
Phil Hawksworth: [00:36:26] that's good.
Cassidy Williams: [00:36:27] There are some people who either respond with something that isn't as funny because they're trying to like, Laugh along, but it's just, they're just not being funny.
Or they're trying to explain my own joke to me. And
Tara Z. Manicsic: [00:36:42] like a recapture thing where you have to like, finish a pun or make a pun, or do some joke in order to have access to New York.
Cassidy Williams: [00:36:52] Right? Yeah. So something like that. Like I, like I made a joke yesterday and someone said, I know you're joking, but I still want to bring up this point.
And they were directing me. On my own joke, but it was a joke and it didn't need to be corrected. It was just a joke. Anyway,
Phil Hawksworth: [00:37:08] that kind of sounds like a fun time.
Cassidy Williams: [00:37:10] Yeah, it's
Phil Hawksworth: [00:37:11] great. That's hilarious.
Tara Z. Manicsic: [00:37:15] I often think that when I see some replies to your jokes and I was like, isn't there a way, you know how, like you are supposed to type in a phone number and you start to type letters and they're like, no, you can't do that.
Like you start to say, I know this is a joke, but you're like, Oh, I can't, I can't type anymore.
Phil Hawksworth: [00:37:31] I think you'll find,
Tara Z. Manicsic: [00:37:39] I think what you're trying to say is
Cassidy Williams: [00:37:46] this has been remotely interesting tuna next time, where we're going to be talking about how to level up experiences at different level companies and catalytic skills. I am Cassidy Gorgonzola Williams.
Jason Lengstorf: [00:37:59] I am Jason Sharp cheddar Lang store.
Tara Z. Manicsic: [00:38:02] I am at phenom and exec
Phil Hawksworth: [00:38:04] and I'm Phil's Stilton. Hawksworth.
Wow.
Tara Z. Manicsic: [00:38:19] Wow.
Jason Lengstorf: [00:38:20] Excellent. In the camp, that was perfect. Flawless episode, no edits required.
Phil Hawksworth: [00:38:25] Ship it, ship it.
People who were remotely interesting:
Did you know that Jamstack could do that?? Apparently, Phil didn't BUT fear not, we helped him remember he actually knew alllll about how you can easily add authentication, gate content and do so much more with authentication in the Jamstack.
Discussion Points
- We cover a few different project and posts the team has been working on to showcase using authentication.
- Jason then gives us an amazing overview of what's going on with access control and authentication. He covers different approaches and the magic of JSON Web Tokens (JWTs). Go figure Jason talks about JSON ( ͡~ ͜ʖ ͡°)
- Cassiddy joke interlude
- Whaaaat you can do that with a redirects file!
- Divya's amazing work with both Netlify Edge handlers and redirects
- URL shortners & the amazingness of Kent C. Dodds's projects + envy
- Cassidy's Next.js & Identity and Jason's super-thorough Subscription and Protected Content with Stripe post
- Gameifying.af aka using roles to make games
- What about content onle one person would see like dashboards or billing on the Jamstack?
- Ending TidBits & ThoughtThings™️
SHOW NOTES:
Blog Posts & Projects
- Cassidy's Integrating Netlify Identity Into Your Next.js Apps
- Jason's Manage Subscriptions and Protect Content with Stripe
- Tara's Authenticating Users with Angular and Netlify Identity
- next-on-netlify
- Netlify Identity Widget
- Phil's amazingly named domain for his URL shortener findthat.at
- JASON AF https://jason.af
- Getting Started with JWT and Identity & the test auth project
- Netlify Edge Handlers
- Auth0 & their amazing jwt.io resource to help you decode, verify and generate JWT
- Kent C. Dodds's URL shortener
As always, we hope you find it remotely interesting.
TRANSCRIPT:
Tara Z. Manicsic: [00:00:00] Previously
on Remotely interesting.
Jason Lengstorf: [00:00:04] Yeah. If I was doing that instead of making pasta, I'd might have a six pack by now.
Cassidy Williams: [00:00:09] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:12] This is remotely interesting.
Divya Tagtachian: [00:00:14] It seems
a little presumptuous.
Sarah Drasner: [00:00:16] No, no, no. That's the name of the
show.
Tara Z. Manicsic: [00:00:18] So, today on remotely interesting. We want to talk about a segment that we're excited about called the Jamstack can do that. Hopefully if we're interesting, we can continue to do this topic on other subtopics today. We're going to talk about access control. So talking about gated content, authentic Haitian and personal light station and wherever are.
Amazing minds wander to
next
Phil Hawksworth: [00:00:56] The Jamstack can't do
that stuff. Can't do that stuff on the static side, obviously
bill,
Cassidy Williams: [00:01:03] but that's incorrect
Tara Z. Manicsic: [00:01:07] I was like, wait, that's not, I was just like, Oh no,
Phil Hawksworth: [00:01:12] thanks for tuning in.
Tara Z. Manicsic: [00:01:15] Goodbye, but what,
Phil Hawksworth: [00:01:17] but you hear that a lot though, right? I mean, we've, we've all heard, like, no, that's where the ceiling is and you can't bust through that. That's why I'll never build a static site or Jamstack side because you can't do this dynamic kind of stuff. This authentication stuff.
Tara Z. Manicsic: [00:01:34] How do you
do it?
Phil Hawksworth: [00:01:36] I usually ask Jason how he does it. I mean, I don't want to do it like I'm passing the buck, but my goodness Jason's been doing a lot of demos of this kind of thing recently.
Jason Lengstorf: [00:01:48] Uh, yeah. I mean, there, there are a bunch of ways to do it. I think Cassidy was just going to talk about, um, you, you just did a next project with us, right?
Cassidy Williams: [00:01:55] I did. Oh yeah, I did one. I called it members only because I was like, you have to be a member, but there is, there's really nothing to see. It was just like, Oh, you made it. Let's
Tara Z. Manicsic: [00:02:06] go. You just want to have an excuse to wear that jacket.
Phil Hawksworth: [00:02:08] Yeah. Yeah.
Jason Lengstorf: [00:02:09] That's true. Yeah. What I, what I love most about that demo is that you managed to work the word grody into a software demo.
The word kind of made me Brody. It's like, it's a word that probably hasn't been heard. Outside of the third grade in 1994, besides our team meetings, besides
Phil Hawksworth: [00:02:30] usually in the sections of the team meetings where I'm just looking blank. Here's some like nineties, America, and a references that just go way over my head.
So how well do we spell groty? Is it groty grody road geography? Sorry. Yeah,
Tara Z. Manicsic: [00:02:49] come on.
Phil Hawksworth: [00:02:52] I love that. I'm trying to decide whether or not to add this to the show notes at this point.
Sarah Drasner: [00:02:58] Yeah.
Tara Z. Manicsic: [00:03:00] We actually like, so just to like little plug, we actually have a bunch of really great posts on the I blog where we have all covered.
Certain things like net identity, which make it really easy to do a, to do sign in and sign up on your page. But just like, like I know it did for angular and it was two lines of code, like one in the main index HTML, and one in the actual template. And it pulled in the net, the fi uh, identity widget, which is, uh, something that our team has been working on a lot lately.
And it's open source, check it out. We'll have the link for it in the show notes. Did we want to talk about that much at all? Or should we let it speak for itself?
Jason Lengstorf: [00:03:43] I mean, I think it might be kind of interesting just to, to dive into a little bit of the, like what's happening with access control and authentication.
So like yeah. When you're, whenever you're building a site that is going to have access, you need to be able to identify a person so that you can determine whether or not that person has the ability to access that content. Um, and so there've been ways to do this over the years. You know, if you, if you ever worked on like rails or PHP or things, I like that you may have dealt with, um, server sessions.
And server sessions were great because you could just store some information on your, on your server and like check somebody's request to make sure that they were that person and decide whether or not you sent them that content. Um, so when you move into the jam stack, that gets significantly more complicated.
We don't have a server, we don't have a place to store that secure detail. So how do we let somebody say I am who I am, um, and determine whether or not they get to see some content. And so I think that what, uh, what a lot of that'll leads a lot of people to assume that it's just not possible, but fortunately, because people much smarter than me are out there working on these hard problems, they have introduced things like Jason web tokens and cookie-based roles where you're able to, um, hit a what's called an OAuth provider and you get back an access token and that access token is encoded.
And it uses a secure secret that has to get validated somewhere. Um, but that says like, I am me and you can get assigned different roles. You can get assigned different, whatever. The, the nice thing about these is that they're just, they're called Jason web tokens because they're just Jason. So I, as a, uh, app developer can say, well, here's my user.
And I want to add this custom information to their token and you can add more or less anything you want to it. Um, and then when you send this token with a request to say like, Hey, give me protected content. The we can use serverless functions, we can hit an API, we can hit whatever it is that we want to and say, I would like some content, please.
Here's my token. And then the server has a secret key that it uses to say, is this a valid token? And then if the token is valid, it'll pull that custom data out and you can use it to say, Oh yeah, this person has an admin role. They can make this change. Or this person has a membership. They can see this content.
Um, and that allows us to do this really, really powerful stuff in the Jamstack. That may seem like you have to have a server to do it, but in fact, you can do it pretty much anywhere. Um, using the, either, uh, Jason web tokens and serverless functions, or if you are using, um, cookie-based access tokens, you can do it without JavaScript at all.
Uh, because like nullify and a few other providers support something called role based access control, where you can actually just write in your, in your redirects. If somebody has the role of admin, allow them to see this slash admin route, if not redirect them to the login page. That
Tara Z. Manicsic: [00:06:46] alone to me is so crazy because like, you're not even hitting up the server anymore.
So you're like reducing server calls and it's just, it's using re like, uh, when I did that, the first time I was like that worked.
Jason Lengstorf: [00:07:01] Yeah. It really does feel like, I mean, especially for someone like me who came from the server world of writing like sessions and stuff, the ease of setting up the basics of authentication. Is kind of staggering.
Sarah Drasner: [00:07:16] I
Phil Hawksworth: [00:07:16] made up a joke
Cassidy Williams: [00:07:18] just
Phil Hawksworth: [00:07:19] quick side note.
Cassidy Williams: [00:07:20] So sometimes Jason goes to parties, but he's the only web developer there.
So he's the token web Jason.
Tara Z. Manicsic: [00:07:30] Oh.
You can't see this, but Jason is so excited about that. Joe
Sarah Drasner: [00:07:41] jumping out of his seat, he's prodding.
Tara Z. Manicsic: [00:07:45] He's not
Sarah Drasner: [00:07:46] shaking his head and complete this may
Cassidy Williams: [00:07:51] I promise I was listening to what you were saying, Jason. I wasn't thinking about that joke the entire time
Phil Hawksworth: [00:07:58] I saw you. I saw you making notes. You had like a whiteboard where you're working out the mechanics of that joke and how
easily
Sarah Drasner: [00:08:09] I
Cassidy Williams: [00:08:10] think sweat off my brow.
Tara Z. Manicsic: [00:08:13] I think you actually had something non jokey to say.
Phil Hawksworth: [00:08:16] What's the point at this stage?
Sarah Drasner: [00:08:19] No, I mean,
Phil Hawksworth: [00:08:20] it's funny, the number of times I kind of come back to getting excited about that. If I redirect, um, I'm a lot of fun at parties. Um, but you know, the number of the number of times, I kind of find myself kind of saying.
Well, you can do that. And this little redirect file, because now on the, on the surface of it, you know, it's just this little conflict file where you say, um, any request that matches this path, you can redirect it or rewrite it, proxy it to this, this destination. And that's, there's a lot of power just in there.
Um, but then when you start to add some of the rules to it, like, well, This match will only work if the user has, um, language setting in their browser. So then you can start to do, um, you know, internationalized, localized content or, um, this, uh, this, the person making the request is in. In this country, then again, you can route people to localize content.
And this is just an extension of that. You can say, if this person has this role, then you're, they're authenticated to go to this destination and the vape that all of that stuff has been pre-rendered and it's just like, well, we've generated it and we'll put it somewhere that people can access. If these rules are satisfied.
It makes it really easy to kind of reason about it and really easy to, while you're developing it to kind of test this out and say, okay, well, here's the content and this is what will happen based on these sets of rules. And I don't know the, the amount of power that comes from this kind of little simple redirects config file that, uh, that is kind of unassuming and very, it's just one file in your, in your repo.
Um, it keeps on catching me off guard. So, um, so yeah, I realized that that's how this, this stuff works.
Tara Z. Manicsic: [00:10:01] You're touching on two things that I I'm like super excited about that. I think we should just have the whole topic on it at some point, but like we have with Nettleford edge handlers coming out, that's doing a lot of work on that CDN edge node, you know, based on redirects, it's going to be so powerful.
And then like one of our coworkers, Divya tech, Cassian's like super into the functionality of redirects and she has something special coming out soon that. Um, I won't touch on, but it's amazing.
Sarah Drasner: [00:10:32] So hopefully
Tara Z. Manicsic: [00:10:33] we'll get to talk about that soon. Um, but she's, she's really delved into the topic of redirects because they are so powerful and also, um, there's so much that you could do with them, that it gets quite conf can get quite confusing because you know, like with a lot of power comes great responsibility, so, you know, you gotta do it.
Right. Um, so keep your ear to the web.
Phil Hawksworth: [00:10:58] Yeah,
Cassidy Williams: [00:11:06] the coolest thing about redirects that like blew my mind was the ability to make a URL shortener with it. I think that's the coolest little trick that you can do with it. And I know internally we have like a Slack bot where. If you put in a URL, it'll shorten it and then put it in a redirects file somewhere.
And it just works. I think that is the coolest thing, because that, that kind of solves a problem and creates a solution to things that a lot of individual developers have wanted to do. But it's not something that you really think that you can do. You're just like, Oh, well I have to use Bitly or tiny URL or this or that.
But the fact that you could make your own on your own. Server and domain and stuff is the coolest concept to me.
Jason Lengstorf: [00:11:49] Yeah. Uh, Kent C Dodds built the thing. That's like a one-click deploy that gives, and it also gives you a local shell command. So like once you install his thing, you have a command in your, in your terminal, that's just shortened.
And then you drop a link in and it will automatically update your redirects file, deploy it and that Levi and in about 15 seconds. You've got a short link. That's like on your custom domain. It's really, really nice.
Tara Z. Manicsic: [00:12:13] I feel I can see dads is like, Every, you know, everybody's like, Oh, I should do this thing.
And then nobody does it. I think I feel it can't see dads gets all of those mind things and he's like, I'll do it.
Phil Hawksworth: [00:12:27] Yeah.
Cassidy Williams: [00:12:27] I think this is the domain names.
Sarah Drasner: [00:12:30] Yeah.
Phil Hawksworth: [00:12:31] No, no, that's perfect.
Jason Lengstorf: [00:12:36] I feel like, like, what I like about Ken is I think that so many of us, uh, we have ideas and we think they're cool. And then when we actually sit down to work on them, we talk ourselves out of it.
Cause we're like, Oh, somebody has already built that. Or a, I don't know, maybe it's not that cool. And I think Ken is like, I'm not going to be the one to decide that you just shifted. I'm sure that he has dozens of projects that no one has ever looked at. But a lot of the things that he shipped, I'm sure as he shifted, he was like, no one's ever going to look at this.
And then it's this, you know, this school thing. I always try to remember, like, you should be more like, can't just ship it. Like what's the worst that could happen is you ship it and nobody uses it. Right.
Tara Z. Manicsic: [00:13:13] I could be like, can't,
Phil Hawksworth: [00:13:17] you're mad when he did that. I was so mad when he, uh, did a little video tutorial of like, Oh, I found out you could make this URL shortener.
And here's how I did it. And he made, I made a little video of how he did it and. I was so annoyed when I saw it, because way back before then when we first did notify functions, I thought, Oh, we could use now if I functions and the redirect API to make a URL shortner and I made this thing that does the same thing, but it's so convoluted.
It was so good. It was like, it would take them form post and user net functions. They kind of put it over here and then kick off a build and yada, yada, yada, and I was really smug about it. And then. Can just does the same thing, much more elegantly and simply, and like, Oh yeah, I could have done it like that.
So that's how I, now I stole that straight back and that's how I run my own, my own URL shortener. The hardest thing about it was trying to come up with a compelling domain name. I spent more time trying to find a good domain name for a URL shortener. Then actually implementing a notice,
Tara Z. Manicsic: [00:14:21] started saying you're a shortner and been like, you were all shot.
Phil Hawksworth: [00:14:26] Oh, you just drop all the trouble of ours. No, constant.
Cassidy Williams: [00:14:33] I know about doing that. One thing was by name where, you know how like with accessibility, there's like the 11 for the number of characters and accessibility I was thinking of doing now it's my name? So it'd be like C5, Y a dot something for that kind of domain.
That's good. Yeah. Right.
Tara Z. Manicsic: [00:14:49] I mean, it's very egocentric, but
Phil Hawksworth: [00:14:51] yeah. I mean, this is for me.
Jason Lengstorf: [00:14:54] I figured out that the, uh, the dot AAF a top level domain is available. You have to go through like gandhi.net. But so I was able to buy Jason dot AAF. That's a pretty good one for awhile only using it as a shortener, but now I've, I've actually launched a personal site on it.
That is like the silliest thing I've ever built. But, um, but, uh, yeah, the, those are. Those are a lot of fun. And I don't think a lot of people know about them until this podcast. So go out there and get one right now, if you want to get your first name.
Tara Z. Manicsic: [00:15:26] Okay. We're not really seeing this podcast until I get mine.
I'm not joking.
Phil Hawksworth: [00:15:38] So we, we kind of veered away from, uh, cause, cause we, we, we talked a little bit about the. Like the orphan and some of the stuff that Jason said, but we were going to, I think we were going to talk a little bit about some of the stuff that custody did with next to North as well. Is that, did, did we go down that Avenue very much or it feels like we kind of skipped past, you
Jason Lengstorf: [00:15:58] talked about it being grody.
Yeah.
Phil Hawksworth: [00:16:01] At the beginning of the. Yeah,
Jason Lengstorf: [00:16:04] that was how we started Phil. How far we've come?
Sarah Drasner: [00:16:09] I think it's been a 15 minutes.
Cassidy Williams: [00:16:14] What did I do? Oh yeah. So I made, I made this project with next JS authentication. It was, it's interesting because I'm very used to vanilla reacts things and, and how redirects and routing and stuff works with that. And so it was funky to mess with it with. Next because it's just a different kind of router, but it was relatively simple to put together.
Um, again, with the identity widget, like I, it wasn't the two lines of code that it was for angular, but I just made like a file where I made like a wrapper for the functions that I want to use and called it and an effect. And it ended up being maybe not two lines, but like five lines in each component that I wanted to use it in.
And so it was really nice and simple to be able to make that.
Tara Z. Manicsic: [00:16:58] I really, so one of the articles that I was really impressed by Jason recently are the manage subscriptions and protect content with Stripe. Yeah. Um, and using, using cause you know, money is great.
Cassidy Williams: [00:17:10] I love. Um,
Tara Z. Manicsic: [00:17:12] so like being able to be like, give me money and I give you something is a great thing to be able to do with code.
Um, and it's, uh, it's such a thorough and like complete post. Which is total Jason post, but, um, you want to talk to that at all? Or like, is there anything about
Jason Lengstorf: [00:17:35] I talk to my thoroughness and post? Yes. I start to write and I can't stop until I have 7,000 words,
Tara Z. Manicsic: [00:17:43] the whole podcast on
Sarah Drasner: [00:17:44] that.
Tara Z. Manicsic: [00:17:44] So,
Sarah Drasner: [00:17:45] um, no.
Jason Lengstorf: [00:17:47] So the, the thing that's really exciting about that is like, because of, of what I was talking about with the JSON web tokens and the fact that we can write whatever we want in there.
Um, we can use third party API APIs to tie together different accounts and put that information into a JSON web token. So in this, the Stripe thing, um, what we're doing is like whenever you create a new network identity account. So when you register for an account on the site, we have web hooks for that.
So we have like an identity signup. Serverless function that lets you fire. Um, any, any arbitrary code that you want to run when somebody signs up. So you could add them to your newsletter. You can, uh, do what we did here and create a new free Stripe subscription for them. Um, and so we, we created a few plans.
There's a free plan. There's a, like a medium tier and a high tier. And as soon as you sign up, you automatically get the free subscription that that's your, your membership to the site. You can go to anywhere that's free. And then if you choose to upgrade, you go through Stripe's billing dashboard. And then when you upgrade in Stripe, they fire a web hook and that web hook, it can be sent wherever.
So we set up another serverless function that says, listen for Stripe Webhooks. And if you get one that says the account change, rewrite this person's roles in there, their identity user, to say that they have whatever tier of subscription. And that way, whenever they make a request, now they've got a role of like premium or pro or whatever the subscription is that they bought.
And we can show them different content based on that
Phil Hawksworth: [00:19:19] right there. Rose Jason, sorry, just to interrupt you. When you say rewrite their roles, is that updating what their role resolves to in the, in the token? Yeah.
Tara Z. Manicsic: [00:19:29] Rewrite their stars. Don't you know, that song.
Sarah Drasner: [00:19:36] Yeah. That sounds
Phil Hawksworth: [00:19:39] grody
Jason Lengstorf: [00:19:42] bill. First time I ever sing to you and you call me Brody. Um,
Phil Hawksworth: [00:19:46] so,
Jason Lengstorf: [00:19:47] but yeah, so, so the way that like Netflix, my identity works is by default. We include support for roles, uh, and that's, what's built into the role based redirects and those sorts of things. So, um, the easiest way to work with us is like those roles get packaged up into the JSON web token.
So if we rewrite the roles, when you get a Stripe web hook or, or when somebody does something and you want to change their privileges, you can just update the roles and net with identity, which will automatically update their Jason web token with their new role. And then when we do a request for like give me content, then that content can be gated based on role.
So if they have free only show them free, if they've got premium, show them free and premium and so on. Um, and so we, we did it in this one with, uh, with like an async request, like do a serverless function, but we could have used the cookie-based redirects too. And it would work the same.
Tara Z. Manicsic: [00:20:43] Just a quick asterisk.
I didn't realize before using that fry identity, that there's like different levels of customization, as far as how far you want to dig into the code, because you can set rules just like straight off the bat. In the UI on netlist FI's identity tab. Um, and I just thought that was, yeah, really interesting.
If you're like not super comfortable with setting the code of how you want that to be that you're like, okay, I will manually, it goes through these, you know, we have 30 users, I'm going to set their roles to whatever name I want to at the moment. Um, and that way you have rules right off the bat. Um, I just think it's really interesting as far as like accessibility to who can manage these
Jason Lengstorf: [00:21:23] things.
Yeah. Especially with invite only stuff.
Cassidy Williams: [00:21:27] Yeah. Yeah. I think it's a really powerful tool for gamification too. Cause you can unlock different pages and stuff. If someone has gotten to a certain level and you could even, you could make a really cool game with it. Like let's just say you wanted to do some kind of tabletop role-playing thing.
You could have certain people are only able to access certain pages based on the role that they have. And, and there there's a lot of really cool things that you could do with that to make. Some kind of game experience and playable experience through access that way.
Jason Lengstorf: [00:22:01] Yeah. That sounds like a fun side project
Phil Hawksworth: [00:22:06] is don't go down there yet.
Jason Lengstorf: [00:22:08] Buy the domain name.
Cassidy Williams: [00:22:12] I bought the domain name.
Phil Hawksworth: [00:22:20] But that's one of the things I like about this, the tutorial that, that gives the example that Jason is kind of describing there, although I would say as well, when, when Jason, when you shared that link, when it was staged and said, would anyone just mind just casting yeah. Rise over this post before I post it.
And we all, we all gradually kind of, I mean, obviously we rushed to help, but some of us, some of us rushed faster than others. And now he's like, Oh yeah, I'll have a look at this. And then I realized the scroll bar, the actual handle in the scroll bar was like two pixels deep because there's yeah, this
Jason Lengstorf: [00:22:53] Rollbar becomes a circle
Phil Hawksworth: [00:22:55] because, sorry.
Um, but having said that this, that, that tutorial there had lots of screenshots in it, thankfully as well. So it was like, Oh, actually it's not that much. But also from start to finish, it's like this complete walkthrough of every, everything you need to implement, you know, um, gated content, the actual kind of stubbed out content, API and integration with a payment provider, all of the logic to stitch it together, identity authentication, subscription management.
This is a. A lot, a lot in there. So I feel like I'm criticizing you for the size of the scroll bar was a little premature after seeing actually what happens when you read it. But the thing I really like about the example as well, Is that we know we've mentioned, um, rooting people with the redirects API to stuff that's been generated ahead of time.
Your example is, is the other thing is say, Oh, well, it's, this is access to different, different content through an API, right? Cause you, you express your content through an API and that's such a big piece of building things together with the Jamstack, you know, being able to say. Your content, your resources, whatever they are, they live on this API that could be anywhere.
And if you can push that up with roles and say, attribute different access rights to that. And then you've got this piece where you can assign roles to a user that's. These are really powerful building blocks to stitch together. So for me, that was a, that was a really nice example, reading through that thinking, wow, there's this actually has a really strong Swiss army knife of all of these things that I can do with these, these building blocks or mixing my metaphors horribly.
I'm sorry. And
Tara Z. Manicsic: [00:24:30] did you know that the Jamstack could
Phil Hawksworth: [00:24:31] do that
Cassidy Williams: [00:24:34] with building blocks in a stack?
Jason Lengstorf: [00:24:39] Uh, but I do think like the thing that, that is maybe one distinction that's worth drawing is like, you know, um, when you're doing server-based content, you don't have to think about like what should be generated ahead of time versus not. Um, so a lot of what we've been talking about is content than everybody would see if they have access to.
Um, and so something that we haven't talked about is like, what about content that only one person would see, like your user dashboard or your account profile or your billing settings or something like that. Um, so. You know, I, I, I feel like I've been talking a lot, so maybe somebody else wants to talk a little bit about how, you know, how do you manage that on the Jamstack.
Phil Hawksworth: [00:25:21] And th I mean, that by itself is a pretty good example of that, right? I mean, it's, it's kind of unfortunate to use. It's very self-referential, but, you know, we've the net, the fire admin, uh, Application is the perfect example of that, right? Because it's a react app where the UI is statically generated and is served from a CDN, but then all of the requests for the data, it comes through an API and that is personalized down to a single, single user.
Right. So that's, that's based on the authentication of. Unidentified user. So they're making, um, authorized requests to an API and being able to hear there is a database somewhere in there, it's all in the API and it's all personalized to an individual. Um, so you can absolutely do that, uh, on the Jamstack because it's a question of making authenticated.
Requests to an API. And in this case, in this case, it's not just roles, it's an idea of a user. So, you know, you're able to make those requests to an API then return the right data for a specific user is it's not all about pre-generated things on the Jamstack.
Jason Lengstorf: [00:26:26] Well, put mr. Hawksworth,
Tara Z. Manicsic: [00:26:28] mr. Hawks were.
Phil Hawksworth: [00:26:32] You guys are called me some things.
Tara Z. Manicsic: [00:26:39] No, but I think just in general, like Jason was saying earlier, coming from a more server centric world, the steps that it. Takes with JWTs is really impressive to me. Um, and like redirects just how, just like, you know, that there's not one short fire away do off. Um, and then it isn't as calm. Like I'm spending time on off before I just, I never wanted to touch it because it was just so convoluted and complicated that.
It was extremely daunting and it just feels so much easier. I mean, it's totally, I totally sound like a Koolaid drinker, but that's okay. Um, because I feel like my work is done faster. Thanks to how things are handled with the jam second off. Well,
Jason Lengstorf: [00:27:29] I think, I mean, I feel like that's how all of us ended up on the Jamstack right.
Is we were working in other companies doing things different ways and started moving this way and like, I at least in my case, and I think this is true of all of us. We, we came to nullify after building on the Jamstack and realizing that was the way we wanted to build websites.
Phil Hawksworth: [00:27:47] And for me, and I suspect for many as well, it starts with kind of the thin end of the wedge.
You don't think, well, all of the projects I've ever done in the past, I could do them with this model. You kind of start by identity. Well, I'm building a project where. I mean this, these are all, these are pages that aren't going to change very often or at all. And so I can sidestep all that complexity and just kind of distill it down to the simplest thing.
But then over time started to realize. Oh, the horizon is actually further away than I thought the ceiling is higher than I thought I can, I can do kind of search and I can do authentication. And, you know, and I don't, I don't think I would have ever gone straight to that. Um, it's just, I've, I've kind of eased it in that way and discovered more things over time, which I think might be one, one of the challenges now, because.
These, this ecosystem has grown up now, so you can jump straight in and do all of these things, but it's, it feels like a big jump. If you're used to doing it another way. Cause you, you, haven't kind of gradually put your toe in the water and East across and discover another boundary you can get through.
You've got people like I was banging on saying, Oh no, you can do all of these things. And it's like, wait, what can you that's? That seems backward to me. But you, I think, I think we've probably had the benefit of easing easing in and discovering things bit by bit.
Tara Z. Manicsic: [00:29:01] I do want to kind of wrap it up. And so I have two requests from all of them.
You, um, one, if you have any other tidbits or that things that have stumped you along the way that you want to share as far as awesome. Um, and then also. If you could like gait or restrict the people who are allowed to do certain things in your life.
Sarah Drasner: [00:29:30] Yeah.
Tara Z. Manicsic: [00:29:31] Well, we'll say, Oh, I'll go first. And, um, I just want to, like, I love the team at off zero and I just want to do a, like shout out to, um, like checking their stuff out as well. Um, working with them has been really nice. Um, and, uh, The thing that I would gait is what people could wake me up from sleeping.
So I would only give that access to like one or two people and it would change constantly cause I hate being woken up and that way people can't do it.
Phil Hawksworth: [00:30:06] You had that loaded up. Didn't you
remember
Tara Z. Manicsic: [00:30:10] when Jason asked us a question and I was like, what?
Jason Lengstorf: [00:30:14] That's, what you were working?
Phil Hawksworth: [00:30:15] I was waiting. Okay.
Sarah Drasner: [00:30:18] Someplace very special. I was asleep noticing.
Tara Z. Manicsic: [00:30:23] All right. Who is anybody have, do you want me to make some music until someone figures there?
Jason Lengstorf: [00:30:29] I have a tidbit, a one that's been very helpful for me, which is that, uh, when you start working with authentication, one of the things that you're going to be dealing with a lot is the tokens themselves.
Um, did I just steal your thing?
Phil Hawksworth: [00:30:41] Yes. Yes. Sorry.
was meant to be just between us, but yes.
Jason Lengstorf: [00:30:48] Excited. So it's all yours. I'll I'll back off.
Phil Hawksworth: [00:30:51] No, no, no, go on.
Jason Lengstorf: [00:30:52] I've been talking to all episodes.
Phil Hawksworth: [00:30:54] I've got another thought thing I know. Is that a, that's a tidbit. Isn't
Sarah Drasner: [00:30:58] it.
Phil Hawksworth: [00:31:02] Okay.
Jason Lengstorf: [00:31:03] With the author, you're going to be working with Jason web tokens a lot. And so, um, One of the things that helped me was starting to understand how they work and a really, really good resource for that is jwt.io, which you can take any token and then go paste it into JWT, to IO, and it'll decode it and show you what the details are.
Um, and so, and what's nice about JWTs is that like JWTs only include public information. Uh, you have to have the JWT secret to modify it or actually use it for anything. So, uh, when you go to JWT to IO, you can see the token. Um, but if you modify it, you to invalidate it. So it's not like it's, you know, giving you keys to the kingdom or anything.
Um, but that's a really, really handy thing to have.
Phil Hawksworth: [00:31:49] That's a good one. I mean, it's, it's, it's so good. I wish I'd thought of it myself.
Tara Z. Manicsic: [00:31:54] You didn't say what you would gatekeeper or, or user role restrict in your life.
Jason Lengstorf: [00:32:00] Oh, Hmm. Okay. So I, uh, I, I think if I was going to add role-based permissions to anything, it would be when people invite me to dinner, you could only invite me to dinner if.
Hmm, maybe I should back this one out that was like totally gonna offend vegans or something. Okay. Let's edit
Sarah Drasner: [00:32:27] that out.
Yeah.
Jason Lengstorf: [00:32:31] Like I was making a joke yesterday that my love language is cheese and I was like, I should make that joke more often. And then I, I didn't, I decided not to because you know, people who don't like cheese get mad at me when I say stuff like that.
Tara Z. Manicsic: [00:32:45] I know that it's so Gouda come on.
Jason Lengstorf: [00:32:54] wow. You both did same joke, different cheese. Nice.
Phil Hawksworth: [00:32:59] Wow.
Jason Lengstorf: [00:33:03] Unbelievable.
Phil Hawksworth: [00:33:05] Oh, Oh, am I now I'm the only one who hasn't made a joke, pun joke, but the pressure, isn't
Sarah Drasner: [00:33:12] a joke.
Phil Hawksworth: [00:33:13] Sorry.
Jason Lengstorf: [00:33:14] Hold on. I'm going over to way over here with that.
Phil Hawksworth: [00:33:16] This is a I don't. I want to drag my joke. Funds the tidbits and thoughts.
All right. So my, my tidbit, my tidbit, um, I was just Googling for it. Cause I can't actually remember the URL, but I will get the URL before this goes out.
Tara Z. Manicsic: [00:33:32] Okay. I'd like to imagine that you were giggling
Sarah Drasner: [00:33:34] Phil's Phil's tidbit
Phil Hawksworth: [00:33:39] Googling for a
Tara Z. Manicsic: [00:33:40] third.
Phil Hawksworth: [00:33:42] So, um, so in a similar kind of vein to, um, The JWT kind of playgrounds. Um, there's a nice example that our wonderful colleague Gerald, uh, put together a long time ago, uh, for trying out net of identity. Um, I can't remember it, is it it's identity
Tara Z. Manicsic: [00:33:59] getting started with JWT and identity?
Is it in that article?
Phil Hawksworth: [00:34:03] Yes, probably in that article actually is probably linked out from that. So the combo, the combo you're getting to. Tidbits for the price of one. So that's amazing, but yeah, he's he built this, he wrote this nice article, but then he linked to a lovely example, which is just a very simple site that allows you to try authenticating and then seeing the result.
And you can then look at them kind of, yeah. I like it, cause there's a very reduced example. So there's lots not, it doesn't do a lot. It just simply gave some content. Um, and it's a really nice example and a good place to just, just experiment and try that out for the first time. So that's my, that's my, that was my tidbit.
Right. So then my thought thing, um, Can I, can I add another layer to, and can I do it time-based um, because there are particular times the day that I would not like to see, um, posts that Jason has shared, um, particularly like between meals, because sometimes either I've just eaten or as a long time to my, until I'm gonna be again, Jason has a horrible knack of making delicious things and then.
Artfully crafting beautiful photographs of them and then sharing them at the point that I'm like, well, I need to eat again now. And I've just had a meal and now I'm going to have to eat something like this. And it's, I'll be honest, it's becoming a problem. So
Jason Lengstorf: [00:35:25] your, your thought thing was to creatively say that you're going to block me.
Phil Hawksworth: [00:35:34] Like a block of cheese,
Sarah Drasner: [00:35:36] the block of
Phil Hawksworth: [00:35:39] Phil's
Cassidy Williams: [00:35:40] feeling
Phil Hawksworth: [00:35:40] blue, I'm going to do so much better next time around. I'm going to be able to get in on this, but Cassidy's stealing all the pumps.
Sarah Drasner: [00:35:48] Um, so,
Cassidy Williams: [00:35:50] um, if I were to give a tidbit or thoughts thing, I'd say to think about your redirects early and don't like, throw them in. Later where like, Oh, after I log in, I want to redirect or after someone goes through a certain flow and a redirect, I planned that out early because that will save you a lot, a lot of headaches later.
And that is something that I have learned the hard way. Um, and if I were to have some gated content, I guess I'd say like people who are allowed to respond to my jokes.
Sarah Drasner: [00:36:25] Because
Phil Hawksworth: [00:36:26] that's good.
Cassidy Williams: [00:36:27] There are some people who either respond with something that isn't as funny because they're trying to like, Laugh along, but it's just, they're just not being funny.
Or they're trying to explain my own joke to me. And
Tara Z. Manicsic: [00:36:42] like a recapture thing where you have to like, finish a pun or make a pun, or do some joke in order to have access to New York.
Cassidy Williams: [00:36:52] Right? Yeah. So something like that. Like I, like I made a joke yesterday and someone said, I know you're joking, but I still want to bring up this point.
And they were directing me. On my own joke, but it was a joke and it didn't need to be corrected. It was just a joke. Anyway,
Phil Hawksworth: [00:37:08] that kind of sounds like a fun time.
Cassidy Williams: [00:37:10] Yeah, it's
Phil Hawksworth: [00:37:11] great. That's hilarious.
Tara Z. Manicsic: [00:37:15] I often think that when I see some replies to your jokes and I was like, isn't there a way, you know how, like you are supposed to type in a phone number and you start to type letters and they're like, no, you can't do that.
Like you start to say, I know this is a joke, but you're like, Oh, I can't, I can't type anymore.
Phil Hawksworth: [00:37:31] I think you'll find,
Tara Z. Manicsic: [00:37:39] I think what you're trying to say is
Cassidy Williams: [00:37:46] this has been remotely interesting tuna next time, where we're going to be talking about how to level up experiences at different level companies and catalytic skills. I am Cassidy Gorgonzola Williams.
Jason Lengstorf: [00:37:59] I am Jason Sharp cheddar Lang store.
Tara Z. Manicsic: [00:38:02] I am at phenom and exec
Phil Hawksworth: [00:38:04] and I'm Phil's Stilton. Hawksworth.
Wow.
Tara Z. Manicsic: [00:38:19] Wow.
Jason Lengstorf: [00:38:20] Excellent. In the camp, that was perfect. Flawless episode, no edits required.
Phil Hawksworth: [00:38:25] Ship it, ship it.