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

Wrap your own sign-up component with SignUpProvider

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

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

Make sign-up public route

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

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

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

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-up page is located.

.env
NEXT_PUBLIC_SIGN_UP_URL='/sign-up'

Last updated on

On this page

Wrap your own sign-up component with SignUpProviderMake sign-up public routeUpdate environment variables