Angular 4谷歌登录实现问题：Firebase未存储登录信息求助

Hey there! Let’s figure out why your Google login is redirecting to the homepage but not storing user data in Firebase Console. Since you’re new to the Angular + Firebase stack, let’s walk through the most common issues and fixes step by step:

1. Verify Firebase Auth Google Provider Setup #

First, make sure Firebase is configured to accept Google sign-ins:

• Go to your Firebase Console → Authentication → Sign-in method → Ensure Google is enabled.
• Double-check that you’ve added your app’s authorized domains (like http://localhost:4200 for local development) under Authorized domains in the same section.

In your Angular code, you need to use Firebase’s official auth methods to trigger the login flow. If you’re just linking directly to Google’s login URL, Firebase won’t track the user. Here’s the correct pattern for your login.component.ts:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { GoogleAuthProvider } from 'firebase/auth';
import { Router } from '@angular/router';

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

  signInWithGoogle() {
    // Use Firebase's popup auth (or redirect, see below)
    this.afAuth.signInWithPopup(new GoogleAuthProvider())
      .then((result) => {
        console.log('Login successful:', result.user); // Check this in console!
        this.router.navigate(['/home']); // Redirect to homepage
      })
      .catch((error) => {
        console.error('Login error:', error); // Critical for debugging!
      });
  }
}

If you’re using redirect instead of popup (which you mentioned), you need to listen for the redirect result in your root component (like app.component.ts), because the redirect happens outside your login component:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private afAuth: AngularFireAuth, private router: Router) {}

  ngOnInit() {
    // Listen for redirect login result
    this.afAuth.getRedirectResult()
      .then((result) => {
        if (result.user) {
          console.log('Redirect login successful:', result.user);
          // Redirect to homepage if needed
          this.router.navigate(['/home']);
        }
      })
      .catch((error) => {
        console.error('Redirect login error:', error);
      });
  }
}

2. Check Button Binding in login.component.html #

Make sure your button is actually calling the Firebase login method, not just navigating away:

<!-- Correct: Calls the component's signInWithGoogle method -->
<button class="google-login-btn" (click)="signInWithGoogle()">
  Sign in with Google
</button>

<!-- Wrong: Just links to Google's login page (Firebase won't track this) -->
<!-- <a href="https://accounts.google.com/signin">Sign in with Google</a> -->

3. Confirm Firebase Configuration in Angular #

Double-check that your environment.ts has the exact Firebase config from your project’s Web app settings:

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_ACTUAL_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

Also, ensure you’ve imported Firebase modules correctly in app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { environment } from '../environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // Initialize Firebase with your config
    AngularFireModule.initializeApp(environment.firebase),
    // Import Firebase Auth module
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Debug with Browser Console #

Open your browser’s DevTools (F12) → Console tab. Look for:

• Auth errors (e.g., "Unauthorized domain", "Invalid API key")
• The Login successful log from your signInWithGoogle method (if it doesn’t show up, the method isn’t being called)
• If you see a user object logged, but it’s not in Firebase Console, wait a minute—sometimes Console updates with a small delay. If it still doesn’t show up, check if you’re looking at the correct Firebase project!

Next Steps #

If you’re still stuck, share the exact code from your login.component.html and login.component.ts—that will help us spot any specific issues in your implementation.

内容的提问来源于stack exchange，提问作者Vivek Gupta