NOTE: I didn't dig deep enough on this topic, just setup login to test access to backend firebase service using firebase authentication on local machine.
Setup Firebase for Web
Add Firebase to your JavaScript project
You might want to Register a Web app: Firebase Console -> Project Overview -> + Add app -> Web.
NOTE: I have yet to play with Firebase Hosting.
Add Firebase SDKs and initialize Firebase: I used the CDN options (simplest for testing purpose)
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Test Firebase Auth</title> </head> <body> <h1>Test Firebase Auth</h1> <div>Put Your HTML here</div> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-auth.js"></script> <script> var firebaseConfig = { apiKey: "AIza...", authDomain: "[PROJECT_ID].firebaseapp.com", databaseURL: "https://[PROJECT_ID].firebaseio.com", projectId: "[PROJECT_ID]", storageBucket: "[PROJECT_ID].appspot.com", messagingSenderId: "2401..." }; firebase.initializeApp(firebaseConfig); </script> <body></html>Setup FirebaseUI for Authentication
Include
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />Setup Google Authentication
Enable Google Authentication at Firebase Console -> Authentication -> Sign-in method -> Google (Provider).
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Test Firebase Auth</title> </head> <body> <h1>Test Firebase Auth</h1> <div id="firebaseui-auth-container"></div> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-auth.js"></script> <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" /> <script> var firebaseConfig = { apiKey: "AIza...", authDomain: "[PROJECT_ID].firebaseapp.com", databaseURL: "https://[PROJECT_ID].firebaseio.com", projectId: "[PROJECT_ID]", storageBucket: "[PROJECT_ID].appspot.com", messagingSenderId: "2401..." }; firebase.initializeApp(firebaseConfig); document.addEventListener('DOMContentLoaded', function() { var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', { callbacks: { signInSuccessWithAuthResult: function(credential, redirectUrl) { credential.user.getIdToken().then(function(token) { // make api call to backend }) }, uiShown: function() { console.log("uiShown"); } }, signInFlow: 'popup', signInOptions: [ // https://firebase.google.com/docs/reference/js/firebase.auth.html // firebase.auth.EmailAuthProvider.PROVIDER_ID firebase.auth.GoogleAuthProvider.PROVIDER_ID // firebase.auth.FacebookAuthProvider.PROVIDER_ID, // firebase.auth.TwitterAuthProvider.PROVIDER_ID, // firebase.auth.GithubAuthProvider.PROVIDER_ID ], }); }); </script> <body></html>If you bump into This domain (127.0.0.1) is not authorized to run this operation error, add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method -> Authorised domain.
NOTE: Access current user using firebase.auth().currentUser.
NOTE: Refer to Test Firebase Auth from Web/Javascript.
NOTE: Refer to official documentation for more sample and options.
References: