Month: November 2020

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.

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.

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”