How to handle twitch passport.js auth code? - node.js

Question

I'm trying to build a simple app that authenticates a twitch account and displays a users information. I'm stuck with how to send along my auth code once a user has successfully logged in.
Server-side, my code looks like this:
---auth-routes.js
// auth with twitch
router.get("/twitch", passport.authenticate("twitch", { scope: "user_read" }), (req, res) => {
res.status(200).json({message: 'Authenticating...'});
console.log('Authenticating...')
});
// redirect to home page after successful login via twitch
router.get(
"/twitch/redirect",
passport.authenticate("twitch", {
successRedirect: "/auth/twitch/redirect",
failureRedirect: "/auth/login/failed"
})
);
---config/passport-setup.js
// Override passport profile function to get user profile from Twitch API
OAuth2Strategy.prototype.userProfile = function(accessToken, done) {
var options = {
url: 'https://api.twitch.tv/helix/users',
method: 'GET',
headers: {
'Client-ID': TWITCH_ID,
'Accept': 'application/vnd.twitchtv.v5+json',
'Authorization': 'Bearer ' + accessToken
}
};
request(options, function (error, response, body) {
if (response && response.statusCode == 200) {
done(null, JSON.parse(body));
} else {
done(JSON.parse(body));
}
});
}
passport.serializeUser(function(user, done) {
done(null, user);
});
passport.deserializeUser(function(user, done) {
done(null, user);
});
passport.use('twitch', new OAuth2Strategy({
authorizationURL: 'https://id.twitch.tv/oauth2/authorize',
tokenURL: 'https://id.twitch.tv/oauth2/token',
clientID: TWITCH_ID,
clientSecret: TWITCH_SECRET,
callbackURL: TWITCH_CB,
state: true
},
function(accessToken, refreshToken, profile, done) {
profile.accessToken = accessToken;
profile.refreshToken = refreshToken;
console.log(profile);
// Securely store user profile in your DB
//User.findOrCreate(..., function(err, user) {
// done(err, user);
//});
done(null, profile);
}
))
I also have a simple profile component that displays when auth/twitch/redirect route is hit
export const AppRouter = () => {
return (
<Router>
<div>
<Route exact path='/' component={HomePage} />
<Route path='/auth/twitch/redirect' component={Profile} />
</div>
</Router>
)
}
According to the twitter documentation, you need to take the access code appended to your redirect URI and make a post request with it. I'm having trouble figuring out how and where to pull that code and send it along. Here's what they say in the documentation:
In our example, your user gets redirected to:
http://localhost/?code=394a8bc98028f39660e53025de824134fb46313
&scope=viewing_activity_read
&state=c3ab8aa609ea11e793ae92361f002671
3) On your server, get an access token by making this request:
POST https://id.twitch.tv/oauth2/token
?client_id=<your client ID>
&client_secret=<your client secret>
&code=<authorization code received above>
&grant_type=authorization_code
&redirect_uri=<your registered redirect URI>
Here is a sample request:
POST https://id.twitch.tv/oauth2/token
?client_id=uo6dggojyb8d6soh92zknwmi5ej1q2
&client_secret=nyo51xcdrerl8z9m56w9w6wg
&code=394a8bc98028f39660e53025de824134fb46313
&grant_type=authorization_code
&redirect_uri=http://localhost
Thanks for any help!

Answer 1

I'm struggeling with the same problem. However, I think I might help a little bit.
I also see that this is a bit old post so you might have figured it out already.
To get the hash or fragment from the URL using router, you can:
import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
const yourCallbackComponent = () => {
let location = useLocation();
useEffect(() => {
console.log(location)
}, [location])
return ()
}
I wrote this in a hurry, sorry if it's bad. But when a route is loaded you can extract information in the location object.
The expected output of the console.log should be somewhere near this:
{
key: 'ac3df4', // not with HashHistory!
pathname: '/somewhere',
search: '?access_token:jf82rjfj02f0f',
hash: '#access_tokenjf82rjfj02f0f',
state: {
[userDefined]: true
}
}
It's either in the hash or search, depending on what you get back from twitch.
Hope this helps if you didn't find a solution already.
I'm still trying to figure out the next steps myself so I can't be of any assistance there.
Let me know if you're still stuck, then I'll post my findings when I figure out how this works.