Production-Grade Next.js

Auth Q&A and Provider Setup

Scott Moss

Scott Moss

Superfilter AI
Production-Grade Next.js

Check out a free preview of the full Production-Grade Next.js course

The "Auth Q&A and Provider Setup" Lesson is part of the full, Production-Grade Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott answers student questions regarding the difference between sessions and JWT when signing in and opinions on using state management in React.js. The provider is then implemented on the app page to increase performance by avoiding multiple api calls to check user login status.


Transcript from the "Auth Q&A and Provider Setup" Lesson

>> Why you don't use state management in React anymore?
>> Good question, why don't I use state management in React anymore? Because hooks solve it pretty much. I mean, you think about the different types of state that you have. You have state that came from an API, right, like data.

Then you have application state, like show this model, this form is loading, things like that. So stay tuned from API, I would actually just use a custom library that's probably hook and I'll talk about those later on like SWR, or react query. And that that handles all my, you know, my API state for me done okay.

Now application state, well i dont use use state for that right almost never need to share state across multiple Instances of components deep in the tree. And if I do, I'll use a provider and context and I'll pass that state down. And if I'm really just getting fancy, I'll even do the use reducer hook if I really want to, you know, do some stuff, but I haven't had to pull that out.

Other than one time. So after doing that, I'm just like, I don't really need a state management solution. I mean, every component is in charge of its own state using use state. And if you got to pass something down, pass it down if you got to pass it down really far, use context.

And that's kind of what I've been doing, I haven't had the need to grow past that since hooks came out.
>> Should I learn state management or not, I mean, there are courses,
>> I don't think it's helpful to learn one particular state management library, I think it's helpful to understand how to manage state and react.

And just learning one pattern is going to open up a whole new area of like, I understand how unidirectional data flow happens. I understand how events are handled and things like that. And it doesn't really matter what library you pick whether it's Redux or whatever is out there these days.

[LAUGH] I don't know there's so many things out there these days, I don't know. But just learning just one pattern of how to manage data it's gonna, you know, it's gonna give you an opinion, which is gonna, obviously help you out in the long run. And from there just learn all the other different patterns that are that are coming out.

So yeah, I think it's helpful to learn one
>> Thank you.
>> Yeah.
>> Okay, like I was saying, this is probably the easiest setup for oauth authentication I've ever done on any node thing ever. I mean, if we look at all the server code that we wrote, it was this, that was it.

That's all we did. That's all we did on the server, we didn't do anything else and we got GitHub off, so I was a big fan of passport. I'm still a big fan of grant, which is really nice, but this right here was just like wow, okay, I don't think it gets easier than this so good job necks off team.

Okay, now that we have the sign up or sign in working, let's see what we got to do next. The last thing we want to do is we want to add this provider here to the app page. So if you can, if you go back to what I was doing in the sign in you see I'm doing this use session.

This use session is using context inside of it to access a session. And it's gonna get it cuz it's gonna happen at times, but we can speed this up if we provide its service side. So when we get to the app page where we start doing service side props, we can get the session there and pass it to the app.

So the rest of the app can actually benefit of having a session without having to make additional API calls. Is this a performance thing? So we don't have to keep asking the API over and over again, hey, this is a session, they'll just get it because it was already there because the page that came before it already rendered it and pass it along.

So it's a performance thing. So we're going to do that, and we're going to do that by going into the app and you can see I got a whole bunch of comments in here. This was a nasty bug, if you're interested, that was really nasty. We're gonna import Provider here, and then we're going to just provide the Provider or something like that.

And I want to say, what does it take? session? That's right. So it's gonna take session. And then page props are basically the props that the page is getting. So if we think about pages how they get props, where in the page do we define the props, or we're in a pace can we pass props actually, Getstatic props get server side props.

So basically any page, whatever a page returns and get static props or get service, our props, that's what's going to be here. So one of those pages we're going to use get server side props and it's going to return a session. That session is what we're going to pass in right here.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now