diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 92707aa4..928e131c 100644 --- 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/", "metaTags": [ + "\" /> ", "\" />", "", "\" />", 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 new file mode 100644 index 00000000..078b754f Binary files /dev/null and b/content/totp-why-you-need-it-and-how-it-works/how-totp-works.png differ 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 new file mode 100644 index 00000000..36c76b0b --- /dev/null +++ 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 new file mode 100644 index 00000000..8cc76d8e --- /dev/null +++ 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 new file mode 100644 index 00000000..fc22f808 --- /dev/null +++ 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 Written by the Folks at SuperTokens — hope you enjoyed! + } + + return ( + <> +
+ author +
+ {authorDetails.name} +
+ {authorDetails.jobTitle} +
+ {authorDetails.socials.map(({name, url}) => { + return + })} +
+
+

{authorDetails.bio}

+
+
+

{authorDetails.bio}

+ + ) +} + +function LinkIcon({name, url}) { + let icon = undefined + if (name === "github") { + icon = + } else if (name === "linkedin") { + icon = + } else if (name === "twitter") { + icon = + } + return ( + + {icon} + + ) +} diff --git a/src/components/AuthorCardTop.jsx b/src/components/AuthorCardTop.jsx new file mode 100644 index 00000000..ac458045 --- /dev/null +++ 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 ( +

+ By {author} +

+ ) + } + + return ( +
+ author +
+ By {author} + {authorDetails.jobTitle} +
+
+ ) +} diff --git a/src/components/BlogPostFooter.jsx b/src/components/BlogPostFooter.jsx index 79ad5140..c5f3a76c 100644 --- 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 (