I am trying to learn Firebase as I am new to it. I am trying to follow the documentation. However, the console always shows up some error.

<button type="button" name="button" class="btn btn-danger" onclick="signIn()">Login With Google</button>
<script src="js/firebase.js" type="module"></script>
<script src="js/custom.js"></script>

firebase.js

// FIREBASE INITIALIZATION
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import { GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";
var firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXX",
  databaseURL: "https://XXXXXXXXXXXXXXXX.firebaseio.com",
  projectId: "XXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXX"
}
const app = initializeApp(firebaseConfig);

custom.js

async function signIn(){
  // Sign in using a popup.
  const provider = new GoogleAuthProvider();
  provider.addScope('profile');
  provider.addScope('email');
  const result = await signInWithPopup(auth, provider);

  // The signed-in user info.
  const user = result.user;
  // This gives you a Google Access Token.
  const credential = provider.credentialFromResult(auth, result);
  const token = credential.accessToken;

}

When I click on the button this error shows up

Uncaught (in promise) ReferenceError: GoogleAuthProvider is not defined

Checked my codes again and again but unable to locate error. What should I do now?