search

simi / omniauth-facebook

Facebook OAuth2 Strategy for OmniAuth
https://simi.github.io/omniauth-facebook/
1.26k stars 403 forks source link

Not able to trigger /auth/facebook #325

Closed kinsbrunner closed 4 years ago

kinsbrunner commented 5 years ago

Hi all, I have been struggling for a long while trying to determine the correct approach to use the omniauth-facebook gem. I am running my API on port 3001 while my frontend (in my case coded on ReactJS) is running on port 3000. As per what I have been researching, this is a common issue but there is not a clear answer nor documentation here. I am not expecting to use any additional SDK as I understand that this gem should handle all I need to simply login through FB. When manually running on the browser hhtp://localhost:3001/auth/facebook, I can see on Rails console that route is being hit and things are moving forward as expected; also, I am seeing that callback route is hit and I am getting back a JSON with UID, client and auth_token. However, when trying to reach this through my react app, I am getting a CORS error. I am simply making an AXIOS.get(/auth/facebook) which gets routed into my API as I have configured the proxy to pass calls received on my frontend into the API. My console seems to be hit by my request as I am seeing the following: image

However, on the Chrome console, I am seeing a CORS issue as per the following image: image

For sure, I have already tried adding the following code snippet and still getting the same error: image

Having said this, could someone answe rme the following questions: a) which is the expected way to trigger the initial call into /auth/facebook route? Kindly do not FW me to read the main repo doc as it does not say this solution there. b) has someone solved the present issue on a way which is not by adding a link into http://localhost:3001/auth/facebook? Would this be a correct approach? It sounds weird to me.

Let me know your comments. Thanks in advance. Alejandro.

diegoacuna commented 5 years ago

@kinsbrunner try doing the link to /auth/facebook without Axios, just use a normal link (no ajax).

kinsbrunner commented 5 years ago

Thanks for your answer @diegoacuna .

Could you please share a simple code snippet of how to achieve this? Also, is this an idea or have you already faced this issue?

diegoacuna commented 5 years ago

@kinsbrunner you basically have two options: to use the JS SDK (and use client-side functions for the login) or to use the backend (which you're currently using). The recommendation I gave you above reflects how actually OAuth works using the backend. Very briefly, the idea is the user uses a third-party provided login credentials and that third party gives back a token to your application that allows you to impersonate the user and fetch some data of their. For this to work, the login should happen on the third-party website, not on your website. When you're using ajax you are not allowing the authentication to happen on the website of the provider.

You just need to use a traditional link (html anchor tag) pointing to /auth/facebook, like Login with Facebook and the redirection should work as expected.

kinsbrunner commented 5 years ago

Thanks @diegoacuna. When adding the link directly into my view, I am getting things to start working but still missing the last part. I can see the backend getting called when clicking on the new link that points to 'auth/facebook' and, then, the callback is also called and I get a JSON object back. What's next? How to I connect that JSON with the return from FB API with my React SPA? So, when clicking on the link, I am leaving my react SPA. How do I return to it with FBs answer?

kinsbrunner commented 5 years ago

Hi guys, Any other idea will be much appreciated. Cheers. Alejandro.

github-actions[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.