Passport authentification - client server - headers issues

[Nicochou9350]

Hi,

Im using a client server application with react and node js and I want to set up an OAuth.

I’ve set a passport twitch into my api (node js) to authentificate poeple with twitch account. The Url and the callback are working and give me a user, then, in the callback function im sending a response in json. When I try the URL from my API, in a browser, I found the json that a I wanted to send.

The probleme come from my React application, I’ve make a service to call my API with axios but when Im trying to call the URL to authentificate with Passport, I got an error about the header Origin. I’ve try to add the headers into my API and client but Im still getting an error about this header.

Do you have an idea? The process client server with passport is possible?

Thank you in advance for your answer.

[Dist]

The issue is that your page is making an GET request to that URL, which is not how OAuth works.

The correct way is to send the user to that URL, as the user has to be on the Twitch site to accept or deny connecting to your app. Once the user accepts or declines they will be redirected to your redirect URL.

[Nicochou9350]

Hey

Thanks to the answer.

I’ve already make the OAuth on my API side, and it’s working. When I’m calling my API in browser an authentification on Twitch ( with passportjs ) is lunch then the callback function from my API is call and a json is generate with the user OAuth authenticated.

API
The OAuth Twitch :
app.get(‘/twitchAuth’,
passport.authenticate(‘twitch’, { scope: ‘user_read’ })
);
The callback :
app.get(‘/twitchAuth/callback’, function(req, res, next) {
passport.authenticate(‘twitch’, function(err, userTemp, info) {
…
return res.status(200).send({
id: user.id,
username: user.username,
email: user.email,
roles: ‘ROLE_STREAMER’,
token: token

My problem is to lunch the call API from the client side React JS .

I tried to get this URL with axios :
hostapi:portapi/twitchAuth

The authentification on twitch is lunch but I got an error in the callback function. Im just trying to acces to the json rended by my api but the error in the console in a picture above is about Headers from twitch. There is an URL in the error message and when Im clicking on it, Im getting the Json from my API.

[BarryCarlyon]

@Nicochou9350

My problem is to lunch the call API from the client side React JS .

I tried to get this URL with axios :
hostapi:portapi/twitchAuth

The authentification on twitch is lunch but I got an error in the callback function. Im just trying to acces to the json rended by my api but the error in the console in a picture above is about Headers from twitch. There is an URL in the error message and when Im clicking on it, Im getting the Json from my API.

You need to redirect the user to Twitch, not perform an axios.get

In the server

res.redirect('https://id.twitch.tv/oauth2/authorize?client_id=etc&response_type=code');

or in HTML

<a href="https://id.twitch.tv/oauth2/authorize?client_id=etc&response_type=code">Login with Twitch</a>

Not axios.getting it, thats why you keep getting a CORS error.

@Nicochou9350

I tried to get this URL with axios :
hostapi:portapi/twitchAuth

It seems you need a

<a href="hostapi:portapi/twitchAuth">Login with Twitch</a>

Not getting with with axios