Social Auth

Tl;DR

A SliDevJS Editor with social auth walls

NextJS + ToastUI + Auth Tests

https://sli.dev/guide/hosting#spa

slidev build

Intro

If you are into marketing/social media and have used its related tools, you know that its a game of volume.

Say that for every 1000 cold emails you do, 2-4% will move towards the next step (and you will be lucky).

You dont want to throw away the mkt efforts, by having a landing and SaaS login that provides too much friction.

And if you have ever worked on ecommerce, you should know that a social sign in converts ~95%, instead of the ~80+% of a email/pwd.

With this post, lets try to understand how to make those social signins for good.

With the goal of not working our SaaS KPIs

And…in the mean time play with a wrapper of a SliDEvJS editor.

You can get started with such project and cursor like:

The Stack NextJS + ToastUI + SliDev.

Just as I have been using recently on the astro-editor for the multilang astro editor.

git clone https://github.com/JAlcocerT/slidev-editor
cd slidev-editor && make run-detached #localhost:3000 for the editor

# npm list -g @slidev/cli
# /usr/lib
# └── @slidev/cli@51.4.0
#docker system prune --all --volumes

Remember you had presenter mode at localhost:3030/presenter and you can even record your presentation

SliDev Goodies

• https://github.com/slidevjs/slidev
• https://jalcocert.github.io/JAlcocerT/creating-presentations-with-ai/#slidev

1. MermaidJS

2. Katex: so that you get good looking expressions $CAGR = \left( \frac{V_f}{V_i} \right)^{\frac{1}{t}} - 1$.

3. Monaco Editor: yea…the one I used here as simple .md editor

BaaS

Many popular Backend-as-a-Service (BaaS) platforms offer Google social sign-in.

This is a common and important feature for user authentication.

The most prominent players in this space are Firebase Authentication, Supabase, and PocketBase.

1. Firebase Authentication 🤖

Firebase Authentication is a Backend-as-a-Service provided by Google, so it naturally has deep integration with Google Sign-in. It provides a robust, pre-built authentication system that is easy to integrate into web and mobile apps. It supports various sign-in methods, including Google, Facebook, Twitter, and email/password. Its tight integration with other Firebase services like Firestore and Cloud Functions makes it a popular choice for developers already in the Google ecosystem.

• Pros:

  • Extremely easy setup for Google Sign-in.
  • Generous free tier for getting started.
  • Seamless integration with the entire Firebase suite.
  • Managed and scalable, so you don’t have to worry about infrastructure.

• Cons:

  • Vendor lock-in to the Google ecosystem.
  • Can become expensive at scale depending on your read/write operations.
  • Uses a NoSQL database (Firestore), which can be a limitation for projects requiring complex relational queries.

2. Supabase 🚀

Supabase is an open-source alternative to Firebase, often referred to as “Firebase for PostgreSQL.” It provides a full suite of BaaS features, including authentication, a real-time database, and serverless functions. Supabase Auth supports various social providers, including Google. Because it’s open-source and uses a relational database (PostgreSQL), it gives developers more flexibility and control.

• Pros:

  • Open-source, which offers flexibility and the ability to self-host.
  • Uses PostgreSQL, a powerful and widely-used relational database.
  • Has a built-in authentication system that integrates seamlessly with its database using Row Level Security (RLS).
  • Predictable pricing and a clear path to self-hosting.

• Cons:

  • A newer platform compared to Firebase, so its feature set is still maturing.
  • Can have a steeper learning curve for developers not familiar with PostgreSQL.

3. PocketBase ⚡

PocketBase is a unique, lightweight BaaS platform packaged as a single-file binary that includes a Go backend and an embedded SQLite database. It’s a great choice for quick prototypes and small-to-medium-sized applications. PocketBase supports OAuth2 authentication, which means you can easily implement Google Sign-in. Because it’s self-hosted, you have full control over your data and infrastructure.

• Pros:

  • Extremely simple and fast to deploy (just one file).
  • Built-in features (auth, database, file storage) work out of the box.
  • Free to use (you only pay for your hosting costs).
  • Offers a real-time API out of the box.

• Cons:

  • Not a managed service, so you are responsible for hosting, scaling, and backups.
  • The embedded SQLite database may not be suitable for large-scale, high-concurrency applications.
  • Doesn’t have a built-in serverless functions feature like Firebase or Supabase.

AaaS

That’s a great question, as it gets to the heart of a broader category of services beyond just pure “BaaS” platforms. When you need robust user management, including social sign-in and email verification, but don’t need the entire suite of backend services (like a database, file storage, etc.), you’re looking for an Authentication-as-a-Service (AaaS) or Identity and Access Management (IAM) provider.

These services specialize in handling user authentication and authorization, and they often integrate with your existing backend and application architecture. Here are some of the most popular and powerful options:

1. Clerk 💼

Clerk is a modern and developer-friendly platform that focuses on providing a seamless, full-stack user management experience. It’s particularly popular with front-end developers using frameworks like Next.js, as it provides pre-built, customizable UI components for sign-up, sign-in, user profiles, and more. It offers a generous free tier and is known for its excellent developer experience.

• Key Features:
  • Pre-built UI components: This is a huge time-saver. You can drop in components for authentication flows, user profiles, and organization management.
  • Full-stack integration: It provides SDKs for both front-end and back-end frameworks, ensuring secure and seamless authentication.
  • Extensive authentication methods: Supports Google, GitHub, and other social sign-ins, along with email/password, magic links, and more.
  • Email and SMS verification: Built-in email verification and password reset flows.

2. Okta 🏢

Okta is a massive, enterprise-grade identity platform. It’s a leader in the IAM space, focusing on both workforce identity (managing employee access) and customer identity (CIAM) for your applications. Okta’s solutions are incredibly comprehensive, scalable, and secure. They offer a huge range of features, from simple social login to complex B2B authentication and single sign-on (SSO).

• Key Features:
  • Enterprise-grade security: Provides robust features like multi-factor authentication (MFA), threat detection, and advanced session management.
  • Highly customizable: You can configure authentication flows with “rules” and “hooks” to fit complex business logic.
  • Wide protocol support: Supports all major identity protocols, including OAuth 2.0, OpenID Connect (OIDC), and SAML.
  • Extensive integrations: Integrates with thousands of applications and services out of the box.
  • Email verification: Handles email verification and other user management tasks.

3. Auth0 (by Okta) 🚀

Auth0 was acquired by Okta and is often considered the developer-centric, more flexible arm of the company. It’s known for its powerful, yet easy-to-use platform that allows developers to add authentication and authorization to their applications with minimal effort. It’s a great middle ground between the full BaaS platforms and the more complex enterprise solutions.

• Key Features:
  • Universal Login: Provides a customizable hosted login page, so you don’t have to build your own UI.
  • Actions and Rules: Allows for deep customization of the authentication flow using serverless functions.
  • Wide range of social connections: Supports Google and many other social providers, including enterprise connections.
  • Email verification: Built-in and configurable email verification and password reset flows.

4. Logto 🦊

Logto is a strong, open-source alternative to the proprietary AaaS platforms. It’s a self-hostable identity platform that provides a complete set of features for authentication and user management. Because it’s open-source, it’s a great choice for developers who want more control over their data and infrastructure without the vendor lock-in of a managed service.

• https://logto.io/

Modern auth infrastructure for developers

Logto adds multi-tenancy, enterprise SSO, and RBAC to your SaaS or AI apps. All with OIDC and OAuth 2.1 made simple, fast, and developer-friendly.

• Key Features:
  • Open-source and self-hostable: Gives you full ownership and control.
  • All-in-one: Includes authentication, authorization, user management, and multi-tenancy.
  • Framework-free: Provides SDKs for a wide range of languages and frameworks.
  • Customizable login experiences: You can tailor the user-facing parts of the platform to match your brand.

Comparison and Summary

FAQ

How to create an SliDev-Editor

I got this after the first iteration:

git init
git branch -m main
git config user.name
git config --global user.name "JAlcocerT"
git config --global user.name
git add .
git commit -m "Initial commit: Starting slidev-editor via NextJS and ToastUI"

#sudo apt install gh
gh auth login
gh repo create slidev-editor --private --source=. --remote=origin --push

#git init && git add . && git commit -m "Initial commit: Starting astro editor via NextJS and ToastUI" && gh repo create astro-editor --private --source=. --remote=origin --push

• https://jalcocert.github.io/JAlcocerT/creating-presentations-with-ai/#slidev

node --version

npm init slidev #yarn create slidev
npm run dev
#npm run dev -- --host 0.0.0.0 --port 4321 #http://192.168.1.11:4321/

#rm -rf .git
npm run build
#cd ./dist
#npx serve

KPIs for SaaS

LTV CAC

People say to aim for LTV > 3*CAC