I'm pretty new when it comes to doing this so I don't have the expertise yet to be able to solve this.
I'm currently taking a course at HubSpot Academy for Making My First Web App: https://app.hubspot.com/academy/22047711/tracks/62?ruid=45223484
I'm on a section of adding a sign on option for Firebase to my application.
The course has some outdated information so I'm not sure how to resolve this quite yet. I've added what I could and ran my app. I get the error in the console: handleSignIn is not defined at HTMLButtonElement.onclick
Why is this happening and how do I resolve this?
Here's my code.
head.ejs
<meta charset="UTF-8">
<title>Base Web App</title>
<!-- First we import our css files -->
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- Google font CSS -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
<!-- this app's own css -->
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!-- Next import js files -->
<!-- first we import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- then bootstrap -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { } from 'https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js'
import { } from 'https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js'
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// I removed the values below for privacy
const firebaseConfig = {
apiKey: "<%= process.env.FIREBASE_API_KEY %>",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<!-- then our app's own js file -->
<script type="module" src="js/main.js"></script>
main.js
function handleSignIn(){
const provider = new GoogleAuthProvider();
const auth = getAuth();
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
console.log(user.email);
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
}
index.ejs
<html lang="en">
<head>
<%- include ('../helpers/head') %>
</head>
<body>
<!-- the classes 'page-header' and 'btn btn-dark' create bootstrap components. -->
<!-- Check out more components here: http://getbootstrap.com/components/ -->
<div class="page-header">
<h1>Database App</h1>
</div>
<button onclick="handleSignIn()">Login</button>
</body>
</html>
I do want to note that I saw in the documentation that I needed to add
import { GoogleAuthProvider } from "firebase/auth";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
But I was getting errors having them in any of my files. I also saw that I did import firebase-auth in my header.ejs so I'm thinking that this is importing everything I need? Could be wrong, if so let me know.
