Ionic移动端AngularFire Auth谷歌登录重定向异常排查

Hey there! Let's break down why your Google login is redirecting to localhost instead of your Ionic app, and fix it step by step. This is a common pitfall with mobile OAuth flows in Ionic, so we'll cover all the key areas:

1. Fix Your Firebase Redirect URI Configuration #

First, double-check your Firebase console settings—this is the most common culprit:

• Go to Firebase Console → Authentication → Sign-in method → Google
• Add the correct redirect URIs for your mobile platform:
  • Android: com.your.app.package:/oauthredirect (replace with your actual app package ID)
  • iOS: your.bundle.id://oauthredirect (replace with your iOS Bundle ID)
  • For local development (browser/Capacitor dev mode), also add http://localhost:8100/__/auth/handler

If these URIs are missing or incorrect, Firebase won't know to send the user back to your app after login.

2. Fix Your OAuthService Code #

Looking at your socialSignIn method, you're using a generic OAuthProvider for Google login, which is unnecessary and can cause misconfiguration. Google has a dedicated provider class that handles all the correct scopes and endpoints automatically:

Update your service code like this:

import { Injectable } from '@angular/core'; 
import { AngularFireAuth } from '@angular/fire/auth'; 
import { auth } from 'firebase/app'; 

@Injectable({ 
  providedIn: 'root' 
}) 
export class OauthService { 
  constructor(private afAuth: AngularFireAuth) { } 

  joinWithGoogle() { 
    const provider = new auth.GoogleAuthProvider();
    // Add scopes directly to the Google provider
    provider.addScope('profile');
    provider.addScope('email');
    return this.socialSignIn(provider); 
  } 

  // Accept an already-configured AuthProvider instead of creating a new one
  private socialSignIn(provider: auth.AuthProvider): Promise<any> { 
    return this.afAuth.signInWithPopup(provider); 
  } 

  returnAuthState() { 
    return this.afAuth.authState; 
  } 
}

This removes the redundant OAuthProvider creation and ensures you're using Google's optimized auth provider.

3. Configure Ionic/Capacitor WebView Navigation #

If you're using Capacitor to build your mobile app, you need to allow navigation to Google/Firebase domains so the login flow can complete:

Update your capacitor.config.ts file:

export default {
  appId: 'com.your.app.id', // Replace with your app ID
  appName: 'YourAppName',
  webDir: 'www',
  server: {
    allowNavigation: ['*.firebaseapp.com', '*.googleapis.com', 'accounts.google.com']
  }
};

This tells the Capacitor WebView that it's safe to navigate to these OAuth-related domains, and will allow the app to regain focus after login.

4. Handle Redirects Properly (If Using SignInWithRedirect) #

If you switch to signInWithRedirect instead of popup, you need to capture the redirect result when your app starts. Add this to your AppComponent's ngOnInit:

ngOnInit() {
  // Catch the redirect result when the app loads
  this.afAuth.getRedirectResult().then(result => {
    if (result.user) {
      console.log("Login successful via redirect:", result.user);
      // Add your post-login logic here
    }
  }).catch(error => {
    console.error("Redirect login failed:", error);
  });
}

This ensures that when the app opens after the redirect, it processes the login result instead of ignoring it.

5. Verify Firebase Environment Config #

Double-check that your environment.firebaseConfig has the correct authDomain (it should match your Firebase project's auth domain, e.g., your-project.firebaseapp.com). A mismatched auth domain will break the redirect flow entirely.

Try these steps in order, and your Google login should start redirecting back to your Ionic app instead of localhost!

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