skip to Main Content

I am developing a basic web app to measure some political popularity. To get correct polls, we gonna need to authenticate users with their social media accounts such as Facebook, Twitter, and Google accounts.

I have selected Angular as my front-end technology which sits on Google Firebase platform which come to following this instruction to make authentications.

For Firebase Facebook Login Auth Provider Service (auth.service.ts)

@Injectable({
   providedIn: 'root'
})

export class AuthService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
) { }

// Sign in with Facebook
FacebookAuth() {
   return this.AuthLogin(new auth.FacebookAuthProvider());
}  

// Auth logic to run auth providers
AuthLogin(provider) {
   return this.afAuth.auth.signInWithPopup(provider)
     .then((result) => {
         console.log('You have been successfully logged in!')
     }).catch((error) => {
        console.log(error)
    })
   }
}

for the singin component codes is as simple as following

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
   selector: 'app-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

   constructor(public authService: AuthService) { }
   ngOnInit() { }

}

HTML codes for singin components

<!-- Calling FacebookAuth Api from AuthService -->
<div class="formGroup">
   <button type="button" (click)="authService.FacebookAuth()">
      Log in with Facebook
   </button>
</div>

Here is configuration on Facebook for developer. App ID, and App Secret are put in Firebase to make the connection between two.

I facebook login > settings : client Oauth login, web OAuth login are on
and and added these URLs for redirect.

enter image description here

and at settings > Basics
enter image description here

What am I missing to get ride of following error?

URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

BTW app is working on Google login, you can see that redirect URL is https://political-monitor.firebaseapp.com/profile

enter image description here

update:

  • removed after comma URL, and site URL is only https://political-monitor.firebaseapp.com/ (not working yet)
  • redirect URL is only https://political-monitor.firebaseapp.com/profile (not working yet)
  • Thanks to Venkatesh on the first response below. I took the redirect URL from Firebase and I put it in Facebook setting. URL blocked message is gone. One more progress is needed to resolve this issue in console Error getting access token from facebook.com, OAuth2 redirect uri is: https://political-monitor.firebaseapp.com/__/auth/handler

2

Answers


  1. https://big-data-privacy.firebaseapp.com/__/auth/handler

    Goto firebase console enable Facebook login then

    You have to configure firebase authcall back in Facebook oauth redirect urls

    Login or Signup to reply.
  2. Angular + Firebase + Facebook Sign Up integration i did by following steps below:-
    

    enter image description here

    In Facebook/Meta Developer Page try to follow some points as shown in above image like:-
    
    Client OAuth Login ==> on YES !!
    
    Web OAuth Login ==> on YES !!
    
    Valid OAuth Redirect URIs ==> firebase provide url !!
    (as shown below)
    

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search