CODEWITHSUNDEEP
javascriptnode.jsfirebasefirebase-authentication
doctorsherlock
doctorsherlock

Reputation: 1374

Using Firebase authentication correctly?

I am working on a nodejs app. Currently I have a login page and a home page which should be accessible after user logs in.

I decided to use Google and Facebook authentication provided by Firebase. I have implemented it but I am not sure if this is the right way to do this. Firebase provides an admin-sdk as well, do I need to use that?

Here is my code - login page - 

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "*****", authDomain: "*****", databaseURL: "*****", projectId: "*****", storageBucket: "*****", messagingSenderId: "*****"
    };
    firebase.initializeApp(config);
</script>

<script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css" />
<script type="text/javascript">
    // FirebaseUI config.
    var uiConfig = {
        signInSuccessUrl: '/home',
        signInOptions: [
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        ],
        tosUrl: '/terms-of-use'
    };

    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    ui.start('#firebaseui-auth-container', uiConfig);
</script>
<script>
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            window.location.replace("/home");
        } else {

        }
    }, function (error) {
        console.log(error);
    });
</script>

home page-

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "*****", authDomain: "*****", databaseURL: "*****", projectId: "*****", storageBucket: "*****", messagingSenderId: "*****"
        };
        firebase.initializeApp(config);
    </script>

    <script>
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            // User is signed in.
        } else {
            window.location.replace("/");
        }
    }, function (error) {
        console.log(error);
    });

    var signOutButton = document.getElementById("sign-out-btn");
    signOutButton.addEventListener("click", function () {
        firebase.auth().signOut().then(function () {
            // Sign-out successful.
        }).catch(function (error) {
            // An error happened.
        });
    });
    </script>

Basically I am not able to figure out where to fit firebase in the app and if I am using it in the best possible way. There is a lot of configuration going on here and very little in terms of code that I have to write and that is making me a bit uncomfortable as well. Could please anyone explain firebase auth should be used or point in the right direction. Thank you.

Upvotes: 0

Views: 185

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598623

The getting started with the Admin SDK documentation says:

The Admin SDK lets you interact with Firebase from privileged environments...

A privileged environment is something that you control, e.g. your laptop/desktop, a server you're using to host stuff on, or the Cloud Functions for your project. If this is a web page that you're going to share with regular users of your app, then you should not be using the Admin SDK.

The configuration you have at the top is just a bunch of properties that allow the various Firebase SDKs to find your project on Google's servers. Exposing those to the regular clients is not a security leak and in fact, is necessary to allow them to access the backend for your app.

The code you shared looks fine. If you're not sure about the approach, you might find it easier to first take the Firebase codelab for web developers, which walks you through building a chat application with Firebase.

Upvotes: 1

Related Questions