What is Single Sign-On?

Frontend Single Sign-On (SSO) is a user authentication and authorization technology that enables users to log in to multiple applications or websites using a single set of credentials, without the need to re-enter or re-register. This approach enhances user experience, reduces maintenance costs, and improves security.

Introduction and Implementation of Single Sign-On Solutions

The main approaches to frontend SSO include the following:

Cookie-Based SSO

After successfully logging into the authentication center on Page A, a cookie is set: This is the most common SSO implementation. The principle relies on the browser's cookie mechanism. When a user logs into an application for the first time, a request is sent to the authentication center. After verifying the user's identity, the authentication center returns an encrypted cookie containing user information and an expiration period. The cookie's domain is set to the top-level domain (e.g., example.com), allowing it to be shared across applications under the same top-level domain (e.g., a.example.com and b.example.com). When the user accesses other applications, they check for a valid cookie. If it exists, they log in directly; if not, the user is redirected to the authentication center for login. This method is simple to implement but is limited to applications under the same top-level domain, has cross-domain issues, and imposes restrictions on the size and number of cookies.

Setting a cookie after successful login on Page A:

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Checking for the cookie on Page B:

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

Token-Based SSO

This is a stateless SSO implementation. The principle involves sending a request to the authentication center during the user's first login. After verifying the user's identity, the authentication center returns an encrypted token containing user information and an expiration period, which is stored in the browser's local storage (e.g., localStorage or sessionStorage). When the user accesses other applications, they check for a valid token. If it exists, they log in directly; if not, the user is redirected to the authentication center for login. This method supports cross-domain operations and is not restricted by cookies but requires additional storage space and network overhead. It also poses security risks, as stolen tokens can lead to identity misuse.

Storing the token in localStorage after a successful login on Page A:

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);

Checking for the token on other pages:

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);

OAuth 2.0-Based SSO

This approach uses the Authorization Code flow of OAuth 2.0. When a user logs into an application for the first time, a request is sent to the authentication center. After verifying the user's identity, the authentication center returns an authorization code and redirects to the application's callback URL. The application then sends the code to the authentication center to exchange it for an access token and refresh token containing user information and expiration periods. These tokens are stored in the browser's local storage. When the user accesses other applications, they check for a valid access token. If it exists, they log in directly; if not, the user is redirected to the authentication center for login. This method adheres to the OAuth 2.0 standard and supports multiple client types (e.g., web, mobile, desktop). However, it is more complex and requires multiple requests and redirects.

Sending an authorization request on Page A:

const authorizeUrl = `https://auth.example.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&response_type=code`;

// Redirect to the authentication login page
window.location.href = authorizeUrl;

Redirecting back to Page A's callback URL with the authorization code after successful login:

const redirectUri = 'https://app.example.com/callback';

// Generate the authorization code
const code = generateAuthorizationCode(userinfo);

// Redirect back to the application's callback URL
window.location.href = `${redirectUri}?code=${code}`;

Exchanging the authorization code for an access token on Page A:

const code = getQueryString('code');

// Send a request to the authentication center to get the access token
const tokenUrl = `https://auth.example.com/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}&grant_type=authorization_code`;

fetch(tokenUrl)
  .then((response) => response.json())
  .then((data) => {
    // Store the access token and refresh token
    localStorage.setItem('access_token', data.access_token);
    localStorage.setItem('refresh_token', data.refresh_token);

    // Log in directly
    login(data.userinfo);
  });

---

We are Leapcell, your top choice for hosting Node.js projects — we support file uploads up to 100 MB!

Leapcell is the Next-Gen Serverless Platform for Web Hosting, Async Tasks, and Redis:

Multi-Language Support

• Develop with Node.js, Python, Go, or Rust.

Deploy unlimited projects for free

• pay only for usage — no requests, no charges.

Unbeatable Cost Efficiency

• Pay-as-you-go with no idle charges.
• Example: $25 supports 6.94M requests at a 60ms average response time.

Streamlined Developer Experience

• Intuitive UI for effortless setup.
• Fully automated CI/CD pipelines and GitOps integration.
• Real-time metrics and logging for actionable insights.

Effortless Scalability and High Performance

• Auto-scaling to handle high concurrency with ease.
• Zero operational overhead — just focus on building.

Explore more in the Documentation!

Follow us on X: @LeapcellHQ