react-facebook-login | A Component React for Facebook Login | Authentication library

I'm trying to use react-facebook-login to authenticate users, but I need to access the user's email. This should be doable via the scope parameter, but it doesn't work. There are multiple issues about this subject on Github going back years that haven't been addressed.

My question is - is there a way to modify/override this package to accommodate this (it appears the scope parameter is simply not added to the popup url), since it looks good otherwise? I have no idea how to patch or override node modules.

Alternatively, what is the absolute easiest way to implement this - is getting dirty with the Javascript SDK the only way, or are there better packages?

I use Formik and Yup to validate my login form in React. As you can see from the code below, I check that the inputs are not empty and then call my backend to check if the user exists. The call to the backend works, because if the user does not exist I report the error in the div with id "invalidUser" (I do not know if this is the most correct solution, I thought of a way to insert the error in the form of control of formik but I have not succeeded) while the required() Yup doesn’t work because it doesn’t report errors when I don’t write anything in the inputs. Why? Do you have a solution? Also my control solution if the user exists or not can go well or there is a better one?

index.js:

I would like the progress bar to advance when I hit one of the three cards using useEffect so that it has animation. How can I do? Written like this gives me error on Hook rules. If there is another way without using useEffect it would be fine, the important thing is that there is animation and when I press the cards you advance the progress bar (and another div appears, but that is already implemented).

I am using the Bootstrap progress bar and React.

Thanks in advance!

I'm currently using react, and by using react-facebook-rogin Library, I successfully made facebook login. However, there is no function for logout!.

So I decided to use facebook SDK, however I don't know how to use javascript code in react.

according to facebook official document, I need to write following code in HTML.

I created a auth app with react-google-login package and react-facebook-login and a symfony back end.

it works great only if I click twice on the Google or Facebook button.

I understand that first the data is undefined so the function "test()" is not executed, but I don't know how to "reload" the function automatically when data is not empty anymore.

Trying to install npm react-facebook-login in my react app, but I keep getting dependency errors? That sounds scary and I don't want to force install something that can potentially break in the future. I'm new to javascript, what are some ways I should proceed?

I've tried clearing my npm cache and removing node modules and installing them again, however im still getting this error.

To give a little background:

I'm trying to build a Login Form Page function that detects if the user is already logged. If they are logged in, then a button will appear prompting the user to log out. Like so: {user ? userLoggedInAlert() : SignIn()} If user is True, then the button appears, if user is false, then they receive the username and password form for login authentication.

I have nailed down all the functionality. However, when I press on button to logout the user out, I receive this error:

Trying to refresh my long lived access token via this endpoint:

https://developers.facebook.com/docs/instagram-basic-display-api/guides/long-lived-access-tokens#refresh-a-long-lived-token

Keep getting the error: OAuth "Facebook Platform" "invalid_token" "Invalid OAuth access token."

However, I debug my token using https://developers.facebook.com/tools/debug/accesstoken/ which shows that it is valid and for around 2 months (which proves its a long lived access token).

Does this endpoint not work anymore or am I missing something?

P.S. I'm using a User Access Token, its a public Instagram business account backed by a Facebook page. Also, I'm using this on server, so it won't refresh if the token is used within 60 days (that's what happens when you auth through FB mobile sdk).

EDIT

So it looks like there are two requirements that I missed:

1. Your long lived access token has to be at least 24 hours old in order to refresh
2. You need the 'instagram_graph_user_profile' permission/scope when logging your user into Facebook

HOWEVER

I tried:

1. Oddly enough, whenever I add that permission/scope to the list, Facebook Login always fails and says "There's something wrong". I tried this using the facebook login react npm package, the manual login flow by just making requests, and the FB SDK login button, all the same result.
2. The Facebook Graph API Explorer doesn't include this permission. However, the list of permissions they have does include it.

So what does this mean, Facebook isn't allowing refresh of long lived tokens?

NOTE: The docs on how to refresh a long lived access token are for the Basic Display API, which isn't recommended for business accounts (which is who will be using my app). So this makes me more unsure of if it is possible to refresh tokens for the Instagram Graph API.

MORE INFO

So on the FB developer portal, if you add the Instagram Basic Display product to your app (I previously didn't have it) it allows you to ask for the instagram_graph_user_profile permission. However, this brings up more questions:

1. Do I have to use Insta Graph API + Insta Basic Display in order to get a a refreshable long lived access token?
2. If so, how does that work? Because Insta Basic Display is recommended for personal accounts and Graph API is for business accounts.
3. If so, how do I add the instagram_graph_user_profile permission? It still causes FB login to fail.

I am running a Django Rest backend with a React front-end.

JSON data during user registration is being pushed per normal. When users submit the register form, they are sent to a login page. I realize how annoying this is for the users, however I'm not so sure how automatically send the user to the logged-in version of the homepage.

I would like to accomplish this in the frontend (I have multiple ways to verify, thanks to social logins, so just seems easier to code this once in the front-end for all methods of registration)

register.js post

you can see below I push the user to /login, however I just want to push them to /home in an already verified and authorized state.