estoy usando AngularFireAuthGuard para controlar el acceso a las diferentes partes de la aplicación. El registro en la aplicación lo estaba haciendo a través de una cuenta Google y Firebase y no tenía problemas hasta que he decidido añadir dos proveedores más (Facebook y Twitter). A la hora de entrar con alguno de los proveedores nuevos y querer controlar el error auth/account-exists-with-different-credential para vincular las cuentas, me he encontrado que GetRedirectResult devuelve null, cuando debería devolver el error. He comprobado que al quitar las redirecciones de AngularFireAuthGuard todo funciona correctamente.
Las redirecciones de la aplicación app-routing.module.ts
const redirectUnauthorizedToLogin = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
return redirectUnauthorizedTo(`/sign-in?redirectTo=${state.url}`);
};
const redirectLoggedInToDashboard = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
console.log(next.params);
let returnUrl = next.queryParams['redirectTo'];
if (returnUrl !== undefined) {
return redirectLoggedInTo(returnUrl);
} else {
return redirectLoggedInTo('/');
}
};
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'sign-in', component: SignInComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToDashboard } },
{ path: 'home',
component: AppLayoutComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent }
],
canActivate: [AngularFireAuthGuard],
data: { authGuardPipe: redirectUnauthorizedToLogin }
},
{ path: '**', redirectTo: '/home' }
];
El siguiente código es el de la página de login. En ella recojo los resultados del redireccionamiento para comprobar si se ha realizado correctamente o ha devuelto error. Aquí es donde me encuentro con el problema de que recojo null cuando debería haber un error.
sign-in.component.ts
export class SignInComponent implements OnInit {
constructor(private translate: TranslateService,
private auth: Auth,
private afAuth: AngularFireAuth,
private authService: AuthService) {
}
ngOnInit(): void {
const result = getRedirectResult(this.auth)
.then(user => {
localStorage.setItem('user', JSON.stringify(user));
})
.catch(error => {
const code = error.code;
const credential = error.credential;
if (code === 'auth/account-exists-with-different-credential') {
this.afAuth.fetchSignInMethodsForEmail(credential.email).then(result => {
console.log(result);
});
}
console.log(credential);
});
}
loginWithGoogle() {
this.authService.loginGoogle(this.auth);
}
loginWithFacebook() {
this.authService.loginFacebook(this.auth);
}
loginWithTwitter() {
this.authService.loginTwitter(this.auth);
}
Lo siguiente es el servicio creado para gestionar el login
auth-service.ts
export class AuthService {
currentUser: UserInfo | null = null;
private authStateSub = new BehaviorSubject<UserInfo | null>(null);
currentAuthStatus = this.authStateSub.asObservable();
constructor(private auth: Auth,
public angularFire: AngularFireAuth)
{
this.authStatusListener();
}
authStatusListener() {
this.angularFire.onAuthStateChanged((credential) => {
console.info(JSON.stringify(credential));
if (credential) {
this.currentUser = credential;
this.authStateSub.next(this.currentUser);
} else {
this.authStateSub.next(null);
}
})
}
async loginGoogle(auth: Auth): Promise<UserCredential> {
const provider = new GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/userinfo.email');
provider.addScope('https://www.googleapis.com/auth/userinfo.profile');
provider.setCustomParameters({
prompt: 'select_account'
});
return await signInWithRedirect(auth,provider);
}
async loginFacebook(auth: Auth): Promise<UserCredential> {
const provider = new FacebookAuthProvider();
provider.addScope('email');
provider.setCustomParameters({
prompt: 'select_account'
});
return await signInWithRedirect(auth, provider);
}
async loginTwitter(auth: Auth): Promise<UserCredential> {
const provider = new TwitterAuthProvider();
return await signInWithRedirect(auth, provider);
}
logout() {
return this.auth.signOut()
.then(() => {
console.log('logout');
})
.catch((error) => {
console.log(error);
});
}
}
Me decanto por pensar que a la hora de hacer las redirecciones pierdo la referencia de Auth y por eso lo que recojo no es el valor esperado. He leído en la documentación de Firebase que es necesario guardar las credenciales en variables de sesión entre redirecciones, pero no veo en qué punto puedo realizar dicha acción ya que en todo momento, una vez que vuelvo de la página de selección de cuenta de los proveedores, todo valor es null.
Gracias