ReactJS应用中Firebase谷歌认证403错误的解决方法咨询

Hey there, let's work through this 403 authentication error—totally frustrating when you've already checked the obvious boxes, right? Let's go through targeted fixes based on your setup:

1. Double-Check Authorized Domains for Exact Matches #

Firebase is picky about exact origin matches for local dev. If your React app runs on localhost:3000 (the default Create React App port), make sure you've added http://localhost:3000 (not just localhost) to the Authorized domains list in Firebase Console > Authentication > Settings. A super common mistake is forgetting the port or using https instead of http for local development.

2. Verify Google Cloud OAuth Consent Screen Settings #

Firebase Auth relies on your linked Google Cloud project's OAuth consent screen. Head to the Google Cloud Console for your Firebase project, then navigate to APIs & Services > OAuth consent screen:

• If your app is still in testing mode, add your Google account (the one you're trying to sign in with) to the Test users list. Even project owners sometimes need explicit testing access here.
• Check that the contacts.readonly scope you're requesting is listed under Scopes for Google APIs. If not, add it—or better yet, temporarily comment out that scope in your code to see if it's causing the 403 (extra permissions can trigger authorization blocks in testing).

3. Confirm Your Firebase Config is Perfectly Correct #

A tiny typo in your firebaseConfig can break everything:

• Double-check that authDomain exactly matches what's in Firebase Console > Project Settings > General > Your apps > Firebase SDK snippet (e.g., crwn-test.firebaseapp.com should be lowercase and have no extra characters).
• Ensure your apiKey is copied without extra spaces or missing digits—even one wrong character can throw auth errors.

4. Clear Cached Auth Data #

Old OAuth tokens or session cookies can cause weird 403 issues. Try testing the sign-in flow in an incognito window, or clear your browser's cache and auth-related cookies. This eliminates any stored sessions that might be interfering with the new auth flow.

5. Test Without Extra Scopes First #

You added a contacts.readonly scope to your GoogleAuthProvider. For troubleshooting, comment out this line:

// provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

If sign-in works after removing this, the problem is tied to that specific permission. You'll need to enable the People API in Google Cloud Console and ensure the scope is properly configured on the OAuth consent screen.

Start with the first couple of fixes (authorized domains and clearing cache)—those resolve most local dev 403 auth issues. If not, work through the rest one by one.

内容的提问来源于stack exchange，提问作者Dark star