DEV Community: Ekama Emmanuel

Welcome to Hotel VPC at AWS

Ekama Emmanuel — Wed, 24 Aug 2022 06:30:00 +0000

I am very excited to be your host and at the same time your tour guide. You are welcome to the VPC hotel here at AWS. In view is a map to visually aid our imagination and guide us during the course of this trip.

Let me start by showing you how to find your way around in case of any unforeseen incidence. First and foremost, we have two sections here at this VPC and we refer to them as AZ. On your way here you passed the very secure gate, Aws staffs calls it IGW, but I prefer the full name internet Gateway. The strength of the IGW is what we bank on and it's the only way in or out of this VPC. Only authorized users can access it and you can see it's location on the map.

Moving on, is the receptionist office, there will see a nice lady who's an expert in multitasking and she also makes sure no department is over worked. No AWS staff knows her by her real name so we call her by her nature, Load Balancer or LB for short. She has two offices in this branch, one of them is where we'll be visiting next and the other one she only uses when something goes wrong is this AZ. She swiftly changes her office to get all staffs back on track and controls the chaos. Much Later, I will share more details on her role and why we appreciate her job. You can see her offices on the map too.

I forgot to mention we refer to rooms or offices as SubNet. We go the length to localize the experience. So public offices that have less restriction are called Public Subnets and restricted ones are called? You guessed it, Private Subnet!

When LB clears us, we should have a Subnet and a luggage boy to take us there. I must warn you about luggage boys, they have very strict policies to follow instructions given to them by LB in one heavily protected note. They'll raise the note and yell Route Rule! Route Rule! Whenever you try to tip them to change course. Even I can't make them change their course. Dumb and loyal and I just called them Route! They will take us to our allocated Private Subnet without fail.

Hopefully, you will like your subnet, But if you don't, you have the privilege to do as you please. The room comes with a basic plan and it's completely free for a year, but you can satisfy your curiosity and possibly customize your subnet. Please check the instances list to see your options. Myself and staffs calls the options EC2, which is Elastic compute cloud in full. You have flavor of Windows, Linux and even the latest Mac2...

I must spill! Scott Malkie, Farrah Campbell and Steve showcased its features just last week. So if you are going to do some heavy lifting, this VPC have you covered. Whatever option you eventually go with, it only takes some few minutes to set up by our Launch Configuration department.

When you are settled in your customize Ec2 instance and you feel like stepping out, you can call the Route boy. They would take you through a different hallway, much different from the one you took to your Private subnet. This VPC Have a special requirement for those lodging in Private subnet. You are our top priority customer and is a must, you drop your EIP keys with Mr NAT before leaving your Private Subnet.

Mr NAT's office, Sorry, I meant "subnet" is also on the map. NAT is just and acronym of his name Network address translator. If it wasn't for unfair company's politics, I should be in charge of his subnet. Please be careful with him, it's one way with him.

So, back to Lb, Who is my favorite person in this hotel, actually she is everyone's favorite. For each customizable subnet you decide to go with, she keeps an exact replica in the other AZ where her second office is located. So maybe your room gets flooded or have a power failure. Although, these sorts of things rarely happens, she works with launch Configuration and Auto Scaling department to make sure you have a spare room and a very smooth transition to the other AZ. Enough about LB before you start questioning my emphasis.

Before I let you go, There is a tiny note that would be given to you, it's called Route Table. It contains all the places you can possibly visit within this AZ. You can call the Route boy to take you to anyone... You are allowed to add more exciting places. Feel free to call the Security Groups department to help you with that.

Here are keynote you should remember

Mrs LB two offices, in case of any incident
Don't tip the Route boys. Route boys, the Security Group and the Route Rules work in a mix to keep us secured within this VPC.
Offices are public subnet, rooms are private subnet and section are AZ (Availability Zone)
EIP is your key to leave your subnet
You use Mr NAT Public Subnet before leaving and remember to drop your keys

Hope you have a nice time here at AWS VPC.

Google oAuth on NextJs

Ekama Emmanuel — Wed, 24 Nov 2021 10:35:20 +0000

If your search has brought you here, then I'm sure you have done some type of authentication and authorization with probably Express PassportJs on a project, so Let's save our time by jumping to straight to bullet overview and implementation.

Overview

Add NextJs app to Google console
Configure NextJs app with firebaseConfig (some few changes with firebase v9.0.0)
Employ environment variable to hold secret
Build an auth-Service
Protected routes with custom hooks

Adding your Next app to Google console is pretty easy, It's like when you deploy on Varcel, with some few clicks you are done! You have a dashboard that gives a brief overview of your project when you create a project on google console. click on "Add app" button at the top and you will be taken to this page to provide a nickname for your app, mine is MetaApp. Then, follow the next few steps, it is self explanatory. Don't forget to copy firebaseConfig!

Now you're through with app registration, let's make use of the snippet you copied. Create a file with a name related to firebase, something like fireBaseClient.js in a Service Folder and then import firebase app and auth. *side note **We import app and auth from *firebase/compact/ not firebase/ since Version 9 like so

// service/fireBaseClient.js

import firebase from "firebase/compat/app";    firebase v9
import "firebase/compat/auth";                 firebase V9
import "firebase/compat/firestore";            firebase V9

// import firebase from "firebase/app";         firebase v8 
// import "firebase/auth";                      firebase v8 
// import "firebase/firestore";                 firebase v8 



const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}
export default firebase;

You noticed how we hid the secret keys with environment variable? yeah, it's possible with NextJs. All I did was add an env.local file to the root directory and paste the secret. Another side note is that each env variable should start with NEXT_PUBLIC_ with whatever you chose to complete the name. It's how Next.js gets to know what to load or bundle. Also, there are trailing commas , that came with the code we copied, get rid of them. I lost a couple hours debugging them. Once that is done we don't have to worry about our secret getting stolen by village people, haha! Quick example

NEXT_PUBLIC_SOMENAME = "MetaAppSecrete"
// don't forget the comma

You will also see a condition !firebase.apps.length, this is to make sure we don't initialize another firebase app. Now we have completed firebase setup. It's time to build a signUpWithGoogle service

service/firebaseAuth.service.js

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

export const  AuthService = {}

AuthService.loginWithGoogle = async () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  try {
    const { user } = await firebase.auth().signInWithPopup(provider);
    return {
      user,
    };
  } catch (error) {
    return {
      error: error.message,
    };
  }
};


AuthService.logout = async () => {
  await firebase.auth().signOut();
};

Honestly, I feel like there is no need explaining the code because you might shoplift it, which in my opinion, is the best technique of coding fast with StackOverflow. But let me explain, google gives us a provider when we execute this new firebase.auth.GoogleAuthProvider() and we will call the type of login method we want on the provider, in our case it's signInWithPopup type. There are others that redirects the user but I prefer the popup.

Finally, we can tie our loginWithGoogle function to a signup button with an onClick event. You don't need a snippet for this, do you?

This post is becoming too long so I will deal with route protection in as a separate post.