Custom Sign-In for your Next.js app with TernSecure

Wrap your own sign-in component with SignInProvider

app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@tern-secure/nextjs";

export default function Page() {
  return  <SignIn />
}

Make sign-in public route

if you are using Next.js 15 middleware.ts should be renamed to proxy.ts

This is an example of proxy without protecting route.

proxy.ts
import {
  ternSecureProxy,
  createRouteMatcher,
} from "@tern-secure/nextjs/server";

const publicPaths = createRouteMatcher([
  "/api/auth/(.*)",
  "/sign-in(*)", 
]);

export const config = {
  matcher: [
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    "/(api|trpc)(.*)",
  ],
};

export default ternSecureProxy();

Update environment variables

Set the following environment variables to tell TernSecure where your sign-in page is located.

.env
NEXT_PUBLIC_SIGN_IN_URL='/sign-in'

Last updated on

On this page

Wrap your own sign-in component with SignInProviderMake sign-in public routeUpdate environment variables