DEV Community

Cover image for Sign in users with Google on your website - Firebase Basics Series - Part 5
Areeb ur Rub
Areeb ur Rub

Posted on

Sign in users with Google on your website - Firebase Basics Series - Part 5

Buy Me A Coffee

We have seen how database works and we have implemented it in our website but the most important thing a website requires are user and that's why we need user authentication so that we can keep the users data safe and also get some basic details from users.

Firebase provides user authentication also and beside it's easy implementation it also have many ways to sign in from simple email or phone number to using GitHub or Apple accounts to signing in

Enabling Google Auth

For now I am using Google Auth as it's popular and easy to use, first go to authentication in firebase project console, click get started you will get a list of providers select Google and enable it
auth
Enabling this will give you access to sign in with Google feature.

Adding Auth SDK <script>

As we have added the Realtime Db Library earlier we also have to add the auth library which we can get from Firebase Docs

<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
Enter fullscreen mode Exit fullscreen mode

and in App.js call the auth instance using const auth = firebase.auth();

Then specify the a provider, we are using "Sign in with Google" so it wil be like this const provider = new firebase.auth.GoogleAuthProvider();

By now we have imported all the necessary things to enable sign in with google.

Creating A button

I will implement this user auth in the Blog which we made in previous part and users won't be able to create post until they login and the person who post there name and image will be there on the post
image

On Sign in Button Click

Now, as the user click the sign in button it should open a Popup asking for google account and for that there is a function in firebase library

loginBtn.onclick = () => auth.signInWithPopup(provider);
Enter fullscreen mode Exit fullscreen mode

As user complete login another function in auth library is triggered and not only on login on logout also it is triggered.

auth.onAuthStateChanged(user=>{

})
Enter fullscreen mode Exit fullscreen mode

and it gives us the user information if user is logout it the callback value remain empty so we can add a if statement and execute different code when sign in or sign out.

Creating User Profile card

So after users login a Profile card will be displayed to them which will contain their Name and Image (which we will get from there Google Account) and a logout button will be also there, it will be also hidden initially like the create button and will be displayed after login.
Profile Card
After user login we will change the DOM and make the login button hidden and create & user card visible and this can be done by auth.onAuthStateChanged

auth.onAuthStateChanged(user=>{
    if(user){
        userCard.hidden = false;
        loginBtn.hidden = true;
        createBtn.hidden = false;
        userImg.src = user.photoURL;
        username.innerHTML = user.displayName;

    }
    else{
        userCard.hidden = true;
        loginBtn.hidden = false;
        createBtn.hidden = true;
    }
})
Enter fullscreen mode Exit fullscreen mode

you can try console.log(user); and see what different data it gives but for now I am using diaplayName and PhotoURL

I have also added 2 new filed in the post uid and displayName.

login

Setting up Firebase Rules

As we are displaying our SDK files and details as script tag in our website and anyone can edit our database if we don't have rules to stop unauthentic access and only the logged in user can add posts.

rules

To set up rules head onto firebase console in the Realtime Db section goto rules and here you can set rule.
Setting up rules is simple write it like json.

We will allow the read property but for write we will check if the user is authenticated or not.
Rules will be like this.

{
  "rules": {
    "Posts":{
            ".read":true,
            ".write": "auth != null"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Logout users

Logging out users are very simple just add a onclick event to logout button like this:

logoutBtn.onclick = () => auth.signOut();
Enter fullscreen mode Exit fullscreen mode

That's Simple

Try it Yourself




Till Now we have seen how we can add user authentication and setup rules so that only logged in users can post

What Next:

In next part we will see how we can host our website on internet using firebase hosting


Follow me to get updates,

areeburrub image

Buy Me A Coffee

Discussion (0)