This content originally appeared on DEV Community and was authored by fireninja333
In this blog I am going to cover some basic concepts about the Firebase Authentication with google-auth. So lets zoom in and write some code.
First off all lets create a login and dashboard screen.
Here in login screen div we have a button and then when we click on that button a pop up window will open and after selecting/creating/logging in with our google account it will redirect to our dashboard and show us our profile details like profile-picture, email and username. We will display it using the innerhtml method. Now lets create a firebase project
After creating it lets create a web app
Give it a name and click next.
Now lets enable Authentication and authentication with google
Next: lets import authentication and our app
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"></script>
Now lets create a javascript file and paste our config. You can find your config in project settings.
Then we will get the elements from the html file and add a event listener to render the function.
Following: We will render the google sign in with pop up and tell it to show the user details and if there is a error just show it in the console.
Now we will show the user details from the console to innerhtml
In the above picture we are telling it to see for login's and if there is a login from the device then render the
showUserDetails
function or else let the user login.
Finally lets give some functionality to the logout button.
Here the logout button will render the LogoutUser function and tell it to log out using
firebase.auth().signOut()
then after logging out just show the LoginScreen and if there is a error just display it in the console.
If you like this blog consider following me on github: https://github.com/fireninja333 and you can find the source code: https://github.com/fireninja333/google-auth-blog
Thank you! For reading and I will see you in the next one.
This content originally appeared on DEV Community and was authored by fireninja333
fireninja333 | Sciencx (2021-09-29T08:58:35+00:00) Google Auth Firebase. Retrieved from https://www.scien.cx/2021/09/29/google-auth-firebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.