Authorized Javascript Origins on my OAuth Client IDs are not working when using Google Sign In

[Tejester]

So I've been developing a react app and want to implement google sign in so that my further api calls to my Cloud Run image are authenticated (the url for the Cloud Run backend is in the api component). So after working it out the google sign in button renders properly but upon clicking it the modal shows nothing. In the console I get an error saying: "[GSI_LOGGER]: The given origin is not allowed for the given client ID." I've checked that I'm using the right client ID a million times at this point and that the Authorized JavaScript origins for that Client ID  is set to the firebase emulator I'm testing this on. I've also tried clearing my browser cache and cookies, and restarting my browser, but still get the same error. At this point, I've run out of ideas, so any help is appreciated. I put the component I'm logging in with below: 

import React, { useEffect } from 'react';

import { useNavigate } from 'react-router-dom';

//will be using useNavigate later 😛

import API from '../API';

import './Home.css';

const Login = () => {

const navigate = useNavigate();

useEffect(() => {

const loadGoogleSignInScript = () => {

const script = document.createElement('script');

script.src = 'https://accounts.google.com/gsi/client';

script.async = true;

script.defer = true;

script.onload = () => initializeGoogleSignIn();

document.body.appendChild(script);

};

const initializeGoogleSignIn = () => {

if (!window.google) {

console.error('Google Sign-In library not loaded');

return;

}

window.onSignInSuccess = (response) => {

console.log('Signed in successfully:', response);

const idToken = response.getAuthResponse().id_token;

API.defaults.headers.common['Authorization'] = `Bearer ${idToken}`;

};

window.onSignInFailure = (error) => {

console.error('Error signing in:', error);

};

window.google.accounts.id.initialize({

client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,

callback: {

on_success: window.onSignInSuccess,

on_failure: window.onSignInFailure,

},

});

window.google.accounts.id.renderButton(

document.getElementById("signInDiv"),

{ theme: "outline", size: "large" }

);

};

loadGoogleSignInScript();

}, []);

return (

<div className="login-container">

<img id="sdn" src={`${process.env.PUBLIC_URL}/SDNAIRGROUP.png`} alt="SDN Air Group" />

<div id="signInDiv"></div>

</div>

);

};

export default Login;