I've been watching videos on youtube about using firebase auth login with google popup pages and non of them ever go to or use Google Cloud and set up a OAuth 2.0 Client ID. When running this code i get the pop up window from google however it throws a html 400 error and the error it returns states :

.

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console. Request details:

redirect_uri=https://www.{mywebsite}/__/auth/handler

.

Ive tried going to google cloud and developers page and setting up an OAuth 2.0 Client ID and truthfully i don't understand where its going wrong

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    //Private Firebase Config
  };

initializeApp(firebaseConfig);

import { 
    getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signInWithEmailAndPassword,
    signOut
 } from "firebase/auth";

const auth = getAuth(); 

const GoogleProvider = new GoogleAuthProvider(firebaseConfig);

GoogleProvider.addScope('.email');
GoogleProvider.addScope('.profile');

--SignInWithEmailCodeHere--

Firebase Web Api 9.22.2 New Modular Login Page

const SignInWithGoogle = document.querySelector('.signinWithGoogle')
SignInWithGoogle.addEventListener('submit', (e) => {
    e.preventDefault()


signInWithPopup(auth, GoogleProvider)
.then((result) => {
  const user = result.user;

  alert('signed in user! User: ', user.user)
})
.catch((error) => {

  const errorCode = error.code;
  const errorMessage = error.message;

  alert(errorMessage + " " + errorCode + " : Error Signing In")

  const credential = GoogleAuthProvider.credentialFromError(error);

  alert(credential.error + " : Error Signing In")
});
})

I've been watching videos on youtube about using firebase auth login with google popup pages and non of them ever go to or use Google Cloud and set up a OAuth 2.0 Client ID. When running this code i get the pop up window from google however it throws a html 400 error and the error it returns states :

.

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console. Request details:

redirect_uri=https://www.{mywebsite}.com/__/auth/handler

.

Ive tried going to google cloud and developers page and setting up an OAuth 2.0 Client ID and truthfully i don't understand where its going wrong

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    //Private Firebase Config
  };

initializeApp(firebaseConfig);

import { 
    getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signInWithEmailAndPassword,
    signOut
 } from "firebase/auth";

const auth = getAuth(); 

const GoogleProvider = new GoogleAuthProvider(firebaseConfig);

GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.email');
GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.profile');

--SignInWithEmailCodeHere--

Firebase Web Api 9.22.2 New Modular Login Page

const SignInWithGoogle = document.querySelector('.signinWithGoogle')
SignInWithGoogle.addEventListener('submit', (e) => {
    e.preventDefault()


signInWithPopup(auth, GoogleProvider)
.then((result) => {
  const user = result.user;

  alert('signed in user! User: ', user.user)
})
.catch((error) => {

  const errorCode = error.code;
  const errorMessage = error.message;

  alert(errorMessage + " " + errorCode + " : Error Signing In")

  const credential = GoogleAuthProvider.credentialFromError(error);

  alert(credential.error + " : Error Signing In")
});
})

• javascript
• firebase
• oauth-2.0
• google-oauth

• Just for extra details. I dont know how i would like the Google Cloud OAuth2.0 to Firebase. And the website is hosted through firebase, i saw some documentation saying things can be different if its hosted from firebases webhosting – Thea Young Commented Jul 19, 2023 at 4:10
• make sure the spp is running https and your redirect URI is also https – Linda Lawton - DaImTo Commented Jul 19, 2023 at 6:06

2 Answers 2

Solution found!

the problem was when i set up the firebase project i used a different domain and it defaulted to firebases default project domain "{projectname}.firebase.com" . i tried creating a new account not knowing firebase generates a service account for you automatically. this firebase cloud account can be found by going to

project overview ( top left) > project settings > service accounts > manage service account permissions (top right).

this will will take you to the google cloud page associated with your firebase web project from their you will click the 3 lines in the top left of the google cloud developer page and go to

Api's & Services > credentials (left hand vertical bar)

here you should see your google-generated OAuth2.0 settings. With these you can update them from

"{projectname}.firebase.com" to "https://www.{yourdomain}.com"

and for the redirect link from

"{projectname}.firebase.com/__/auth/handler"
to "https://www.{yourdomain}.com/__/auth/handler"

Further to OP's solution (thank you). I found that adding an additional OAuth 2.0 Client ID with the updated URI didn't work for me. Instead I had to Edit the existing Client ID and add the URI to it.

My experience was that this propagated instantly.