0

I'm trying to develop a web app locally using reddit api with angular 11 and I'm trying to get an auth token using the instructions from this link: Reddit OAuth2 docs

However, I'm running into a bit of a problem.

I've set up my headers to include the usual methods within a service such as:

httpOptions = {
headers: new HttpHeaders({
  "Content-Type": "application/x-www-form-urlencoded",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, HEAD, OPTIONS,POST, PUT",
  "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization",
})

};

And I set up the function to retrieve the auth token within the service with:

getRedditAuthToken() {
 console.log("Auth token");
 return this.http.get<any>(this.redditAuthUrl, this.httpOptions);
}

The redditAuthUrl is set with the following parameters taken from reddit's oAuth documentation:

https://www.reddit.com/api/v1/authorize?client_id=CLIENT_ID&response_type=TYPE&
state=RANDOM_STRING&redirect_uri=URI&duration=DURATION&scope=SCOPE_STRING

Finally, the service is being retrieved by the component with:

getRedditAuthToken(): void {
    this.redditService.getRedditAuthToken().subscribe((data) => {
      console.log(data);
    });
  }

I'm getting the follow errors though when trying to access the auth token (found on web inspector):

Access to XMLHttpRequest at 'https://www.reddit.com/api/v1/authorize.compact?client_id=<client_id>&response_type=code&state=<random_string>&redirect_uri=http://localhost:4200/reddit&duration=temporary&scope=identity' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response
GET https://www.reddit.com/api/v1/authorize.compact?client_id=<client_id>&response_type=code&state=<random_string>&redirect_uri=http://localhost:4200/reddit&duration=temporary&scope=identity net::ERR_FAILED
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://www.reddit.com/api/v1/authorize.compact?cl…ost:4200/reddit&duration=temporary&scope=identity", ok: false, …}

I've had several attempts at solutions like starting angular with proxy json file, modifying the httpHeaders, testing the other reddit oAuth token retrievals (using post method), but I'm always getting the same CORS issues.

JMags1632
  • 69
  • 11
  • 1
    The link to the reddit docs does not work. In OAuth2 you have to redirect your user to the authorization server so they can enter their credentials rather than sending a http GET to it. – tobiso Feb 25 '21 at 21:05
  • 1
    Those headers are supposed to be on the response from the server, not on your website's request. That access error is telling you that the `access-control-allow-origin` header is not allowed by the server. Typically, if you have an account, you need to set up your account to allow specific URLs for redirection. I don't have a reddit account, but I've done similar things with Auth0. – ps2goat Feb 25 '21 at 23:49
  • And if that wasn't clear, take off all your `access-control` related headers – ps2goat Feb 25 '21 at 23:50
  • @tobiso Thanks, I thought I had to use get method initially to get the auth token along with the state and code. I redirected using that link, and indeed need to enter the credentials to continue but I'm still getting the error regarding CORS but this time with https://www.reddit.com/api/v1/access_token process. – JMags1632 Feb 26 '21 at 00:55
  • @ps2goat I set the redirect uri on the web application done for reddit to my local url (http://localhost:4200), I also removed the access-control headers like you suggested. Now I'm using `return this.http.post(this.redditAccessUrl, { grant_type: "authorization_code", code: code, redirect_uri: this.redirect_uri }, this.httpOptions);` to return response but I'm still getting the CORS errors. I'll try the proxy json file again and see if that helps. – JMags1632 Feb 26 '21 at 00:55
  • 2
    The CORS error suggests that the reddit server does not allow you to fetch data from http://localhost:4200. I don't know how redddit handles this, but i assume there is a developer console where you can register your app and allow access from your domain. – tobiso Feb 26 '21 at 10:06
  • 1
    Also you could try using a certified implementation for handling authentication, i think this is better than implementing it by yourself. You can find some [here](https://openid.net/developers/certified/). Those are for OIDC but they should work just fine for OAuth2. Just search for 'angular'. I have used the implementation from Manfred Steyer in the past, worked fine for me. – tobiso Feb 26 '21 at 10:12
  • 1
    You can try using an app like Postman that does not care about CORS. If you still get CORS errors, you will know it is a server issue (your domain is not allowed, for example). If the CORS errors go away, then it is your web app (browsers enforce CORS at the site level). But like @tobiso and I both said, it sounds like you need to register your domain in a dashboard somewhere. – ps2goat Feb 26 '21 at 15:21
  • Thanks! The current app I'm developing is registered on its reddit developer page. They already gave me a client id, and secret and I specified the redirect_uri. The problem was indeed because their server is disallowing (I assume) localhost. I found a workaround by prepending https://cors-anywhere.herokuapp.com/ to the endpoint I'm calling on the reddit api. I'm now getting the expected results. – JMags1632 Feb 26 '21 at 17:38
  • 1
    Nice that you got it working. The fact that you have a 'secret' is a little weird. OAuth2 flows for web applications don't usually have a secret because they can't hide it from an attacker. Make sure you are using the correct [flow](https://auth0.com/docs/authorization/which-oauth-2-0-flow-should-i-use#is-the-client-absolutely-trusted-with-user-credentials-). But again, i don't know how reddit handles this. Maybe they have some sort of propietary authentication. – tobiso Feb 27 '21 at 10:34
  • @tobiso Oh yeah, I forgot to note. For some reason, reddit applications are categorized as 3 types: web applications, installed applications and scripts. For some reason, only installed applications seem to work with current iteration of my project, which also defines it as not being able to safely send a secret so yes, you are correct, reddit does not give one for this type. My previous designation as a web application gave me the secret but not this one. Thanks for the link on oauth2 as well! – JMags1632 Feb 27 '21 at 23:46

1 Answers1

1

cors is related with backend. Be sure you allowed from api to reach requests

like the link: How does Access-Control-Allow-Origin header work?

ZW.Huang
  • 71
  • 7
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 19 '21 at 06:13