- [Instructor] Now to kick this off,
let's now register this Oauth app in github
for that I head
into the browser and on the top,
right where my profile pic is I click on settings
and then I scroll down
and select developer settings.
And there, I can now click on auth apps and there,
and I now click on new OAuth app
and then give the app name.
That's my playground app.
The homepage URL is in this case,
https test.com or whatever.
This is just to inform the user when they try to
authenticate for which app
or which page they're authenticating.
And then, and this is very important.
This is now the callback url I talked about before.
This is http
local host port 3000,
and it's auth, github callback.
Needless to say that we have to implement this callback
route later,
but now let's register the application
and there we already have the client ID.
And we also need this client secret.
And for that I click on generate the client secret,
and it will give me the secret and I can just copy it
by clicking on this clipboard.
Now let's head back into Visual Studio Code,
and there I open playground.env.
As I said before,
this is where we want to store our secrets.
And I will now paste the GitHub client secret
into the respective line.
And we also need the client ID so I head back into the
browser and copy this client ID as well.
Right, as I said before,
then in server
config index js,
this is then written by a process.env
to the respective config variables.
So now we have a registered auth app running on GitHub.
Next, we need a strategy for GitHub
and for that we install,
npm install - S passport,
and now be careful github2
because this is the most recent
version that supports the latest GitHub API.
So let's install this
and now I head
into server lib
in passport index
and let's bring in now the GitHub strategy.
So under the local strategy at const.
GitHubStrategy =
require ('passport-github2').Strategy
So that's now for sure
pretty familiar already
Now let's scroll down.
And as before, as with local and GWT,
we have to now configure
and set up the strategy.
And for that again, do a passport.use
and in there I add new GitHubStrategy.
And as before we have
some configuration here to do.
First, we pass in the client ID
and this is now in config.
GITHUB_CLIENT_ID
and also we want to provide the client secret,
and this is config.
GITHUB_CLIENT_SECRET
Additionally as mentioned before,
I want to provide the scope.
So this is what we actually want to acquire from the profile
of what we want to be able to read
and it's scope
I define ['user:email']
That's all we want to know.
Of course we could do way more.
We could get access,
even admin access to the whole repository,
but this is not what we want to do.
We just want to identify the user,
not use to GitHub API really on behalf of the user.
Next, I provide a callback URL
and this is now http://
127.0.0.1
for local hosts port 3000
and /auth/github/callback
So this is also what we saw
in the URL sequence diagram before.
And then also this is something we had before I want to
passReqToCallback: true,
Now, we have to implement
the respective callback function.
So add async (req, )
and then the next argument is the accessToken.
Let's just real quick save that away.
So that eslint is happy.
So it's request accessToken,
a refreshToken, a profile,
and the done callback.
So what are these arguments?
So the request is clear.
Access token is the access token we talked about before.
So this is then used for each subsequent API request
and we use it to then request the user profile.
If we really wanted to create a GitHub Integration.
This means if we wanted to really continuously fetch
information from GitHub,
then we would need to store this accessToken.
In our case,
we don't need it because behind the scenes,
when this callback is called,
the strategy already has used this accessToken
to fetch the user profile.
The next argument is the refreshToken.
We don't need it,
and it will also be empty because expire able tokens are
right now, opt in feature in GitHub.
And we haven't enabled that.
So the refreshToken will be empty.
If enabled the feature in GitHub.
We would need the refreshToken to refresh the accessToken
once it expired.
And finally, the next argument is the profile.
So this is really what we care about because this contains
the user identity that we need for authentication.
And then the done callback, you know,
that already is used to return from the current callback.
Now let's add first try-catch block.
So at try
catch (err)
and return
done (err).
And for now up here,
I will just do a console.log profile
because I want to show
you that and we will return
done (null, false)
So we will not yet try to fetch a user.
We will do this a bit later.
Next of course, we have to set up this corporate route.
This is where we basically get the data from.
So I head into routes,
auth, github.
And the first thing I will do is I bring in passport,
const passport equals require passport.
And then we have this route of github
and there we add
passport.authenticate,
and we want to authenticate against GitHub, that's it.
So this will start this GitHub flow
and start with the
redirect of the browser, to GitHub.
And now we have to implement the callback route.
And as you see I don't have provided boilerplate here
because now for
the last chapter,
I thought it would be a good idea to really do a few things
from scratch so that you really know what you're doing.
So add router.get, and this is now /callback.
So this would now listen to auth GitHub callback
and again at passport.authenticate('github')
So the passport strategy will basically know where in the
process we are, depending on the data it gets.
And this is again, a callback async request
respond, next,
and enter
We add first try catch block.
And for now we can enter
return next('not implemented')
Because for now we just want to start this flow
and see what
happens and see the profile.
But we don't want to create the user yet because this
process is rather complicated.
And we need a little bit more time for that.
Now let's start this application npm run dev
and now I head back to GitHub.
And if you created two accounts, you should do the same.
And I know sign out here.
All right.
So now I'm signed out from GitHub
and now I'm signing in again,
let's say I'm already signed in with the respective user.
And for me, it's in this case lcola.
So this is the lcola user.
So this is the account of our user lcola
and I login.
So now I'm logged in with this fresh user.
Now let's head back to Visual Studio Code.
Let's see if everything is running, we should be fine.
So now let's open localhost 3000
and I'm here again,
now in the playground application.
And now I want to register my user.
And in this case,
I want to sign up using GitHub.
So let's click on that.
And there we see an error that the redirect url,
must match to the registered callback url
for this application.
So that's interesting.
Let's see what we did wrong here.
So let's look into Visual Studio Code again,
and there into passport index.
And what is it?
Yeah, I know it already.
So what I did is I used 127.0.0.1.
Let's see if it works with localhost as well.
Because on GitHub, I used localhost
and these two URLs have to match.
That's another means of security to make sure that really
the app is the same
as the one that was configured before.
So now let's try this again.
I head back to the browser
and reload
for that to have to
head back and load here.
And now I click sign up using GitHub again.
And now you see I'm now in this authorization
menu we talked about before.
So now I'm asking if a really wants to authorize
the my playground app.
So that's exactly what we want to see.
And now I'm clicking on authorized the account
and I'm redirected.
And I get this unauthorized,
which is fine because this just means that passport could
not find the user because we haven't implemented it yet.
But when we now look into the console,
we see that we get now a whole bunch of information.
Let's scroll all the way up and here you see,
this is the profile.
So everything else is the raw information,
but this is the profile.
And there is the profile ID that uniquely identifies the ID
of the user.
And this is what we're interested in because we will use
this ID to store it on the user, to identify the user again,
when they try to log in, back it up again.
So let's head over to the next video
and start implementing that.