So, welcome, everybody. This is my first workshop at Node Congress. I'm incredibly excited to be here, and before we start, I'd like to introduce myself. First of all, I have two screens, so if some of you have to ask me something, you see I'm not looking at the camera. It's because I have a second screen. So, no offense, I'm just writing code on the second screen and looking at you on the other one. So, I want this to be clear. No offense. Really sorry about that.
Okay. So, as I was saying, welcome to the workshop, managing authentication in Next.js. So, before we start, let me introduce myself. I am Michele Riva. I work as a senior software architect at NearForm. We are the main Node.js maintainers and we have a lot of expertise in Node.js, Next.js, React, whatever happens in the JavaScript playground. And we are hiring, just in case. I'm also the author of the real world Next.js book, which will be published at the end of this month and we'll get there in just a second. I'm also a Google developer expert and a Microsoft MVP. But talking about my book, I prepared a 25% discount code for everyone of you willing to buy the hard copy, so the printed one, which is typically more expensive. So, I wanted a discount. You can use the 25 Next.js code at checkout on Pocket Publishing. Please, in case you want to use this discount code and you can't remember where to get it, please just write me in the chat. I will write a reminder on Discord so that you have, like, a couple of weeks to use this discount code.
So, what are we going to do today? This is a brief agenda of what we're going to do today. First of all, I want to give you an introduction on authentication, authorization, and how to deal with that in Next.js and JavaScript apps in general. Then we will start looking at the custom authentication methods, and we will be concentrating on the good, the bad, and the ugly of writing custom authentication strategies. Then we will have a break of five minutes, so you can drink a glass of water, you can rest your eyes for a moment after one hour straight on the workshop. Then we will be back again trying to understand how to integrate Firebase, how to zero, or whatever we want. So, the point for this workshop is not to teach you how to implement a specific authentication method. It's about telling you what are the pros and cons of doing this from scratch, adopting a framework, where we typically fail, and all the security concerns about custom authentication. And then, if we have time, we will have a Q and A. Please note, this workshop is meant to be three hours long. And as you can see, we only have two portions of 60 minutes. And there's a reason why. That's because 60 minutes, it's me talking. I want to interact with you. So, if you have any question in any moment, please, feel free to stop me. Ask me as many questions as you want. And until it's not clear what I'm talking about, we won't proceed. Because I want every one of you to be aware of what we are thinking. And you know, I'm not a native English speaker. So, sometimes I can find it difficult to find the right words. I do understand this. So, please, please, please block me if you see that I'm not telling something that you can understand, of course, because it's my fault. So, that said, I feel like we can get started. If you want, you can follow along with me. I've prepared some code. And I'm gonna send you the link on Discord. So, if you haven't already, Daria has put a link on the Zoom chat to access the Discord room. So, every communication, I'd like to send every communication on Discord. So, that it's easier for us to gather here and share communications and whatever. I will always keep Discord open for the entire workshop. So, if you have questions and you can't use the microphone, don't worry, just put a question on Discord. I will keep an eye on it. So, I will give you, like, a couple of minutes to joining Discord. If you haven't already, you can find, again, you can find the link on the Zoom chat. Okay. I see Eveline asking for the link. So, are you asking for the link to joining Discord or book? Oh, okay, book. So, yeah, let me send you. This is the link, and let me send you the discount code. Again, you have a couple of weeks to redeem your discount code, so feel free to use it and share it with your friends, colleagues. Not a problem at all. Feel free to share with whoever you want. Okay, I can't see. Oh, it's 25 discount! So, I hope this can be helpful for everyone. Okay, so let me show you the boilerplate code before we start doing anything. So, as I was saying, I've created the.00authworkshop boilerplate, which is a standard Next.js app, which is linked to an Hasura GraphQL endpoint for retrieving data. Don't worry about GraphQL, don't worry about Hasura, or whatever. It's not important at that stage. We want you... I just use it as a method, as an easy method for retrieving data, which is quite important at the moment. You know, so let me start the project. Move a bit screen. Okay. One thing to consider, I'm currently live on Zoom, so the compilation could be a bit slower. It's not because of Next.js, but because of bandwidth and, of course, computing power, which is reserved to Zoom to currently work. So this is the boilerplate code I created. And as you can see, it's a kind of Amazon, you know? It looks like Amazon, but it's not really. And we basically have some products. We can enter the products, of course, see how much they cost. We can add them to the card. Oh, but we cannot because we are not authenticated. So what we want to do is to allow people to add products to the card when they are authenticated. They can log in and right now, as you can see, nothing happens if I click. Now I'm clicking, we can register and again, I'm clicking and nothing happens. And that's it. So it's really simple. I've also created a couple of private routes which now are public and we will try to make them private in just a second. So if I go on profile, as you can see, it doesn't require me to be authenticated right now, which is an issue and we are going to solve this.
Comments