Q&A and GitHub Auth with OAuth

[00:00:00]
>> The question was, is this process as easy as with other providers? So the only difference between what we just did and what you do other providers is how you had to go in and make your own app. So I'm speaking from experience, Githubs process of making OAuth app that I just showed you is one of the easiest Google's process is a little more difficult but Google's way more flexible as it allows you to add multiple callback URLs and not just one.

[00:00:25]
So as you'll see when we deploy it, we're not gonna have to go make another GitHub for a deployed version coz we can't use that same one for more than one host. So it's kind of not good. Where it gives us, yeah, you guys made you want So that was pretty nice.

[00:00:40]
Facebook's Facebook is a little more difficult. Facebook is very involved with their process, but it's all the same, right? They're all OAuth. So you have a client ID, you have a client secret. You go in there you go and you go on that platform. You make out the app and you do what they tell you to do.

[00:01:00]
And that's it. Once you got those credentials, it's the same thing.
>> Just a commentary. AWS kognito is the most hard one. I heard the other is is hard man. If you have to work with AWS cognito you use
>> Yeah cognito make you suffer. He says worth it.

[00:01:19]
[LAUGH] Yes cognito will yeah I remember those cognito days? Man. All right, so we're gonna import some stuff here and sign up and that's gonna be from the next auth. We wanted to sign in functionality here and then we want the get session. functionality here. Okay? So the first thing we're going to do is we're going to attempt to get or maybe use session.

[00:01:50]
Let's see. Do you want to get the use session? Well, yeah, that's what I want to hook. So we're going to attempt to get a session. From our next auth client and session. In this case really just means a cookie stored in the browser as a date of its e.

[00:02:07]
Sounds familiar? It's exactly the preview cookie was. There was a cookie stored in a browser with a DWT. That's literally all they're doing here. So that's we're gonna do. So we're gonna attempt to get that using the hooks, so we'll say session here and then we will say loading like this.

[00:02:25]
Then we can say use session. So this will attempt to get a session and then what we can do is if I do detect that there is a session as in someone signed in and this is just this isn't an opinion, you don't have to do this. I don't even want them to see this page, I want them to go straight to the app page.

[00:02:42]
I'm just gonna send them straight to that. If you already signed in, you shouldn't be looking at the sign in page. I'm just gonna send you straight to the app page. So that's all I'm gonna do. So I'm gonna say, okay, you might want to come in and say if session but because we're using a you know, a function of functional component, which is basically a render.

[00:03:02]
It's just a big render. We can't really want to come in here and block the render loop with an if statement to do stuff like that. So we probably want to do a use effect. And I'm going to say use effect. And then what I want to do is I want to get the router so I'm going to say give me the router.

[00:03:20]
Getting the used router from Next.js. That's a hook from Next.js which is gonna be from import, Used Router. I don't know why my auto completes aren't working, they were working just fine earlier today. Now there's like no Like that. Use router, there we go. So I'm gonna get the use router.

[00:03:48]
I'm gonna get the router. I'm gonna user fact so that I'm going to say if you do have a session, which means I need to put a dependency on a session here. So if you do have a session, then I'm gonna say router push to /app like that, it's called a slash app if there's a session and this thing's freaking out, cuz it's like, hey, you use the router too, so I get that router, okay, there we go.

[00:04:16]
So this is saying, hey, do you have a session? Redirect them to app, pretty simple. Okay. Now what we want to do is, and we have this loading thing here. This is this going to be true if it's still loading to get a session. So you can use this to show a loading spinner or something like that, just to say, Hey, we're still trying to figure out if you're logged in or not hang tight that's why it's here.

[00:04:39]
We're not gonna use it but you can use it if you want to. The last thing we need to do is just hook up this onClick handler on this social button for GitHub to sign in. So instead of doing nothing, we're gonna say, sign in to GitHub. That's it.

[00:04:57]
That's all we got to do. So, if I did this correctly, and I don't remember what the database I'm connecting to right now, if I'm local or. OOr not, but we'll see when I run it, we should be able to sign in. So let's give it a try.

[00:05:13]
So I'm gonna go here, I'm gonna click this GitHub button and. Yeah, looks like it worked. Obviously your app is broken because we haven't gotten there yet. It looks like it's signed in, and navigating me to slash app here. This is obviously this app page is broken, I can just get it working record the system just to really show you, but the fact that I navigated there.

[00:05:39]
So what ended up what happened was the flash that you saw was see now if I tried if I tried to go back to sign in is not gonna let me right, because I have that use effect in there. So he tries to redirect me immediately. So I'm, signing right now is is our app doesn't work so that's why it's redirecting me right now, right because that's what we have and there's use effects.

[00:06:00]
I'm technically signed in And that's why we're doing that. But again, it's because the app this page is, just broken. We haven't gotten here yet. Right? That's what's next. So that's why we're breaking right now. But the flash you saw is because we're doing an OAuth call. All that's happening in the background, you didn't see a pop up that says, hey, GitHub wants to Get access to this right.

[00:06:21]
You didn't see that because I've already done it, so I can clear that so you can kind of see what that looks like. So this is what I'll do. Let's go to the full flow so you can see exactly what you might see. So I'll clear all of my my sessions, my CRF, all my stuff here.

[00:06:34]
So technically, I'm signed out now. So now I should be able to go back to sign in. Sign in works now. See how that works, okay? So then I'll go to GitHub and I will clear all my previous authorizations To these apps, which should be inside of here somewhere, applications, authorize GitHub apps.

[00:07:02]
Okay? They really want me to do this. Okay, now I'm gonna watch me fumble on my one password. Login. I got it, I never get it right the first time, never, never. Look, okay, so Authorize Auth Apps, we're gonna go down to here. So I'm gonna say revoke that one.

[00:07:28]
Yes, I understand. I don't want them to have my stuff anymore. I didn't have a local one, I'm revoke that one, too. Get out here. I don't want them. I don't wanna use anymore. So then now if I go log in, it's gonna give me the whole flow of, hey, you want them to use your stuff?

[00:07:45]
And I will say, Okay, yeah. And it's gonna redirect me back to sign in signing detected a session, then redirect me back to app. All right, so any questions on that?
>> What is inside the session object?
>> That's a good question. The question was what's inside the session object?

[00:08:06]
Yeah.That's a good question.That's the first thing I'm always asking. When I'm building apps, I'm always just logging stuff. Does log log put wrap the whole app in a console dot log? This should be like a try catch log thing like, like, try this log that, I'm saying that that would be dope.

[00:08:27]
I would like that. All right, so let me see. Let's go back to sign in. Let's see what we got here, right. So if you look at this session here, before it breaks right now it's an expires. And then you can see I have a user here that's got my email.

[00:08:46]
It's got an image, and it's got my name. This all came from GitHub.
>> So if I am doing some authentication with just username and password, can I somehow search things to this object?
>> Yes you can, but you don't have to because next alt will do it for you.

[00:09:05]
I'm gonna show you how to customize a session because we're gonna do it, cuz I wanna id here. I don't know why they would put an ID here. He think he would need an ID but they don't. Well, I know why they don't do it. Because next auth actually allows you to use jadibooti mode without having a database, because they don't need sessions to store the user.

[00:09:23]
The user is technically just stored in the JTF T the entire time. So if you were just prototyping and you didn't want to connect the database. They allow you to use it in jjbt mode, which because of that, there's no ID because it's not using the database. But we do have a database.

[00:09:37]
So that's why they do that, but we're gonna customize it to put ID on it. And you'll be able to get an example of what you can do there.Yeah, they have something pretty, pretty awesome for that and I can just give you a preview of exactly can we get to it for a while, which is Basically Configuration > Callback.

[00:09:56]
So they have something called callbacks, wich basically allow you to hook into different states of the authentication journey. So you can say, when someone signs in, do this. When someone is redirected, do this. When someone gets a new session, do this. When a JWT is created, do that.

[00:10:13]
So you're able to Pretty much do whatever you want. So if you wanted to customize it, this is where you would do it, you would add it to the session, and then that gets passed here, and then you would just add it to your token, and then you're good.

[00:10:25]
I think that's what we're gonna do.