Next.js app router custom authentication

[hard warren]

Hi @lyric plaza. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To leverage React Server Components for building a custom authentication system that only deals with sensitive data on the server, you can follow these steps:

1. Create a Server Component for handling authentication logic. Since Server Components are not interactive and don't read from React state, you can use native JavaScript patterns like global singletons within module scope to share data between components (source (https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components)).

For example, create a module to handle authentication logic:

utils/auth.ts

export class Auth {
  // Implement your authentication logic here
}

2. Use the Auth class in your Server Components to authenticate users. For example, in your page or layout components:

app/users/layout.tsx

import { Auth } from '@utils/auth';

export async function UsersLayout() {
  const auth = new Auth();
  // Use the auth instance to authenticate users
  // ...
}

app/users/[id]/page.tsx

import { Auth } from '@utils/auth';

export async function DashboardPage() {
  const auth = new Auth();
  // Use the auth instance to authenticate users
  // ...
}

3. If you need to fetch user data during server-side rendering, you can use getServerSideProps to fetch the data and pass it to your components. Note that fetching user data in getServerSideProps will block rendering until the request to your authentication provider resolves. To prevent creating a bottleneck and increasing your TTFB (Time to First Byte), ensure your authentication lookup is fast (source (https://nextjs.org/docs/pages/building-your-application/routing/authenticating#authenticating-server-rendered-pages)).

By following these steps, you can build a custom authentication system that leverages React Server Components and keeps sensitive data on the server side.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: