Merge branch 'master' into adds-mfa-blog

supertokens · Dec 1, 2023 · 379bf6a · 379bf6a
2 parents 0929981 + f5a2fc2
commit 379bf6a
Show file tree

Hide file tree

Showing 15 changed files with 466 additions and 8 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -59,6 +59,56 @@ Following are some examples-
 ![Alt text for the image](./flow.png)
 ```
 
+#### Author information for the post.
+To add/edit the author information for existing or new author of the blog that needs to be published you need to add necessary information of that author in `src/authors-details.js` and the name property of the author object should match with the author value in frontmatter in your blogs `index.md` file.
+
+##### Example
+
+```mdx
+---
+title: "What is TOTP and why do you need it?"
+date: "2023-11-16"
+description: "Time based one-time passwords solve a number of issues that plague traditional authentication methods. In this blog we break down TOTP and why it's so useful."
+cover: "totp-why-you-need-it-and-how-it-works.png"
+category: "programming"
+# this author properties value should exactly match with name property in the author object below.
+author: "Joel Coutinho"
+---
+
+```
+
+```js
+
+module.exports = [
+{
+  // This property's value should match with the frontmatter author value.
+  name: "Joel Coutinho",
+  jobTitle: "Backend Developer at SuperTokens",
+  image: "joel.jpeg",
+  socials: [
+    {
+      name: "github",
+      url: "https://github.com/jscyo",
+    },
+    {
+      name: "linkedin",
+      url: "https://linkedin.com/jscyo",
+    },
+    {
+      name: "twitter",
+      url: "https://twitter.com/jscyo",
+    },
+  ],
+  bio:
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis enim consequatur obcaecati, modi facilis nemo. Doloribus quia libero iste autem!",
+}
+]
+
+```
+
+Finally add a image of the author into `/static/author_images` folder and make sure that the author metatag is added to `/static/blog-seo/config.json` as show in the below [metatags](#meta-tags) example.
+
+
 #### SEO for blogs
 
 ##### Adding OG images
@@ -73,6 +123,7 @@ Meta tags for blog images are picked up from `/static/blog-seo/config.json`, for
 {
     "path": "/blog/<SLUG>",
     "metaTags": [
+        "<meta name=\"author\" content=\"<TODO>\" /> ",
         "<meta name=\"description\" content=\"<TODO>\" />",
         "",
         "<meta name=\"keywords\" content=\"<TODO>\" />",

diff --git a/content/totp-why-you-need-it-and-how-it-works/how-totp-works.png b/content/totp-why-you-need-it-and-how-it-works/how-totp-works.png
diff --git a/content/totp-why-you-need-it-and-how-it-works/index.md b/content/totp-why-you-need-it-and-how-it-works/index.md
@@ -0,0 +1,55 @@
+---
+title: "What is TOTP and why do you need it?"
+date: "2023-11-16"
+description: "Time based one-time passwords solve a number of issues that plague traditional authentication methods. In this blog we break down TOTP and why it's so useful."
+cover: "totp-why-you-need-it-and-how-it-works.png"
+category: "programming"
+author: "Joel Coutinho"
+---
+
+## Table of contents
+- [Introduction](#introduction)
+- [What is TOTP](#what-is-totp)
+- [How does TOTP work?](#how-does-totp-work)
+- [Conclusion](#conclusion)
+
+## Introduction
+
+Authentication asks users to prove their identity through the information that only the owner should know (user credentials like email and password) or verifying that the user has ownership of an account/device(Passwordless login with OTP through email/phones).
+
+However these methods can be compromised. Database leaks can compromise users' credentials and pose a big risk to account security, but, coupling factors together can make it much harder for malicious actors to get access to a user's account. This is where Two-Factor authentication comes into the picture. 
+
+Integrating Two-Factor Authentication (2FA) into your authentication flow brings a number of benefits to your application. From password recovery to account security, 2fa improves the user experience while also making it harder for malicious actors to access accounts with compromised credentials.
+
+An example of this is the ongoing [youtube account hacks](https://www.wired.com/story/youtube-bitcoin-scam-account-hijacking-google-phishing/). Although YouTube has the option for 2fa, it is not required to change the account owner once a session is established. This resulted in several popular YouTube channels being compromised and the owners being locked out of their accounts through a session hijacking attack. If the “change ownership” action had been protected by 2fa, the effects of this attack could have been significantly reduced.
+
+There are a number of different 2fa methods like OTP sent through email, sms, or biometrics but one of the most popular methods 2fa methods is TOTP.
+
+## What is TOTP?
+
+TOTP is a time-based one-time password algorithm that generates a unique password for each login attempt. It uses time as a counter and will generate a new password in a fixed interval of time. This solves issues that have plagued traditional factors for years and makes TOTP convenient and secure to use. Let's take a look at some of these issues:
+
+Passwords in general could be better. They can be forgotten, stolen, or guessed through brute force and most people reuse them. Using One Time Passwords solves these issues but they need help with deliverability. OTPs sent through sms or email can be late or not arrive depending on latency and network issues making them less convenient. Finally, biometric-based authentication is one of the most secure methods and avoids the downsides of the other methods but requires dedicated hardware to work.  
+This is where TOTP comes in. It avoids the pitfalls of passwords by generating unique one-time codes and since it uses a time-based counter, it is able to generate codes offline without the need for internet access. It is also cost-effective since all it requires is downloading an authenticator application on your phone.
+
+## How does TOTP work?
+
+To enable TOTP, you will first need to install an authenticator application. Some popular choices are Google Authenticator, Microsoft Authenticator, or Authy.
+Once set up, the app will generate a unique, time-limited code that will be used as a second factor.
+
+The code generated by the app is based on a shared secret key between the app and the online service. The key is a long string of characters unique to your account and generated when you enable TOTP. The key is then used to generate a new code every 30 seconds, and the code is valid only for a short time. This ensures that even if someone intercepts the code, they won't be able to use it to access your account due to the short lifetime.
+
+![How TOTP works](./how-totp-works.png)
+
+**What are the benefits of TOTP?**
+
+- **Security**: TOTP adds an extra layer of security to your online accounts, making it harder for hackers to gain access to your accounts. Since the codes generated are unique and are not sent over a network they are harder to intercept.
+- **Convenience**: TOTP codes are generated locally on your mobile device making it extremely convenient. It does not need internet or network access.
+- **Cost**: Unline SMS or email-based OTPs have infrastructure costs associated with delivering the OTP, TOTP is based on an Open Source algorithm and there are no costs associated with deliverability.
+
+**What are the downsides of TOTP?**
+The one major downside of TOTP is that the secret key is stored on both the user's device and the server. If either of these systems were to be compromised, a malicious actor would now be able to generate codes and have unfettered access to the user's account.
+
+## Conclusion
+
+With the rise in popularity of 2fa in recent years, securing your application with TOTP has become more important than ever. It reduces attack vectors, is easy to set up, and is cheaper when compared to other OTP methods.
diff --git a/src/authors-details.js b/src/authors-details.js
@@ -0,0 +1,19 @@
+//TODO: data related to each author on the blog posts should be added incrementally here.
+
+module.exports = [{
+  name: "Joel Coutinho",
+  jobTitle: "Software Developer at SuperTokens",
+  image: "joel.png",
+  socials: [
+    {
+      name: "github",
+      url: "https://github.com/jscyo",
+    },
+    {
+      name: "linkedin",
+      url: "https://in.linkedin.com/in/joel-coutinho-7bbb89143",
+    },
+  ],
+  bio:
+    "I am a content writer at SuperTokens. I have also contributed to the SuperTokens core, all the backend SDKs, and the developer docs.",
+},]
diff --git a/src/components/AuthorCardFooter.jsx b/src/components/AuthorCardFooter.jsx
@@ -0,0 +1,53 @@
+import React from "react"
+
+import authorsDetails from "../authors-details"
+import { Github, Linkedin, Twitter } from "../icons"
+
+export default function AuthorCardFooter({ author }) {
+
+  const authorDetails = authorsDetails.find(a => a.name === author)
+
+  if (authorDetails === undefined) {
+    return <b>Written by the Folks at <a href="https://supertokens.com">SuperTokens</a> — hope you enjoyed!</b>
+  }
+
+  return (
+   <>
+    <div className="author-card-footer-container">
+      <img
+        src={`/author_images/${authorDetails.image}`}
+        alt="author"
+      />
+      <div className="author-info">
+        <span className="author-name">{authorDetails.name}</span>
+        <div className="author-title-socials-container">
+          <span className="author-title">{authorDetails.jobTitle}</span>
+          <div className="author-socials">
+            {authorDetails.socials.map(({name, url}) => {
+              return <LinkIcon key={name} name={name} url={url}/>
+            })}
+          </div>
+        </div>
+        <p className="author-description">{authorDetails.bio}</p>
+      </div>
+    </div>
+    <p className="hidden-md">{authorDetails.bio}</p>
+   </>
+  )
+}
+
+function LinkIcon({name, url}) {
+  let icon = undefined
+  if (name === "github") {
+    icon = <Github />
+  } else if (name === "linkedin") {
+    icon = <Linkedin />
+  } else if (name === "twitter") {
+    icon = <Twitter />
+  }
+  return (
+    <a href={url} target="_blank">
+      {icon}
+    </a>
+  )
+}
diff --git a/src/components/AuthorCardTop.jsx b/src/components/AuthorCardTop.jsx
@@ -0,0 +1,36 @@
+import React from "react"
+
+import authorsDetails from "../authors-details"
+
+export default function AuthorCard({ author }) {
+
+  const authorDetails = authorsDetails.find(a => a.name === author);
+
+  if (authorDetails === undefined) {
+    return (
+      <p
+        style={{
+          fontSize: "16px",
+          fontWeight: "normal",
+          margin: "-16px 0px 32px",
+          color: "#222",
+        }}
+      >
+        By {author}
+      </p>
+    )
+  }
+
+  return (
+    <div className="author-card-top-container">
+      <img
+        src={`/author_images/${authorDetails.image}`}
+        alt="author"
+      />
+      <div className="author-info">
+        <span className="author-name">By {author}</span>
+        <span className="author-title">{authorDetails.jobTitle}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/BlogPostFooter.jsx b/src/components/BlogPostFooter.jsx
@@ -2,12 +2,13 @@ import React from "react";
 
 import STBannerBackdrop from "../images/supertokens-logo-backdrop.png";
 import STBannerTop from "../images/bottom-banner-top-icon.png";
+import AuthorCardFooter from "./AuthorCardFooter";
 
-const BlogPostFooter = ({ idSlug }) => {
+const BlogPostFooter = ({ idSlug , author}) => {
 
   return (
     <footer id={`last_section_${idSlug}`}>
-      <b>Written by the Folks at <a href="https://supertokens.com">SuperTokens</a> — hope you enjoyed!</b>
+      <AuthorCardFooter author={author}/>
       <div className="sign-up-banner-content-border">
         <div className="blog-post-sign-up-banner">
           <img

diff --git a/src/icons/index.jsx b/src/icons/index.jsx
@@ -0,0 +1,59 @@
+import React from "react"
+
+export function Github() {
+    return (
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.99865 0C6.58203 0.0305992 4.2765 1.01997 2.58912 2.75054C0.901743 4.48111 -0.029315 6.81116 0.000704011 9.22824C-0.0131156 11.1469 0.572462 13.022 1.67568 14.5918C2.7789 16.1615 4.34469 17.3474 6.1544 17.984C6.6043 18.0686 6.76896 17.7842 6.76896 17.5394C6.76896 17.3198 6.76086 16.7402 6.75636 15.9699C4.25313 16.5279 3.72585 14.7333 3.72585 14.7333C3.56369 14.1788 3.20928 13.7002 2.72619 13.3834C1.90917 12.811 2.78827 12.8227 2.78827 12.8227C3.07547 12.8649 3.34913 12.9726 3.58814 13.1374C3.82715 13.3021 4.02511 13.5196 4.16676 13.7731C4.28432 13.9993 4.44641 14.1993 4.64329 14.3612C4.84017 14.5231 5.06778 14.6435 5.3124 14.7152C5.55701 14.7868 5.8136 14.8082 6.0667 14.7781C6.3198 14.7479 6.56418 14.6669 6.78515 14.5398C6.82499 14.0743 7.02725 13.6375 7.35653 13.306C5.35898 13.0729 3.25796 12.2818 3.25796 8.74497C3.24332 7.83244 3.57405 6.94808 4.18385 6.26916C3.90942 5.47208 3.94149 4.60135 4.27382 3.82664C4.27382 3.82664 5.02875 3.57827 6.74826 4.77252C8.22151 4.35864 9.78028 4.35864 11.2535 4.77252C12.9712 3.57827 13.7253 3.82664 13.7253 3.82664C14.0575 4.60137 14.0896 5.47207 13.8152 6.26916C14.4253 6.94789 14.7557 7.83245 14.7402 8.74497C14.7402 12.2899 12.6365 13.0702 10.6318 13.2979C10.8476 13.5242 11.0136 13.7934 11.1188 14.088C11.2241 14.3825 11.2663 14.6959 11.2427 15.0078C11.2427 16.2417 11.2319 17.237 11.2319 17.5394C11.2319 17.786 11.3948 18.0731 11.851 17.9831C13.6593 17.3456 15.2237 16.1595 16.3258 14.5902C17.428 13.021 18.013 11.1468 17.9993 9.22915C18.0293 6.81152 17.0979 4.48097 15.41 2.75018C13.722 1.01939 11.4158 0.0301258 8.99865 0V0Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+
+  export function Linkedin() {
+    return (
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16.2 0H1.8C1.32305 0.00142445 0.866039 0.191524 0.528781 0.528781C0.191524 0.866039 0.00142445 1.32305 0 1.8L0 16.2C0.00142445 16.677 0.191524 17.134 0.528781 17.4712C0.866039 17.8085 1.32305 17.9986 1.8 18H16.2C16.677 17.9986 17.134 17.8085 17.4712 17.4712C17.8085 17.134 17.9986 16.677 18 16.2V1.8C17.9986 1.32305 17.8085 0.866039 17.4712 0.528781C17.134 0.191524 16.677 0.00142445 16.2 0V0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.72959 5.67 3.41638 5.57499 3.14998 5.39698C2.88357 5.21897 2.67593 4.96596 2.55332 4.66995C2.4307 4.37393 2.39862 4.0482 2.46113 3.73395C2.52364 3.4197 2.67793 3.13105 2.90449 2.90449C3.13105 2.67793 3.4197 2.52364 3.73395 2.46113C4.0482 2.39862 4.37393 2.4307 4.66995 2.55332C4.96596 2.67593 5.21897 2.88357 5.39698 3.14998C5.57499 3.41638 5.67 3.72959 5.67 4.05C5.67083 4.26297 5.6295 4.47401 5.54838 4.67093C5.46726 4.86785 5.34797 5.04677 5.19737 5.19737C5.04677 5.34797 4.86785 5.46726 4.67093 5.54838C4.47401 5.6295 4.26297 5.67083 4.05 5.67V5.67ZM15.3 15.3H12.6V10.53C12.6 10.172 12.4578 9.82858 12.2046 9.57541C11.9514 9.32223 11.608 9.18 11.25 9.18C10.892 9.18 10.5486 9.32223 10.2954 9.57541C10.0422 9.82858 9.9 10.172 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.1528 7.91104 10.4874 7.60539 10.8776 7.38685C11.2679 7.16831 11.7033 7.04277 12.15 7.02C12.9823 7.03004 13.7777 7.36514 14.3663 7.95372C14.9549 8.54229 15.29 9.33769 15.3 10.17V15.3Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+  export function Twitter() {
+    return (
+      <svg
+        width="22"
+        height="18"
+        viewBox="0 0 22 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.6694 0.041972C12.8562 0.277358 11.3705 1.55496 10.8535 3.32347C10.7349 3.72889 10.719 3.86395 10.717 4.48277C10.7157 4.868 10.7314 5.2767 10.7518 5.39099L10.7891 5.59879L10.4858 5.56995C8.30096 5.36215 6.5479 4.81061 4.83688 3.7927C3.6922 3.1117 2.36505 2.00602 1.67898 1.16186C1.54406 0.995835 1.42002 0.859955 1.40338 0.859955C1.31799 0.859955 0.968572 1.75204 0.864176 2.23663C0.76515 2.696 0.790306 3.75425 0.910859 4.20464C1.15932 5.13246 1.47764 5.67492 2.18664 6.37871C2.75907 6.94696 2.75912 6.94759 2.19718 6.84615C1.78729 6.7722 1.27097 6.61328 0.998275 6.4772C0.869207 6.41281 0.754362 6.36939 0.743042 6.38074C0.708647 6.41508 0.820348 7.28905 0.898717 7.59839C1.00074 8.00149 1.39511 8.79315 1.6813 9.16944C1.9791 9.56094 2.39146 9.94168 2.81485 10.2159C3.17235 10.4474 3.81963 10.7396 4.08555 10.7894C4.1795 10.807 4.25637 10.8387 4.25637 10.8599C4.25637 10.9422 3.54451 11.0155 2.96395 10.9932C2.63712 10.9807 2.36969 10.9894 2.36969 11.0127C2.36969 11.1274 2.65013 11.6986 2.87522 12.0424C3.53987 13.0574 4.59727 13.7674 5.81984 14.0195C6.02195 14.0612 6.2693 14.0953 6.36944 14.0953C6.54984 14.0953 6.55066 14.0962 6.45613 14.1879C6.25363 14.3844 5.51299 14.8409 4.95782 15.1115C3.60909 15.7689 2.27589 16.0539 0.706615 16.0205C-0.211566 16.0009 -0.200488 15.9759 0.540442 16.3963C1.98888 17.2181 3.76748 17.7741 5.55222 17.9631C6.24236 18.0361 8.15496 17.9948 8.83794 17.892C12.2648 17.3764 15.1526 15.6563 17.1585 12.936C18.7961 10.7152 19.6951 8.14336 19.7712 5.46161L19.799 4.48417L20.1675 4.19947C20.3703 4.04286 20.7492 3.69309 21.0096 3.42211C21.4716 2.94158 22.0414 2.22725 21.9976 2.18359C21.9856 2.17156 21.8735 2.20552 21.7486 2.25899C21.251 2.47196 19.6287 2.89351 19.5622 2.8271C19.5525 2.81744 19.724 2.66871 19.9433 2.4966C20.4627 2.08901 20.8872 1.5566 21.1957 0.926035C21.3314 0.648576 21.4298 0.409036 21.4145 0.393675C21.3991 0.378362 21.2494 0.441979 21.0817 0.53511C20.4907 0.86324 19.7453 1.14374 18.8712 1.36686L18.562 1.44579L18.3875 1.28165C17.6824 0.618483 16.8364 0.208815 15.8667 0.061052C15.3685 -0.0148339 15.1356 -0.0185532 14.6694 0.041972Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+