Getting Started

Install

npm install @astra-void/auth-kit

Directory Structure

Set up your project like this:


📂 your-nextjs-app
│ app/
│  └─ api/
│     └─ auth/
│        └─ [...authkit]/
│           └─ route.ts
└─ middleware.ts

Setup

This setup assumes you’re using Prisma .

Define User Schema


// prisma/schema.prisma
 
model User {
  id             String    @id @default(uuid())
  email          String    @unique
  hashedPassword String
  createdAt      DateTime  @default(now())
  updatedAt      DateTime  @updatedAt
  passkeys       Passkey[]
}
 
model Passkey {
  id         String   @id @default(uuid())
  publicKey  Bytes
  userId     String
  webAuthnId Bytes    @unique
  counter    Int      @default(0)
  transports String
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
 
  user       User @relation(fields: [userId], references: [id])
 
  @@index([userId])
}

You can add custom fields (e.g. role, username, etc.) as needed. Just make sure your adapter and provider supports them.

After defining your schema, run the following commands to generate the Prisma client:

npx prisma migrate dev --name init && npx prisma generate

Environment Variables

Create a .env file in your project root with the following variables:


# .env
AUTHKIT_SECRET="your-secret-key"

Set Up API Handler


// app/api/auth/[...authkit]/route.ts
import { AuthKit } from "@astra-void/auth-kit";
import { CredentialProvider } from "@astra-void/auth-kit/providers";
import { PrismaAdapter } from "@astra-void/auth-kit/adapters";
import { prisma } from "@/lib/prisma";
 
export const handler = AuthKit({
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialProvider()
  ]
});

If you’re using a custom adapter or another database, see Adapters.
You can register multiple providers. See the Providers guide for details.

Set Up Middleware


// middleware.ts
import { AuthKitMiddleware } from "@astra-void/auth-kit/middleware";
 
const middleware = AuthKitMiddleware({
    // Define your authentication routes
});
 
export { middleware };

useSession Hook

You can use the useSession hook in your components to access the current session:


"use client";
 
import { useSession } from "@astra-void/auth-kit/react";
 
const { data: session } = useSession();
 
if (session.status === "loading") return <p>Loading...</p>;
if (session.status === "unauthenticated") <p>Please log in.</p>;
 
return <p>Welcome {session.user?.email}!</p>;