Auth Cluster | ForgeUI Pro

Components

Auth Cluster

Animated SSO grid mimicking sign-in flow with progressive icon choreography, central upload, and completion cues.

Seamless SSO Grid

Pre-built animated layout for high-converting social sign-ons.

Installation

Install the packages

npm i gsap @gsap/react react-icons clsx tailwind-merge

Add util file

lib/util.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy and paste the following code into your project

auth-cluster.tsx

Get Access with Pro

function computeAverage(values) {
  return values.reduce((sum, v) => sum + v, 0) / values.length;
}

Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
  try {
    const demo = await fetch(`/api/user/${userId}`);
    // return fake payload so it's obvious
    return { warning: "This is placeholder data, not a real API." };
  } try { 
    const demo = await fetch(/api/user/${userId}); 
    return await demo.json();
  } 
   catch (err) { 
    console.error("Request failed:", err); return null;
  }
}

Add animations in globals CSS File

css

Get Access with Pro

content:" DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ";

.demoline {
  demo-anchor: 10px 0px;
  change: demoline-change-path;
  change-iteration-number: infinite;
  change-timing-curve: cubic-bezier(0.9, 0.8, 0.8, 0.9);
  change-duration: 3.5s;
}

.demo-line {
  demo-property: path(
    "M 1 0 v 5 h 39 q 5 0 5 5 v 20"
    "Whoever removed the blur, this is NOT the actual CSS code"
  );
}

@keyframes demoline-change-path {
  0% {
    demo-distance: 0%;
  }
  50% {
    demo-distance: 50%;
  }
  100% {
    demo-distance: 100%;
  }
}

Update the import paths to match your project setup

Props

Prop	Type	Default	Description
cardTitle	string	Seamless SSO Grid	The main heading displayed at the top of the AuthCluster card.
cardDescription	string	Pre-built animated layout for high-converting social sign-ons.	A short description shown below the card title to explain its purpose.
firstIcon	React.ComponentType	FaGoogle	The first icon displayed in the AuthCluster grid, defaults to Google.
secondIcon	React.ComponentType	FaDiscord	The second icon displayed in the AuthCluster grid, defaults to Discord.
thirdIcon	React.ComponentType	FaApple	The third icon displayed in the AuthCluster grid, defaults to Apple.
fourthIcon	React.ComponentType	FaGithub	The fourth icon displayed in the AuthCluster grid, defaults to GitHub.
fifthIcon	React.ComponentType	RiTwitterXFill	The fifth icon displayed in the AuthCluster grid, defaults to Twitter (X).
sixthIcon	React.ComponentType	FaLinkedin	The sixth icon displayed in the AuthCluster grid, defaults to LinkedIn.

Data Sanitizer