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.
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
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
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