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.