Sign In & Sign Out

How Light-Auth handles sign in and sign out flows.

Login Process Overview

Light-Auth provides two different patterns for implementing the login process in your application. Both approaches achieve the same result but offer different integration options depending on your application's architecture.

Server-Side Approach

Using the signIn() function exported from CreateLightAuth() to perform a server-side redirect. This is typically used within form actions or server components.

Server-side redirect

Client-Side Approach

Using the signIn() function exported from CreateLightAuthClient(). This approach still uses the server-side logic but provides a more convenient API for client components.

Client-side redirect

Both login patterns ultimately redirect the user to the OAuth provider's authorization page. After authentication, the user is redirected back to your application through the callback URL configured in your provider setup.

Login patterns

Using the server components

The signIn function is imported from your Light-Auth configuration (when calling CreateLightAuth()) and can be used to programmatically initiate the login process. This approach is ideal for server components or server actions.

./src/app/auth.ts

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

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

1
Basic Usage Using Server Actions (Next.js App Router)

./src/app/login-form.tsx

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

export default function LoginPage() {
  return (
    <div>
      <form
        action={async () => {
          "use server";
          await signIn("google");
        }}
      >
        <button type="submit">Google (using a form action)</button>
      </form>
    </div>
  );
}

2
Using Server Actions and a client component

/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);
}

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>
  );
}

URL Parameters

Parameter	Type	Description
`providerName`	string	provider name to use
`callbackUrl`	string	URL to redirect to after successful authentication (default to "/")

Logout Process Overview

Similar to the login process, Light-Auth provides two different patterns for implementing logout in your application. Both approaches achieve the same result but offer different integration options.

Using server components

The signOut function is imported from your Light-Auth configuration and can be used to programmatically initiate the logout process. This approach is ideal for server components or server actions.

Basic Usage Using Server Actions (Next.js App Router)

./src/app/logout-form.tsx

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

export default function LogoutPage() {
  return (
    <div>
      <form
        action={async () => {
          "use server";
          await signOut();
        }}
      >
        <button type="submit">Logout (using a form action)</button>
      </form>
    </div>
  );
}

signOut Function Options

Option	Type	Description
`revokeToken`	boolean	Whether to revoke the consent from the provider (if available)
`callbackUrl`	string	URL to redirect to after successful logout (default to "/")