Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firebase authentication in Chrome Extension popup

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?

like image 707
DivZero Avatar asked Jan 26 '16 13:01

DivZero


2 Answers

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

like image 119
chumster Avatar answered Sep 28 '22 10:09

chumster


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.

like image 20
heenenee Avatar answered Sep 28 '22 11:09

heenenee