hello, my lovely chaotic people, I'm Denis. Once upon a time I was an HHTML coder tinkering with Netscape Navigator. that's a 90s. Then I went down the Scrum Master, Agile Leader, and even coaching Rabbit Hole only to Boomerang back here to Software Engineer. Looks like I've come full circle. For now. Today, let's have a quick chat about why you don't need that brilliant library in your project. I'm currently leading the front end efforts at TechFlow, so I'll express some front end examples. For context, at TechFlow, we build program portfolio and project management software for banks. Yeah, that's a serious business, serious money, and serious users. But that doesn't mean we have to be serious. All the time. Haven't we guys? I suppose yes. Now let me paint a picture of what we are dealing with. We have a frontend built with Next. js framework. We have a REST API for a Java backend and database. We have an authentication service. managing logins and user sessions. We also have two types of tokens here. Refresh token, which lasts a week. We have an access token, which lasts a day. We, those tokens are packed into JWT, JSON Web Token, if And, JWT is stored in cookies on the client side. on the other side, they're also stored in the database on the server side. And, that's our daily grind at TechFlow. That's pretty standard, right? Yeah, let's go to the browser to see something interesting. If you try to Google on auth library for Next. js, you are likely to run into this. Nextauth. js. Yes, that's a must. popular solution for authentication for Next. js. Let's see their pitch. Open source, full stack, Unreal data, easy, flexible security, of course, and the main. Add authentication in minutes. Sounds dreamy, right? Let's check the stat on this magical beast. Let's check the stat. Yeah. Around zillions weekly downloads. 800, kilobytes of unpacked size. 500, around 500 files and, 86 open pool requests. That's, looks like a red flag for me, but don't worry for now. Let's go to DEC. Let's go to DEC. Yeah, Let's try it and let's set up it. set up looks very easy enough. we should add, an API route in Next. js. that's a standard. we should wrap the client side in a provider. And finally, we should throw in some UI components for signing, and that's simple, neat, and really quick. Should I say. We all talked about our current scoreboard, for now, I suppose Nexo got 1, and White Ninja got 0. Yeah. Oops, remember? There is a small problem. Why? We need, because we need the credential based authentication in here and guess what? Nextcloud does not support it out of the box. What do Let's see. We got build it ourselves We got built it ourselves. So here is a function. here is, some functions. There is a next old config, the credential provider is declared. Here we have an authorized function in it, authorized function in it, which makes a request to our backend, API, or to our author, authorized service authorization service. Yeah. so look, what I mean about that, the most important thing about that is that the size of the code era five kilobytes. We got five kilobytes of extra code written no matter what you use, library or not library. And let's go deck to the deck. And see, I suppose what needs is back in the game. So we have a tie here Okay, now let's talk about, data flow in our application. For example, the user requests a list of tasks. Browser sends a request to the Next. js API role. And next year forwards the request to the backend with an access token in here, and also set backend, validates the token, and either replace with 200. Okay, and here is your data, or replies four. One unauthorized. And it's time to log in again. Dude, so far so good. But what happens when the access token is about to be expired? It needs to be refreshed in the background so the user doesn't get logged out randomly. Now, did the Nextcloud handle that? Of course, nope. Once again, we have to build it ourselves. And let's go to GitHub to see how we cope with that. we have a refresh access token function here. Let's check. Yeah, there is a request to our auth service to refresh. payload and, and, and we have a JWT callback. we call it here, we call it here while checking if the token needs to be refreshed. Fine, let's go to the deck. what about scoreboard for now? I suppose at that point, Widenizer goes ahead because Just because we had to write code one more time. Ah, at this point we need to raise some question. What's the library even doing for us? What's the actual value of this library? What's the cost of an alternative? What are the sign costs? Let's make it clear. Sign costs is stuff we have to implement anyway, library or not. We already have an estimation for that, five kilobytes of credentials are set up in our app. Let's calculate the cost of the alternative. We need functions to handle JWT and create session, decrypt session. We need functions for session management, like create, delete, refresh, update. We also need a couple of helpers like getSession and ifSessionExists. And, let's have a look at VS Code. there is functions. There is functions. I sum up all of those, all those functions in session TS. Encrypt, Decrypt, Create, Delete, Refresh, Update, GetSession, and IsSessionExist. Okay, what's the most important thing about that? The most important thing about that is the size and I selected all the lines and the size is six kilobytes only. Okay, let's go to the deck again. What else? we also need a context provider just like NextSouth has. We should also add middleware for early request processing like token validation and refreshing. And, let's have a look. We have a session TSX here, which is session context provider, with a couple of handy functions, getSessionState here, and getToken, to getToken at front end, at the client here. And, what most important about there, the size is 1.3 kilobytes of code. Let's check the middleware. Middleware here. A brief glance. what about middleware? 2.2 kilobytes, four middleware. Let's go to the deck again. Yeah. We have 9.5 kilobytes of. Alternative code. That's our alternative cost. What's the final verdict here? Look 800 kilobytes 500 files versus 9. 5 kilobytes and only three files. You tell me guys now who wins? That's a rhetorical question for me. Okay, when should we use external libraries? The first is when you are on the clock and you need something to run immediately. Second When the problem is truly complex at first, trust me guys, you likely don't need to run React or WebRTC. The third, when the alternative is way more expensive, but be aware here. Be aware of hidden costs like library updates, breaking changes, or maintenance headaches. Be aware when you're lurking, when you're stuck with the roadmap. Their bugs and their API decision. Now it's time to do homework. Please find one XOR library in your project. Calculate the cost of the alternative, if it's useful, get rid of it. And repeat it in a month, and repeat it every month. Now, you might be thinking, Hey, mate, I saw AXOS and query strings in your code. How can I trust you? Don't worry, there is no need to worry. That was ages ago, Now it's pure web API fetch with a teeny wrapper. You can see it on the deck. Okay, that's it. That's it. And the last, but not the least. Always remember, guys. Syntactic sugar causes cancer of semicolons. Feel free to reach out. And bye bye.