Check out a free preview of the full Production-Grade Next.js course
The "Auth Callback Session Data" 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 demonstrates how to use callbacks in Next-auth.js to create "getting started" documents and folders for new user accounts by passing the session ID and user data as a JWT payload. Once the user data is received by the database the new documents and folders are created via a template.
Transcript from the "Auth Callback Session Data" Lesson
[00:00:00]
>> So we just finished setting up all of the we just finished setting up all of the database calls for our git server side props inside of our app. Get serviced by props function. So now what we're gonna do is basically make this work. This isn't really gonna work right now.
[00:00:24]
Okay, so now what we need to do is we need to go back to our next off, so we can set up like some callback stuff here. That's basically going to set up some mock for like a brand new getting Started folder and getting started document when a new user signs up so they actually have something on their account versus nothing on their account.
[00:00:46]
So let's do that. The way we can do that as we can use what's called callbacks inside the next auth config, so we have one here that adds to it to the session, which is what we need. That's really cool and the other one is going to basically going to check to see if it's a new user and it's going to do this stuff.
[00:01:06]
It's going to basically create a new folder and it's gonna create a document that's got some content in it. I'm actually just gonna copy this content here because that part is extremely has nothing to do with code as it's like how to structure the editor. See the editor in a minute why the content looks like that.
[00:01:25]
It's pretty impressive editor actually, let's head over to our code. So we'll go into the API/uth/Next off. There we go and then we'll go here and we'll say callbacks, like that. And the callbacks if you go look at the docs here, you can see, you can have callbacks for all these things sign in redirect session data jwt, and they kind of tell you for each single one, we're gonna do one for session.
[00:01:53]
And the one we're gonna have a session again, is this going to add the session, or the user id to the session id, the session id is basically the jwt payload. So, whatever we put here on this session, object, that's gonna get passed to JJ vt object right here as his first parameter.
[00:02:08]
So the session already has like an email and stuff on it but we wanna get the user ID. So that's what we're gonna do, so I'm gonna say, session like that. And this is gonna be this session, which is a jadibooti payload, really, this is the user. And then I'm just going to say session.user.id is that, and then it's gonna return the session.
[00:02:30]
So now we have the ID of the user on our session, or basically jwt here. So we're good there, the next one I'm gonna do is jwt, and this one has a full list of different things. We have a token payload, user, account, profile, and is and the user so RSA token payload.
[00:02:53]
User account profile is basically what we're gonna do here is we'll connect our database. So I'll say DB equals await, connect to the DB like that and we'll make this sync like that. And then I wanna say if you are a new user, if you are a new user is the user Then I'm gonna go ahead and create you a folder, I'm gonna say new folder and that's gonna equal await folder.createfolder, why is this thing freaking out?
[00:03:42]
Can I give you a modifier? I thought you were auto importing for me, I guess not, like having worked sometimes and it just doesn't. Want to work ever? I don't know why. So we got DB/dB. I think that works and then connects. Now we got folder, and then we got duck.
[00:04:06]
Okay, put it in there twice, there we go. Already, so we got create folder takes in database and then it takes in an object that has a created by and then a name, so let's do that. So created by is gonna be the user Id, all right, I think we can even do.
[00:04:33]
Let's try that If not, we'll do a session.user.id either way, and then name will just be we'll just call this your getting started folder. There we go so we got our new folder and then we'll create a new doc. So doc, actually I'll need to get the result of that, so I'll just say doc and then doc.createdoc.
[00:04:58]
This takes a db and it actually takes in a document, which has a created by. Which will be again user.id and then it has a folder which will be a new folder dot ID. And then we have a name we'll call this, start here, and then it has some content and that content already copied.
[00:05:30]
This looks weird as content, but we're using like this rich text editor or what I would call like a block based editor where all the content are blocks just like notion. It looks and feels like notion but not as not as good. So all of them are like representatives blocks that makes it portable.
[00:05:46]
So this is actually what content looks like so I just pasted that in there. How did I get this, I went into the editor that you'll see in a minute, I made some content and I copied and pasted it here. That's how I got this. The editor that we're gonna be using is called editor JS and they have like example content on their website to that's you can get the example concert there as well.
[00:06:12]
But it kind of looks like this you could do some crazy stuff and the output looks like this. So I basically can't just copy some of that, okay. All right, so now that we got that listing is telling me to continue, so I'm just going to delete my user out of my database.
[00:06:34]
So that's what I'm gonna do, I'm gonna go to collections. Let this thing load up. I'm pretty sure I'm connected to database because i don't have my local one running. I didn't look at my secrets because I don't want y'all still know. So I don't know what database I'm connected to.
[00:06:50]
So I think I'm connected to this one. You're hacking, alright, so I'm a delete accounts go ahead and drop that. Yeah, get out of here and then I'm gonna delete these users. How are you? All right, so I'm just gonna just start this thing again looks like there was an error anyway.
[00:07:19]
So let's see what happens next off 27 can't read fine. So we'll just say if user we can do that. Let's see what happens there. Okay, boom. All right so looks like it worked. We're still seeing hello cuz I'm pretty sure I've still got that mock content in there.
[00:07:53]
So let's go take out that mock content and actually use those props. So where am I doing those folders at? Right here, so I'll get rid of this and I'll put folders for the sake of not watching me debug this for the next however long I'm just going to put what I had here, which I know is right so I tested all of this.
[00:08:18]
Here, there we go. I don't wanna be sitting here all day doing this got other stuff to learn? Okay. All right, now let's try that. Hey, there we go. Yeah, there was something wrong in my code somewhere. Look that did it right that first time.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops