Basic user authentication methods with Firebase

For this week’s blog I will explain two ways to create a simple and easy user authentication process. The first method is through email and password, and I will also discuss on how to do this through a third party authenticator. For this example, I will use Google’s authenticator.

I will focus on these functions:

  • auth.signInWithPopup()
  • auth.onAuthStateChanged()
  • auth.createUserWithEmailAndPassword()

First, we have to understand what is an open subscription. auth.onAuthStateChanged() is an open messaging system between our application and our firebase app. Whenever any changes occur on on firebase from any source relating to our application, Firebase sends out a message that says that the status of the user has updated whether they’ve signed in through some service such as our Google sign or our email and password sign up or they’ve signed out, and then they will give us back two things, an unsubscribe function, and a user object, and we could call a function to put the returned user object into the state.

To use this on our react lifecycle process, we would create an unsubscribe function and bind it to the returned function on component did mount. Then on component will unmount, we would call the unsubscribe from auth function.

Next, to sign in with a third party authenticator, you would create a function like this

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account'});
export const signInWithGoogle = () = > auth.signInWithPopup(provider);

This snip of code exports the function auth.signInWithPopup and uses the google provider object.

And that’s all, you just have to import this function and bind it to any button you would like, and the google sign in will popup and take care of the rest.

With a third party authenticator, users can just use sign and with Google a lot sign and is actually a very tedious and difficult thing to set up from scratch, but by using firebase we got access to it with just a couple configurations and that’s why firebase is such an incredible platform.


How to run standups


The Facade Pattern

As we create bigger and bigger projects, our code will slowly accumulate and if we don’t design it correctly, it ends up to be spaghetti code and after some time, we won’t even be able to read it ourselves. To fix this, we have what’s called Design Patterns. Today we will see how to use the facade design pattern to improve your code as you move forward with your CS journey.

First, we will learn where we can use this Design Pattern. The facade pattern is typically used when:

  • a simple interface is required to access a complex system,
  • a system is very complex or difficult to understand,
  • an entry point is needed to each level of layered software, or
  • the abstractions and implementations of a subsystem are tightly coupled.

Here’s an example, React is a very popular front end framework that uses a lot of the facade pattern. When we create a new component in react, we would import a library and declare a component class. A component class has established functionalities and methods that the user can declare which would otherwise be extremely difficult to implement by ourselves. Functionalities such as state management and auto selective re-rendering are really easy to use because of the facade pattern.


Learning how to learn

I’ve been in the computer science field for 2 years, that being said, I am still quite bad at coding. I am a hacker when it comes to coding, not the Kevin Mitnick kind, but the kind that would try to hack through the language syntax without ever reading documentation. Then I would ask a TA or a senior for help and I would see how they do it and learn the syntax that way.

It was not until last year when I learn that I’ve been approaching coding the wrong way. A friend of mine, who is my CS mentor told me,

“The best coders, knows how to (find their answer on) Google”


The tester vs the tested


Not Alone

Sometimes being in a group is not easy, and it’s even harder now with all this pandemic going on and having to work with people who you’ve never met and don’t know. So here are a few things that you can do, to improve your team’s work inclusivity and in-turn, overall productivity.

  1. Establish when you want and what you expect from them
    1. DO tell your teammates you expect something to be done by a certain time.
    2. DO tell your teammates they’re not living up to your expectations when they fail.
    3. DO NOT take it personally when your teammate doesn’t want to hear your excuses.
    4. We all need to understand that in this environment we are trying to teach one another and train one another for the work that all of us will be doing after college.
  2. Schedule a one hour one on one with a team member once a week.
    • This is NOT a standup.
    • This is NOT a meeting where you demand preperation and pressure them on their due tasks.
    • This is a meeting where you can get to know your teammate, talk to your teammate about the project, and see if he or she is having any holds.
    • Or when there is nothing to be discussed, you can both use this time to just work on the project.
    • This meeting IS the time when you can help them on the things that they are stuck, or they can help you. Some people do this in group standup and it is honestly the most annoying thing ever.
  3. Inspire your teammates to work harder
    1. How? Step 1, DO YOUR PART EARLY. I don’t know how many times in the past when I see the nobody has started the paper, then I’ll feel lazy too. NO MORE!
    2. Create multiple tasks that are detailed with instructions and easy to complete, rather than a big obscure one.
    3. Show them that they’re not alone, that’s you are all working hard together.


Wax Off

This week: Said goodbye a leader and became a leader myself. 

One pattern of myself that I realize this last month is that I am always inspired by one person at any point of my life. Who? Sometimes it’s a public figure that I like, and sometimes it’s a friend, or family member. My last inspiration is one of my instructors who is also my mentor and my friend. This week, I said goodbye as he fly off the east coast for a job in atlanta. For me right now it feels like I just finished a netflix series and I’m looking for a direction. 

On another note, I am the leader of my capstone group, who would’ve thought. Power is nice I suppose, and that I also like the responsibility that comes with it, it gives me a sense of purpose that I crave. 

This week I tried to get my team to get familiar with the tools that we will be using and to read up on the frameworks that we will be implementing on. We are using clickup for our kanban board and we are using toggl to track our working times. One problem that I have this week is that it seems like I have to try harder to get my teammates more exited about our project.


Broken bones

This past week have just been very quick. Home works are starting to pick up. This week my team stressed me the hell out. Some of them were harder to reach than that spaceship which fell into a blackhole some time ago.

Aside from that, My Pet Pal, is the name of the project that I will be working on along with my three other team members. Also this week, I’ve mostly been working on next week’s assignments and home works, I try to keep myself a few days ahead.

Highlight of the week: Guy punches me on my shoulder and gets fractured thumb.

Things that I am trying to improve is: time management, productivity, weekly planning, money management, and ReactNative. I suppose everything is still going as planned,

Rocky Balboa,

Signing Off


Enter the Canon

My journey in Computer Science started on August 21st 2017. When I signed up for my first introduction to computer science class, I had no prior experience with programming. My high school had 3 choices, computers, business, or science. I was always driven by competition, so that made go the science route. It’s a funny story actually, I HATED labs and the idea of uncertainty, so my sneaky little brain says “If I can create a program that takes in my calculations, instead of doing these labs, I can create an environment where each molecule is accounted for.” So in I to go into Computer Science, which I thought was science with computers. One week into the class and I realise that Computer Science means science OF computers. I called my Advisor and asked to change my major to BioChem.

Surprisingly by the end of my first term, I fell in love with speed coding and how competitive people get when they try to make the code more and more efficient. November that year, I decided to sign up for another CS class.

Throughout my experience in CS, what interests me the most is how users are very diverse, but humans have a certain way of thinking and where we look for solutions such that a designer can design the optimal path and locations easiest for ANY user to easily LEARN.

I also have a lot of experienced with React development. This is why for my capstone project, I choose ones that involve front-end and user interactions.

My name is Timothy Wiliusa,

Over n’ Out