Client and Server components

Understanding the two approaches for implementing authentication with Light-Auth

Light-Auth requires an SSR framework for all authentication logic. The server-side configuration is mandatory, but you have flexibility in how you implement the login/logout UI in your application.

Server-Side and Client-Side components: Understanding the Difference

Light-Auth offers two approaches for implementing authentication in your application

Light-Auth is designed for server-side rendered (SSR) applications, where the core authentication logic runs on the server. However, you have flexibility in how you implement the user interface for login and logout operations:

Server-Side Approach

Using the exported functions from your server configuration directly in server components, API routes, or server actions. This approach delegates all authentication logic to the server.

Maximum security

Client-Side Approach

Using the client-side wrapper functions to call authentication methods directly from client components. This approach still uses the server-side logic but provides a more convenient API for client components.

Better developer experience

Important: Regardless of which approach you choose, Light-Auth still requires server-side rendering and the server-side configuration. The client-side approach is just a convenient wrapper around the server-side functionality.

Server-Side Components

Using server components, API routes, or server actions for authentication

With the server-side approach, you use the functions exported from your Light-Auth configuration directly in server components, API routes, or server actions.

This approach starts all the logic from the server.

Server-Side Configuration

/app/auth.ts

import { Google } from "arctic";
import { CreateLightAuth } from "@light-auth/nextjs";

const googleProvider = {
  providerName: "google",
  arctic: new Google(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    "http://localhost:3000/api/auth/callback/google"
  ),
};

export const { providers, handlers, signIn, signOut, getAuthSession, getUser } = CreateLightAuth({providers: [googleProvider]});

Using Server Actions

/app/api/login/action.ts (Server Action)

"use server";

import { signIn, signOut } from "@/lib/auth";

export async function login(providerName: string, callbackUrl: string = "/") {
  return await signIn(providerName, callbackUrl);
}

export async function logout(callbackUrl: string = "/", revokeToken: boolean = false) {
  return await signOut(revokeToken, callbackUrl);
}

Form Submission from a page using inline action

import { signIn } from "@/lib/auth";
export default function LoginPage() {
  return (
    <div>
      <form
        action={async () => {
          "use server";
          await signIn("google", "/profile");
        }}
      >
        <button type="submit">login using a form action</button>
      </form>
    </div>
  );
}

Call from a client component

/components/client-login-action-button.tsx

"use client";

import { login } from "@/app/api/login/action";

export function ClientLoginActionButton({ children, providerName, callbackUrl }: { children: React.ReactNode; providerName: string; callbackUrl: string }) {
  return (
    <button type="button" onClick={() => login(providerName, callbackUrl)}>
      {children}
    </button>
  );
}

Advantages of Server-Side Approach

Maximum security as all authentication logic stays on the server
Cleaner separation of concerns between client and server
Better for applications with complex authentication requirements
Easier to implement server-side redirects and error handling

Choosing the Right Approach

Guidelines for deciding between server-side and client-side authentication

Both approaches have their strengths and can be used together in the same application. Here are some guidelines to help you choose the right approach for your needs:

Choose Server-Side When:

You need maximum security for authentication flows
You're working primarily with server components
You need complex authentication logic with custom validation
You want to minimize client-side JavaScript
You're implementing middleware for route protection

Choose Client-Side When:

You're working primarily with client components
You need to integrate with client-side state management
You want a more interactive user experience
You're a frontend developer
You need to update UI based on authentication state

For most applications, a hybrid approach works best. Use server-side authentication for critical operations and route protection, and use client-side authentication for interactive UI components and user experience enhancements.