next-firebase-auth-edge

The library provides specific implementations for various Next.js environments and authentication tasks. Key usage areas include:

Next.js Integration Patterns

• Authentication Middleware: Protecting routes at the edge.
• Server Components: Accessing auth state in the App Router.
• App Router API Route Handlers: Using auth in route.ts files.
• Pages Router API Routes: Using auth in api/ directory files.
• getServerSideProps: Accessing auth state in the Pages Router.
• Client-Side APIs: Using auth state within React components.

Authentication Lifecycle & Management

• Redirect Helper Functions: Managing user flow based on auth state.
• Refreshing credentials: Updating session tokens.
• Removing credentials: Logging users out.

Deployment & Advanced Configuration

• Google Cloud Run: Specific considerations for Cloud Run environments.
• Firebase Hosting: Specific considerations for Firebase Hosting.
• Debug mode: Enabling detailed logging for troubleshooting.
• Firebase API Key domain restriction: Configuring security for restricted API keys.
• Advanced usage: For complex implementation requirements.

To explicitly log a user out or clear authentication state within Middleware or API routes, use the removeCookies function from next-firebase-auth-edge/next/cookies. This function attaches expired Set-Cookie headers to the NextResponse object, instructing the browser to delete the specified cookies.

When using removeCookies, you must provide the cookieName and cookieSerializeOptions to match the configuration of your existing authentication cookies.

import {NextRequest, NextResponse} from 'next/server';
import {removeCookies} from 'next-firebase-auth-edge/next/cookies';

//...
function forceLogout(request: NextRequest) {
  const response = NextResponse.redirect(new URL('/login', request.url));

  removeCookies(request.headers, response, {
    cookieName: 'AuthToken',
    cookieSerializeOptions: {
      path: '/',
      httpOnly: true,
      secure: false,
      sameSite: 'lax' as const,
      maxAge: 12 * 60 * 60 * 24
    }
  });

  return response;
}

To share user data between server and client components in Next.js, you can implement a custom AuthProvider component. This component uses a React Context (typically AuthContext) to wrap your application, allowing client components to access the current user state.

This pattern requires the AuthProvider to be a Client Component ('use client'). You pass the user data (retrieved on the server) as a prop to the provider, which then populates the context for all descendant client components.

'use client';

import * as React from 'react';
import {AuthContext, User} from './AuthContext';

export interface AuthProviderProps {
  user: User | null;
  children: React.ReactNode;
}

export const AuthProvider: React.FunctionComponent<AuthProviderProps> = ({
  user,
  children
}) => {
  return (
    <AuthContext.Provider
      value={{
        user
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

To refresh authentication cookies within Next.js Server Actions, use refreshServerCookies from next-firebase-auth-edge/next/cookies.

Important: When using headers() in a Server Action, you must wrap it in new Headers() to satisfy the function signature.

'use server';

import {cookies, headers} from 'next/headers';
import {getTokens} from 'next-firebase-auth-edge';
import {refreshServerCookies} from 'next-firebase-auth-edge/next/cookies';

export async function performServerAction() {
  const cookieStore = await cookies();
  const tokens = await getTokens(cookieStore, commonOptions);

  if (!tokens) {
    throw new Error('Unauthenticated');
  }

  // Wrap headers() in new Headers() for Server Actions compatibility
  await refreshServerCookies(
    cookieStore,
    new Headers(await headers()),
    commonOptions
  );
}