CODEWITHSUNDEEP
reactjshttp-redirectoauthfetchbattlenet-api
WilssoN93
WilssoN93

Reputation: 97

Fetch API redirect doesn't work as i intended

Hello fellow stack overflowers! I'm building a small app with the use of battle.net api.

I'm trying to authenticate to the api using Oauth with fetch API but it doesn't seem to do what i want!

So this is my code ```

const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

and it's supposed to redirect me back here https://localhost:3000/?code="code"&state="state" With the code being the actual auth code.

But when i try call that endpoint it dosnt redirect me back. From the developer console i can see that it does infact do a call here https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code which gives status 302. and then redirects me to this url:

https://eu.battle.net/login/en/?ref=https://eu.battle.net/oauth/authorize?client_id%3clientId%26scope%3Dwow.profile%26state%3Dsdagdf324asdas%26redirect_uri%3Dhttps://localhost:3000%26response_type%3Dcode&app=oauth which gives a status 200.

But not back to localhost. BUT if i paste the authUrl directly into the browser it does work as intended.

What am i doing wrong inside react?

Sorry if i'm being unclear or confusing. If i left any important stuff out just ask and i will provide! If anyone could try and help me it would be greatly appreciated! Thanks in Advance!

Upvotes: 0

Views: 2035

Answers (2)

Evert
Evert

Reputation: 99766

The OAuth2 authentication_code flow roughly works like this:

  1. You send the user to the authorization url.
  2. The user logs in using a form
  3. The user gets redirected back.

If the user was already logged in and there's cookies, 2 may be skipped.

This process will never work with fetch, as it's designed not to. Even if the redirect works for you when you manually go, this is just because the security model for going directly to a url is different from using fetch.

So you cannot do this with fetch. Instead, send the user to this url using document.location.

Upvotes: 1

Brett East
Brett East

Reputation: 4322

So your issue here, looks like you're not passing in the variables properly, you can't just include variables between strings in javascript, you need to use string interpolation with backticks.

Something like this:

  `https://eu.battle.net/oauth/authorize?client_id=${clientid}&scope=wow.profile&state=${state}&redirect_uri=https://localhost:3000/&response_type=code`;
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

Alternatively, you could use string concatenation.

const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=" + clientid + "&scope=wow.profile&state=" + state + "&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

Upvotes: 0

Related Questions