Confused about CORS and login button

Probably a simple answer to this, but at the moment I’m stumped — appreciate any help.

I’m getting a CORS error from my OAuth login button that’s calling www.patreon.com/oauth2/authorize. Based on this post I thought this was because the request was happening client-side. When I run the request server-side, however, I don’t get a CORS error, but I also don’t get the authorization pop-up. Further, when I look at the Javascript server example, it seems to be making a client-side request to kick off the authorization, like I’m trying to do.

So, what is causing the CORS error? The page with the login button is on the same domain that I’ve listed as the “Company Domain” in my Patreon client app. Is there somewhere else where I need to enter my domain in order to let the request go through?

The domain and redirect uri that were specified for your client (app) at the api must match wherever you are starting the authorization process from. Checking that may help. Also check if there is any redirect happening after the flow is started from user-side.

Thanks. I’ve checked and the domain matches. I’m using a subdomain and have tried it both with and without, with the same results. The redirect is correct as well, but no redirect is happening. I’m guessing from your reply that a client-side request is OK, but that in my case something is going wrong with the auth, correct?

Is the error being returned from the api, or are you encountering the error at patreon.com when you use your app to sign in?

From patreon.com, on making the request that I’m expecting will open up the authorization pop-up.

Ok, so, you are clicking a button at your app, which takes the user to the Patreon authorization flow - and that’s where you get the CORS error. Is that correct?

I’m getting the error before the flow begins, meaning there’s no visible change for the user after clicking the button.

So a pop up launches and the pop up loads the Patreon authorization page. And you get the error at that moment?

No, I get the error before the pop-up launches.

If you get the error before the pop up launches and Patreon is contacted, that should not be related to the Patreon API but the details of your own app setup.

If the request and the redirect are on different subdomains, could that cause a problem?

Here are some more specifics, since so far I’ve been unsuccessful at figuring out what’s going on.

This is the code that gets run when the user clicks the Patreon button in my app:

var params = 'response_type=code';
params += '&client_id=' + client_id;
params += '&scope=identity identity.memberships'
params += '&redirect_uri=https://[my_domain]/patreon/';
xhr.open('GET', 'https://www.patreon.com/oauth2/authorize?' + params, true);
xhr.send();

and this is the error message I get back:

Failed to load resource: Cross-origin redirection to https://www.patreon.com/login?ru=%2Foauth2%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3D[client_id]%26scope%3Didentity%2Bidentity.memberships%26redirect_uri%3Dhttps%253A%252F%252F[my_domain]%252Fpatreon%252F denied by Cross-Origin Resource Sharing policy: Origin https://studio.step.works is not allowed by Access-Control-Allow-Origin. Status code: 302

As far as I can tell, everything is in order, and yet I’m still getting the CORS error… any help would be appreciated, thanks.

This needs troubleshooting at your app or your client’s infra. If any other host, url etc is interfering during the opening of the pop up, such an error may happen. If its possible, do avoid a pop up and instead handle the login through normal pages loading (in different pages depending on the flow) or maybe by using react. (the former would be faster).

Apologies if I’m being dense, and I understand that you’re not able to help troubleshoot my app config. However, I’m not following what you mean when you say “do avoid a pop up,” as I’m not specifically requesting or implementing a pop-up, just making the request as formatted above. I’m not seeing how I would implement an alternative auth flow, as the only method I’m reading described in the API docs is to make such a request. My understanding was that the pop-up was Patreon’s response to a correctly formatted request, but instead I’m getting the error.

From the error message, it looks like something is preventing your flow from being redirected Patreon’s oAuth authorization flow rather than Patreon denying you anything. Or at the worst, studio.step.works is being denied by whatever is producing that message, or even Patreon api.

Try to confirm that this url is in the redirect url of your app details at Patreon clients page.

I agree that this message would seem to indicate that the app is misconfigured, but I’ve triple-checked everything there. The domain and redirect URLs match exactly — though again, it would be helpful to know if subdomains should be included or not. Could you answer that?

Could there be an issue with the fact that step.works is an uncommon domain?

The fact that it’s a CORS problem seems to indicate that the process which dynamically allows my domain to call the OAuth flow using the info I provided when configuring the client isn’t working. I completely agree that the most likely cause is something misconfigured on my end, but I’ve checked and rechecked every point of failure that I know of, so it seems like something else may be the cause.

Subdomains should work, but an uncommon domain may be problematic yes. If you have any normal subdomain from which you can do a test, you can try creating an app and making a call with that subdomain.

Yes! That was it. Got the auth flow going from a .com domain. So, now you know my next question… is there any possibility that .works could be added to the list of supported domains?

At the moment unlikely.

OK, so my test above was not from a subdomain. Now I’m finding that if I create two identical auth links, one from the bare domain, and one from a subdomain of it, the link from the subdomain doesn’t work (same error as above), even though I have the subdomain specified in the client setup. So it seems like subdomains actually aren’t supported? Have you run into a case where they are?