Skip to content
← Back to Blog

Community

Friday, May 5th 2023

Authentication for the frontend cloud

​Clerk builds drop-in authentication for complete user management. Here, they explain how they've optimized their architecture for the frontend cloud.

Posted by

Avatar for colinclerk

Colin Sidoti

CEO, Clerk

We’re in the midst of the next big platform shift. Last generation we moved from server rooms to the cloud, and today we’re moving from the traditional, backend-oriented cloud to a new frontend cloud.

The frontend cloud is characterized by performance: It enables both faster application development and faster end-user interactions. Each element is critical to success in today’s ultra-competitive software market.

At Clerk, we build authentication for the frontend cloud. We saw the need arise as frameworks and hosts tailored to the frontend cloud grew in popularity, especially Next.js and Vercel. Legacy authentication tools were not built frontend-first, and their technical architecture usually undermines the goal of speeding up end-user interactions, since they’re slow at the edge.

We needed to reimagine authentication to embrace the architecture of framework-defined infrastructure. Let's explore how edge-native auth in the frontend cloud enables:

  1. Faster app development
  2. Better user experiences
  3. Powerful composability

Enabling faster application development

Clerk uses the frontend cloud to speed up application development with three key strategies:

  • Framework-specific SDKs. React is too versatile a library for a one-size-fits-all authentication solution. Our separate SDKs for Next.js, Expo, Remix, and more are essential to providing fast implementation and a natural developer experience. Clerk’s support for the Next.js App Router, including RSC, is now stable.
app/page.tsx
import { auth, currentUser } from '@clerk/nextjs';⁡𝅶‍‍𝅺⁡‍𝅴⁡𝅴𝅹‍‍⁢𝅵‍‍⁢𝅺𝅹⁡⁣⁠𝅹⁡⁣⁡⁠𝅷‍𝅹⁢𝅺𝅸‍‍‍𝅷‍‍𝅳⁡‍⁠‍‍⁢𝅵‍‍‍𝅺
export default async function Page() {
// Retrieve the active userId
const { userId } = auth();
// Retrieve the complete user object
const { firstName, lastName } = await currentUser();
return '...';
}
Clerk now supports the Next.js App Router.
  • A <Component/> is worth a thousand APIs. Just drop-in our <SignIn/> and <UserProfile/> components to get fully-functional, beautiful authentication UIs. Developers don’t need to implement our restful APIs in-house—our customizable components do that for them!
image.png