firebase setup

Basic startup command

npm install -g firebase-tools

firebase login

firebase init (make sure you click the space bar to select an option, otherwise your firebase.json file will be empty)

create an index.html page in that dir

in the firebase console, click on the “add firebase to your web app” button, and put your javascript code into the index.html page

alternatively, if you choose the “firebase host” option, and choose the default options, you will have a public/index.html file with the needed boilerplate to start

App structure

Add the following to index.html:

<script defer src=”app.js”></script>

the attribute defer just so it is in sync with all the other scripts

Inside app.js, the code to include if you want to sign up via the oath authorization built in functionality:

var provider = new firebase.auth.GoogleAuthProvider();

const btnLogin = document.getElementById('btnLogin');

// add login event

btnLogout.addEventListener('click', e => {

        firebase.auth().signOut().then(function(){

                user = null;

                // log user out:

                console.log('User log out ');

        }).catch(function(error){

                var errorCode = error.code;

                var errorMessage = error.message;

                console.log('Error: ' + errorCode + ' -- ' + errorMessage);

        });

});

btnLogin.addEventListener('click', e => {

        firebase.auth().signInWithPopup(provider).then(function(result){

                user = result.user;

                // log user into

                console.log('our logging user: ' + JSON.stringify(user));

        }).catch(function(error){

                var errorCode = error.code;

                var errorMessage = error.message;

                console.log('Error: ' + errorCode + ' -- ' + errorMessage);

        });

});

Testing your code locally

To start the server locally, run the following command:

firebase serve –host 0.0.0.0 –port 8080

if you try the login button at this point, you will get an error in the console.log, you need to add the domain shown in that error to the list of authorized domains, in the “Authentication / Sign-in Method” section of the dashboard.

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *