So far, we've simply hard-coded the data that identifies our user within our user session. In a realistic scenario, of course, we need to gather this data from a reliable source. And one really good example of a reliable source of information are the wealth of OAuth providers out there. Inside of the NuxtAuthUtils documentation, You can see that it has support for OAuth event handlers built right in.
This gives us the ability to let users log in with things like Apple or GitHub or GitLab or Google or any of these other popular third party websites. All of these handlers can be auto imported and used in our server or API routes. Let's go and copy the GitHub example down here. ts.
The pattern for naming these OAuth event handlers is define OAuth, the name of the third party OAuth provider, and then the keyword event handler. This function takes an options object with a config object on it, as well as an onSuccess and onErrorCallback function. OnSuccess runs whenever we get a successful response from GitHub that the user has indeed authenticated successfully. On the other hand, if something goes wrong or the user doesn't authenticate successfully, we can run this onErrorCallback function.
Notice what's happening right here inside of onSuccess though. We're calling the exact same setUserSession that we called with the hard-coded data inside of the login endpoint. This is what allows us to take the authenticated user from GitHub. This transaction that occurs completely on the server side, we're not getting this information from the user, we're getting it directly from GitHub, so we can trust it.
And then we're setting that GitHub data to our session. Now, in this example, they've called it GitHub ID, but in the login, they called it something like login. id It's really just like your GitHub username, right? For me, that would be Daniel Kelly IO.
So I'm just going to change that to login. And back in the docs, let's check one thing here, because we do have to set up some things on the GitHub side. Where is it? OK, yeah, right here.
We need to provide a couple of environment variables for the OAuth provider's client ID. and the OAuth provider's client secret. emv variables are not defined. config, paste this in, and change out the provider placeholder to GitHub.
emv variables. emv variables come from? Inside of your own GitHub account, what you need to do is navigate to Settings, and then down here under Developer Settings, OAuth Apps, and New OAuth App, you can create an application name. I'll just call ours Nuxt course app.
The homepage URL is going to be just the local host for now, since we aren't deploying this anywhere. And the authorization callback URL has to be something very specific. Over in the documentation, underneath the code block that we copied and pasted into our app, you can copy this URL right here. This is the callback URL that we want to provide to GitHub.
In fact, it's the event handler that we just set up in the app. Of course, we'll change it out with the real domain. For your production environments, you would just want to create a separate GitHub OAuth app that actually points to the production domain. Then we'll need to press register application.
emv variable, and then we can generate a new client secret as well. env file, and we'll paste that client ID in there. Then I'll generate a new client secret, making sure to copy it to the clipboard immediately because you can't recover this or see this again. So make sure you store it somewhere safe.
env variable too. To note, I will delete this app and use a different app throughout the rest of the course, so please don't try to steal my application credentials here. And with that, we should be ready to log in with GitHub. Let's try navigating to that auth GitHub route and see what happens.
Nice, this time I'm redirected to GitHub. We're presented with a little authorization page here that says the next course app, which is what we... configured inside of GitHub to call this app by Daniel Kelly wants access to your account. Okay, cool.
I'll authorize Daniel Kelly IO, and then we will get sent back to our homepage. git, after we handle this in the callback URL, we do send a redirect to the homepage. So that's what puts us back at the home route. And notice now we do.
Yeah, we have this information about my GitHub user. I suppose the ID is not the user name, Daniel Kelly IO. Let's just see here if it says user dot, oh yeah, here's all the different things we could store as well. Maybe login is actually that handle.
Let's try that. Go to auth GitHub again. And yeah, this time I don't even have to re-authenticate with GitHub because I've already done it once. And this time we've passed that GitHub login username to our session.
In the next lesson, let's use Nuxt UI to create a button to log in with GitHub. So far, we've simply hard-coded the data that identifies our user within our user session. In a realistic scenario, of course, we need to gather this data from a reliable source. And one really good example of a reliable source of information are the wealth of OAuth providers out there.
Inside of the NuxtAuthUtils documentation, You can see that it has support for OAuth event handlers built right in. This gives us the ability to let users log in with things like Apple or GitHub or GitLab or Google or any of these other popular third party websites. All of these handlers can be auto imported and used in our server or API routes. Let's go and copy the GitHub example down here.
ts. The pattern for naming these OAuth event handlers is define OAuth, the name of the third party OAuth provider, and then the keyword event handler. This function takes an options object with a config object on it, as well as an onSuccess and onErrorCallback function. OnSuccess runs whenever we get a successful response from GitHub that the user has indeed authenticated successfully.
On the other hand, if something goes wrong or the user doesn't authenticate successfully, we can run this onErrorCallback function. Notice what's happening right here inside of onSuccess though. We're calling the exact same setUserSession that we called with the hard-coded data inside of the login endpoint. This is what allows us to take the authenticated user from GitHub.
This transaction that occurs completely on the server side, we're not getting this information from the user, we're getting it directly from GitHub, so we can trust it. And then we're setting that GitHub data to our session. Now, in this example, they've called it GitHub ID, but in the login, they called it something like login. id It's really just like your GitHub username, right?
For me, that would be Daniel Kelly IO. So I'm just going to change that to login. And back in the docs, let's check one thing here, because we do have to set up some things on the GitHub side. Where is it?
OK, yeah, right here. We need to provide a couple of environment variables for the OAuth provider's client ID. and the OAuth provider's client secret. emv variables are not defined.
config, paste this in, and change out the provider placeholder to GitHub. emv variables. emv variables come from? Inside of your own GitHub account, what you need to do is navigate to Settings, and then down here under Developer Settings, OAuth Apps, and New OAuth App, you can create an application name.
I'll just call ours Nuxt course app. The homepage URL is going to be just the local host for now, since we aren't deploying this anywhere. And the authorization callback URL has to be something very specific. Over in the documentation, underneath the code block that we copied and pasted into our app, you can copy this URL right here.
This is the callback URL that we want to provide to GitHub. In fact, it's the event handler that we just set up in the app. Of course, we'll change it out with the real domain. For your production environments, you would just want to create a separate GitHub OAuth app that actually points to the production domain.
Then we'll need to press register application. emv variable, and then we can generate a new client secret as well. env file, and we'll paste that client ID in there. Then I'll generate a new client secret, making sure to copy it to the clipboard immediately because you can't recover this or see this again.
So make sure you store it somewhere safe. env variable too. To note, I will delete this app and use a different app throughout the rest of the course, so please don't try to steal my application credentials here. And with that, we should be ready to log in with GitHub.
Let's try navigating to that auth GitHub route and see what happens. Nice, this time I'm redirected to GitHub. We're presented with a little authorization page here that says the next course app, which is what we... configured inside of GitHub to call this app by Daniel Kelly wants access to your account.
Okay, cool. I'll authorize Daniel Kelly IO, and then we will get sent back to our homepage. git, after we handle this in the callback URL, we do send a redirect to the homepage. So that's what puts us back at the home route.
And notice now we do. Yeah, we have this information about my GitHub user. I suppose the ID is not the user name, Daniel Kelly IO. Let's just see here if it says user dot, oh yeah, here's all the different things we could store as well.
Maybe login is actually that handle. Let's try that. Go to auth GitHub again. And yeah, this time I don't even have to re-authenticate with GitHub because I've already done it once.
And this time we've passed that GitHub login username to our session. In the next lesson, let's use Nuxt UI to create a button to log in with GitHub.