Fetch API redirect doesn't work as i intended

Question

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!

When you use `fetch()`, cookies shouldn't be sent along so you wouldn't be logged in on battlenet. The `200 OK ` response probably also has a login form. — Evert, Feb 25 '21 at 01:10
@Evert yes i know I'm not trying to log in to battle net , I'm only trying to authenticate and get a authorization code — WilssoN93, Feb 25 '21 at 06:10
very weird, must have forgotten to press submit. Trying agian — Evert, Feb 26 '21 at 06:43

score 1 · Accepted Answer · answered Feb 26 '21 at 06:46

The OAuth2 authentication_code flow roughly works like this:

You send the user to the authorization url.
The user logs in using a form
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.

Aah this makes sense! Thx for the answer. – WilssoN93 Feb 26 '21 at 06:58 — WilssoN93, Feb 26 '21 at 06:58

score 0 · Answer 2 · answered Feb 25 '21 at 00:17

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",
});

Is this the cause of the issue you're facing, or is it something else? @WilssoN93 — Brett East, Feb 25 '21 at 00:19
No ,the string in the URL is just put there by me to show it is something there i just didn't include the actual clientId. The whole URL is just one long string atm. Sorry for the confusion. — WilssoN93, Feb 25 '21 at 05:57

Fetch API redirect doesn't work as i intended

2 Answers2