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
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>
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
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);
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=>{
})
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.
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;
}
})
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.
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.
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"
}
}
}
Logout users
Logging out users are very simple just add a onclick event to logout button like this:
logoutBtn.onclick = () => auth.signOut();
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,
Top comments (0)