CORS error on production

[Wintersboy]

Hello!

Has anyone dealt with a cors error while trying to authenticate a user with the yahoo sign in? I've copied the basic set up for the authentication call and replaced the key, secret, and added a redirect url. All of which are running on production. I've also set up the yahoo developer project with the same homepage and redirect url.

I can add a code example and error screenshots if necessary.

Cheers!

[whatadewitt]

For sure send over whatever you have! I would be happy to try to help!

[Wintersboy]

So this is my Yahoo auth function (no callback for now, just trying to get it working first)

And this is the console error I'm getting

(where livefeed.render is my server endpoint and livefeed.netlify is my web page)

If I click the Yahoo login link that is in the console error I get taken to the login page, so my credentials must be working.

This is a small snippet of my server.js file to show that I am using the cors package which has eliminated any cors issues with other external apis.

I'm making a call to the /auth/yahoo endpoint in my React app.

Thanks for taking a look!

[whatadewitt]

Take a look at this page here: https://yahoo-fantasy-node-docs.vercel.app/auth

It looks like you have your auth and auth callback URL as the same thing, which definitely won't work. I also think you'll need to have the same server handling the request and the callback (though I can't say I've ever tried doing it with separate ones)

LMK if this helps at all?

[Wintersboy]

Ahhhh okay that makes sense! I'm only using the 1 server but I'll try out the callback url and let you know how it works, thanks!

[Wintersboy]

So I've implemented a callback using your example but it doesn't seem to be the issue. It doesn't even get to that point. The initial auth call is being blocked by cors. I've tried running my frontend on an NGROK server and I'm still getting the same cors issue with the yahoo login call. I'm really confused on how?

Any other ideas??

[Wintersboy]

Does the redirect URI in the yahoo developer app need to be the same as the redirect URL in the API? I wouldn't think so since ones for the frontend and the other for the backend if I'm guessing correctly?

[whatadewitt]

Does the redirect URI in the yahoo developer app need to be the same as the redirect URL in the API? I wouldn't think so since ones for the frontend and the other for the backend if I'm guessing correctly?

Yes, these should be the same. You're specifying the "callback", which is where Yahoo! will call when they authenticate your user.

[Wintersboy]

Yeah I'm still getting this error. Any chance you have a node js example I could see outside of the snippet from your docs?

[whatadewitt]

The entirety of the docs source (which has the whole login flow) is published here: https://github.com/whatadewitt/fantasy-docs-next -- it's in next, but a lot of the principles would be the same. There's an older, express version here: https://github.com/whatadewitt/fantasy-starter-express but I don't actually know that it works :/

If you wanted to publish the code I could clone it as well and take a look for you.

[Wintersboy]

I'll take a look at the Next source code and see if I can get it to work! If not, I'll clone my source code for you. Thank you I really appreciate your help!

I'll keep you posted.

On Tue, Oct 17, 2023, 11:00 a.m. Luke DeWitt @.***> wrote:

The entirety of the docs source (which has the whole login flow) is published here: https://github.com/whatadewitt/fantasy-docs-next -- it's in next, but a lot of the principles would be the same. There's an older, express version here: https://github.com/whatadewitt/fantasy-starter-express but I don't actually know that it works :/

If you wanted to publish the code I could clone it as well and take a look for you.

— Reply to this email directly, view it on GitHub https://github.com/whatadewitt/yahoo-fantasy-sports-api/issues/108#issuecomment-1766903766, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRVQ2FRSUTCVPBB3GJIT4DX73BTRAVCNFSM6AAAAAA6DHZJNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRWHEYDGNZWGY . You are receiving this because you authored the thread.Message ID: @.***>

[Wintersboy]

Ahh still no luck. Could we take this convo elsewhere and I'll give access to my repo?

[whatadewitt]

Might be better to carry on the convo here, just in case someone else runs into the issue? If you give me access to the repo I can clone it locally and see if I can figure out where the issue is and submit a PR with the solution?

[Wintersboy]

Yeah you're absolutely right! Invite sent

[Wintersboy]

So basically just take a look at backend/server.js and backend/util/yfAuth.js, and then I just make a simple call in frontend/src/common/TopToolbar.js that does nothing with the result atm

[Wintersboy]

and if it helps, this is my yahoo dev set up

I've tried many different redirect URIs and none work :(

[whatadewitt]

Cool looking app!

The first things I'm noticing:

• You have no form of session management in your express app, you're going to need this if this is your approach (Express/React). You can use this session to hold your Yahoo access / refresh tokens (or you can store them in your mongo database, which I see you are using). You can use something like passport for this.
• I'd recommend adding an additional redirect URI on the Yahoo! side, either with your localhost or ngrok, it shouldn't matter, but if you have the redirect URL locally it will make your life a whole lot easier to be able to log in locally and test this out.
• Once you have these things sorted, you need to set up your "Login With Yahoo!" button to point to the /yahoo endpoint you've setup on your node side. That will redirect the user to Yahoo! and when they've authenticated they'll be sent back to your /yahoo/callback endpoint. This is when you'll want to store the Yahoo! access token. I haven't gotten too deep into how you're doing the user management that you already have, but you can handle some other stuff here, and at that point you'd redirect them back to your frontend application with some of the data you need (user id, or access token, whatever). At this point you would then be able to use the access token to actually query the API.

I realize this sounds like a lot, so here's what I would do to make sure you have the flow:

• Visit http://localhost:3000/auth/yahoo directly, that should be taking you to the Yahoo! auth flow. You'll want to get taht redirecting you back to http://localhost:3000/auth/yahoo/callback, and if you log out the request object on that callback, you'll see the Yahoo! data that you need (access token / refresh token). Once that is setup, I can try to help you get the passport setup, and then get all of that communicating with the React app. Does that make sense?

[Wintersboy]

Okay great! Thanks so much for all the tips! I'll get working on that.

Just one question: Should the Yahoo! Dev app redirect URI be a frontend URL, or API endpoint?

Because aside from all the things you said, I'm just confused on how I'm getting the CORs error. That shouldn't be the case since I can access /auth/yahoo from anywhere but my own frontend...

[whatadewitt]

You need to redirect to your node backend. It will be here that you'll be able to grab/store the access and refresh tokens. Then you'll redirect the user from your node backend to your React frontend.

Also, just use cookie-session or whatever over passport for the time being. It will likely be a whole lot easier :D

[Wintersboy]

Ahhh okay I see! Thanks again, and I'll keep you updated :)

[whatadewitt]

@Wintersboy I'll have to create a proper README but I spent a couple of hours tonight and created this https://github.com/whatadewitt/fantasy-starter-node-react (I'd been meaning to have something like this for a while)

It's far from perfect but it should give you ideas of what you need to do.

Cheers!

[Wintersboy]

That's awesome! I really appreciate you writing that up. The link seems to be broken however.

[whatadewitt]

https://github.com/whatadewitt/fantasy-starter-node-react

Weird... I may have made it private by mistake. Try again in a few mins if that doesn't work...

[whatadewitt]

Confirming, it was set to private. Should be good now.

[Wintersboy]

Yup it's good now! It looks like a great start and should help tons!

[whatadewitt]

closing for now -- if you have issues feel free to open a new ticket or do it on the new repo

[FernandoTorre]

@Wintersboy I'm curious, did you ever resolve your issue? I'm having the same issue and I'm also kind of stumped.

[Wintersboy]

@Wintersboy I'm curious, did you ever resolve your issue? I'm having the same issue and I'm also kind of stumped.

Hey man! Yeah I did. The issue for me was that I was trying to make a fetch request to the auth endpoint when I just needed to use an href on my button. I assume this is because the auth endpoint has a redirect? I'm not sure why this worked but I had no issues afterwards.

[FernandoTorre]

I appreciate the quick reply! That's diffferent from my situation, but I'll keep it in mind as I explore other options.

[FernandoTorre]

Just in case anybody runs into something similar, my own issue was caused by trying to redirect from inside an AJAX call, so CORS was not the actual culprit in my case.