Secure Authentication for Next.js

TernSecure simplifies Firebase Authentication integration in your Next.js projects. Built for Next.js 13, 14, and 15.0.3, with full support for the App Router.

Get Started GitHub

Key Features

Easy Integration

Seamlessly integrate Firebase Authentication into your Next.js projects with minimal setup.

Server & Client Support

Manage authentication on both server-side and client-side with ease.

Custom Claims

Effortlessly handle and verify custom claims for advanced authorization.

Token Management

Simplified ID token handling and automatic refresh mechanisms.

TypeScript Ready

Full TypeScript support for a type-safe development experience.

Next.js 13+ Compatible

Designed to work seamlessly with Next.js versions 13, 14, and 15.0.3, including full App Router support.

Quick Start

1. Install the package

npm install @tern-secure/nextjs@latest

2. Set up TernSecureProvider

Import and set up TernSecure in your Next.js App Router project:

// app/layout.tsx
import {TernSecureProvider} from '@tern-secure/nextjs'
export default function RootLayout ({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <TernSecureProvider>
          {children}
        </TernSecureProvider>
      </body>
    </html>
  )
}

3. Use TernSecure in a client-side component

Import and use TernSecure hooks in your client-side components:

// app/page.tsx
'use client'
import { useAuth } from '@tern-secure/nextjs'
export default function Home()
  const { user, isLoaded = useAuth()
  if (!isLoaded) return <div>Loading...</div>
  return (
    <div>
        <p>Welcome, {user.email}!</p>
    </div>
  );
}

Ready to Secure Your Next.js App?

Get started with TernSecure today and simplify your authentication process.

Get Started