Problem authenticating with facebook

[mscoobby]

I'm trying to implement authentication with Facebook but got a weird error.

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…facebook%2Fcallback&scope=email%2Cpublic_profile&client_id=***. Response for preflight is invalid (redirect)

My server is setted like:

router.post('/facebook', passport.authenticate('facebook', {
    scope: ['email', 'public_profile']
}));

router.get('/facebook/callback', passport.authenticate('facebook'), (req, res, next) => {
    console.log('hello')
    if (req.user) return res.json(req.user)
});

And on the client:

export class MyAuthConfig extends CustomConfig{
  defaultHeaders = {'Content-Type': 'application/json'};
  tokenName = 'auth_token';
  authToken = 'JWT';
  providers = {
    facebook: environment.facebook,
    google: environment.google
  };
}

On the environment I only have the clientId and redirectUri Can't figure out what is the problem.

[ronzeidman]

Why is the redirect uri Facebook? It should be your site and should be configured in your Facebook api dashboard

[mscoobby]

It is configured to be the localhost. Edit:

https://www.facebook.com/login.php?skip_api_login=1&api_key=154162121819405&signed_next=1&next=https://www.facebook.com/v2.9/dialog/oauth?redirect_uri=http://localhost:9001/auth/facebook/callback&scope=email,public_profile&response_type=code&client_id=154162121819405&ret=login&logger_id=11d49468-5a9b-e93f-39c0-a2c365a58154&cancel_url=http://localhost:9001/auth/facebook/callback?error=access_denied&error_code=200&error_description=Permissions error&error_reason=user_denied#_=_&display=page&locale=en_GB&logger_id=11d49468-5a9b-e93f-39c0-a2c365a58154

That's what I found in the response, it says I denied permissions even tought I accepted it. Also removed the app from my app list and tried again the same resoult. Edit: On the server side if I use res.redirect the popup stays open with no error and the authentication is not completed, but if I use res.json or next() or anything that continues the flow it throws the error for facebook, google and instagram

[ronzeidman]

Try setting the redirect URI to the full URI: http://localhost:9001/auth/facebook/callback instead of just http://localhost:9001/. Also how do you call the authenticate method? do you subscribe to it?

[mscoobby]

I changed the redirect URI still throws the same error. Yes I'm subscribing to the authenticate method:

  authenticate = (provider) => this.auth.authenticate(provider).subscribe({
    next: (r) => console.log(r),
    error: (err: any) => console.error('Error', err),
    complete: () => this.router.navigateByUrl('/')
  })

I guess it's something to do with my server settings but I can't figure out what is wrong. Facebook is redirecting me to the correct URI in the error the URI is encoded that's why it looks like it's facebook.

[ronzeidman]

Look at this fork, Its a bit old but it includes Facebook login, maybe it can help: https://github.com/MosheBiton/ng2-ui-auth-example

[mscoobby]

Can you make an example using PassportJs? I'm trying for days to make this works but I'm receiving the Response preflight is invalid (redirect). I would very appreciate it if you can help me. It is authenticating correctly but if I try to redirect or return JSON it throws the error.

router.get('/facebook/callback', passport.authenticate('facebook'), (req, res, next) => {
    console.log(req.user)
    return res.json({message: 'Good'});
});

At the log above it's showing the user.

[ronzeidman]

Since I'm not using PassportJs I can't help you... If you've found out what your issue was, please post it so other people will have a solution for this. I'm closing this issue for now.

[betancourtl]

I'm running in to the same issue

[ClementAntoinette]

Does somebody find a good issue? I still got this error issue..