Can't use Facebook OAuth for non-test application ID

[TcQPAD]

Hi,

I've started using the library and facing a strange behavior.

I've created 2 apps in facebook developer portal :

• One for production
• One for test

Whenever I try to sign-in with facebook in test, everything goes fine and I get logged in. When I replace the application ID with the one for production, the dialog shows

"Sorry, something went wrong. We're working on getting this fixed as soon as we can.

Go Back"

I copy pasted the example in your documentation.

app.module.ts:

{
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(Config.FACEBOOK_CLIENT_ID)
          }
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }

login.component.html

<h2 class="text-center mb-4">Login with Facebook in Angular</h2>
<div *ngIf="!isLoggedIn">
  <button type="button" (click)="loginWithFacebook()" class="btn btn-primary btn-block">Signin with Facebook</button>
</div>
<div *ngIf="isLoggedIn === true">
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly>
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="text" class="form-control" [value]="socialUser.email" id="email" readonly>
  </div>
  <button type="button" (click)="signOut()" class="btn btn-primary">Sign Out</button>
</div>

login.component.ts

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { Router } from '@angular/router';
import {FacebookLoginProvider, SocialAuthService, SocialUser} from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  loginForm!: FormGroup;
  socialUser!: SocialUser;
  isLoggedIn?: boolean = undefined;

  constructor(
    private formBuilder: FormBuilder,
    private socialAuthService: SocialAuthService,
    private router: Router
  ) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });
    this.socialAuthService.authState.subscribe((user) => {
      this.socialUser = user;
      this.isLoggedIn = (user != null);
    });
  }

  loginWithFacebook(): void {
    this.socialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID)
      .then(
        () => this.router.navigate(['/dashboard'])
      )
      .catch(
        err => {
          if (err) {
            // todo Show error with a toast message
            console.error(err);
          }
        }
    )
  }

  signOut(): void {
    this.socialAuthService.signOut()
      .then(
        () => this.router.navigate(['/sign-in'])
      )
      .catch(
        err => {
          if (err) {
            // todo Show error with a toast message
            console.error(err);
          }
        }
      );
  }
}

Note that I'm currently testing that in local, so the URL of my app is http://localhost:4200. Could this be the issue? (downgrading the connection from https to http on application side?)

[stale[bot]]

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.

[zamudio-fabian]

same error. With production application only developer team can login but other people see a white page after login.

[TcQPAD]

same error. With production application only developer team can login but other people see a white page after login.

Try with SSL encryption, I don't have the reference but I think Facebook are blocking downgrading HTTPS to HTTP (was my case when developing locally).