I'm trying to get authentication (email/password) to work in a Chrome Extension. I seems to work just fine if I put my authentication code in the background script. However I can't seem to get it to work as a browser action script.
I used the following code as the base of my extension: https://github.com/firebase/firebase-chrome-extension
I changed browser_action.js to:
Firebase.enableLogging(true);
var f = new Firebase('https://myapp.firebaseio.com/');
f.authWithPassword({
email : "[email protected]",
password : "1234"
}, function(error, authData) {
if (error) {
alert("Login Failed!", error);
} else {
alert("Authenticated successfully with payload:", authData);
}
});
And I kept the existing browser_action.html unchanged:
<!doctype html>
<style type="text/css">
#mainPopup {
padding: 10px;
height: 200px;
width: 400px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
h1 {
font-size: 2em;
}
</style>
<div id="mainPopup">
<h1>Firebase test!</h1>
<p>Clicks: <span id="contents"></span></p>
</div>
<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="browser_action.js"></script>
When I load the extension and click on the icon it gives the following error in the console:
Uncaught TypeError: f.authWithPassword is not a function
If I move the firebase code and authentication code to background.js file it works and gives me an alert that it is succesfully authenticated.
What am I doing wrong or why is this not possible?
For anyone coming across this since July 2016, Firebase has an updated set of instructions on how to setup auth for Chrome Extensions (in their example they use Google Auth). I jumped through a bunch of hoops before coming across this post..hopefully save someone time. https://github.com/firebase/quickstart-js/tree/master/auth/chromextension
That example chrome extension hasn't been updated in 3 years, so its version of Firebase is out-of-date. Replace https://cdn.firebase.com/v0/firebase.js
with https://cdn.firebase.com/js/client/2.2.1/firebase.js
in browser_action.html
and you should be able to use authWithPassword
successfully.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With