DEV Community: Kevin Comba

😎Host your express API in Heroku in a second🔥👇👇

Kevin Comba — Thu, 25 Aug 2022 11:46:11 +0000

step 0

step 1

step 2

step 3

step 4

step 5

step 6

step 7

step 8

🔥JSON Web Token (JWT) is quite popular and used for Authentication🔥

Kevin Comba — Wed, 10 Aug 2022 09:04:08 +0000

✍🏻 It’s a token-based standard that allows us to securely transfer information between two parties without storing anything in a database.

JWT token consists of three parts:
✔️ Header
✔️ Payload
✔️ Signature
Each one being BaseURL64 encoded to form the token.

𝐉𝐖𝐓 𝐚𝐮𝐭𝐡𝐞𝐧𝐭𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐟𝐨𝐥𝐥𝐨𝐰𝐬 𝐚 𝐬𝐢𝐦𝐩𝐥𝐞 4 𝐬𝐭𝐞𝐩 𝐩𝐫𝐨𝐜𝐞𝐬𝐬

1) Client (Browser) 👉 sends post request with credentials to auth server to authenticate themselves

2) Auth Server 👉 authenticates user credential and generates a JWT. Server does not store anything and sends the token to the browser to save. It allows users to authenticate without their credentials in the future. It’s best advised to store the token in an http only cookie.

3) Thereafter 👉 for every request the client sends the JWT in the authorization header. Validation happens using token introspection with the auth server.

4) Once validated, resource server 👉 sends the necessary data to the client.

🚨 This covers a basic understanding of how JWT works. There’s much more to it.

✅ Reading it from jwt[.]io would provide better insights.

Keep growing. Keep learning. 💪

⭐ Client Side Rendering vs Server Side Rendering⭐

Kevin Comba — Sat, 06 Aug 2022 09:12:50 +0000

An important difference web developers must know 🔥
⭐ Client Side Rendering⭐
Is about rendering content in the browser mostly using JavaScript. Instead of getting all the content from the HTML document itself, a JS file renders the most of the site.

🟢 Fast website rendering after the initial load.
🟢 Great for web applications.
🔴 Initial load takes more time
⭐ In Server Side Rendering⭐
User makes a request to the webpage, the server prepares the HTML page by fetching the required data from the database and sends to the user’s machine over the internet while the JavaScript page is fetched to control interactivity.

🟢 The initial page load is faster.
🟢 Great for static sites.
🟢 Helps in SEO by allowing Search Engines to crawl the site
🔴 Frequent server requests take time for subsequent pages

Keep growing. Keep learning💪

🔥 If you are a developer, you must know how CORS works 🔥

Kevin Comba — Fri, 05 Aug 2022 17:25:00 +0000

Here’s a high-level flow on how browsers initiate that extra “preflight” request to determine whether they have permission to perform cross-origin requests.

What is CORS anyway? CORS stands for Cross-Origin Resource Sharing, and it’s a protocol that allows servers to receive requests from different domains.

Developers often make external API requests to fetch data from external servers. Sometimes these servers could be from different domains too.

Example:
👉 My app in kelcho.com making a GET request to kelcho.com is a same-origin request
👉 My app in kelcho.com making a GET request to google.com is a cross-origin request

But these cross-domain requests are restricted by the browser ❌

Once developers have configured CORS on the server to accept requests from other domains the browser will kick in a preflight check ✅

It is to verify whether resource sharing is allowed on the destination server. The preflight request uses the HTTP method OPTIONS.

I’ll post a detailed visual guide on how it works under the hood soon✌️

Keep growing. Keep learning💪