Problem : getting an error when I try to use firebase.auth to create a new user.
Error
Uncaught TypeError: firebase.auth.createUserWithEmailAndPassword is not a function
What should happen : In my html there is a form for user sign up with email and password. On button click my script takes the input from the sign up form and passes it to firebase.auth however firebase.auth seems to not be available from an external script that is being included into the html file. The html file does have the firebase includes and I can deploy my code into firebase hosting, I already went through the firebase localhost installation process from the firebase docs.
Here is my HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sign Up</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800,900" rel="stylesheet">
<link href="dist-assets/css/themes/lite-purple.min.css" rel="stylesheet">
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.12.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.12.0/firebase-auth.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-database.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800,900" rel="stylesheet">
<link href="dist-assets/css/themes/lite-purple.min.css" rel="stylesheet">
</head>
<div class="auth-layout-wrap" style="background-image: url(dist-assets/images/photo-wide-4.jpg)">
<div class="auth-content">
<div class="card o-hidden">
<div class="row">
<div class="col-md-6 text-center" style="background-size: cover;background-image: url(dist-assets/images/photo-long-3.jpg)">
<div class="pl-3 auth-right">
<div class="auth-logo text-center mt-4"><img src="dist-assets/images/car.png" alt=""></div>
<div class="flex-grow-1"></div>
<div class="w-100 mb-4"><a class="btn btn-outline-primary btn-block btn-icon-text btn-rounded" href="/"><i class="i-Mail-with-At-Sign"></i> Sign in with Email</a><a class="btn btn-outline-google btn-block btn-icon-text btn-rounded"><i class="i-Google-Plus"></i> Sign in with Google</a><a class="btn btn-outline-facebook btn-block btn-icon-text btn-rounded"><i class="i-Facebook-2"></i> Sign in with Facebook</a></div>
<div class="flex-grow-1"></div>
</div>
</div>
<div class="col-md-6">
<div class="p-4">
<h1 class="mb-3 text-18">Sign Up</h1>
<form action="">
<div class="form-group">
<label for="username">Your name</label>
<input class="form-control form-control-rounded" id="username" type="text">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input class="form-control form-control-rounded" id="email" type="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control form-control-rounded" id="password" type="password">
</div>
<div class="form-group">
<label for="repassword">Retype password</label>
<input class="form-control form-control-rounded" id="repassword" type="password">
</div>
<button onclick="signUpWithEmail(event)" class="btn btn-primary btn-block btn-rounded mt-3">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// // ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
const auth = firebase.auth();
console.log(features);
} catch (e) {
console.error(e);
}
});
</script>
<script src="dist-assets/js/app-js/app-dist.js"></script>
And Here is my js
//Sign up with email and password
function signUpWithEmail(e){
e.preventDefault();
var name = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var passwordMatch = document.getElementById("repassword").value;
//Create user
auth.createUserWithEmailAndPassword(email, password).then(cred => {
console.log(cred);
})
//Get UID
//Create New Collection identified by UID
//Create user info document
//Add user email and name to user info document
}
