{"library":"naystack","title":"Naystack: Next.js Full-Stack Toolkit","description":"Naystack is a full-stack utility library for Next.js applications, currently at version 1.7.26. It provides pre-built solutions for common web development challenges, including robust email-based authentication (with optional Google/Instagram OAuth), GraphQL API scaffolding, and file upload functionalities. The library is designed to be modular, allowing developers to integrate specific features as needed, and follows a 'bring-your-own database' philosophy, demonstrating integration with ORMs like Drizzle ORM in its examples. Naystack is actively maintained and focuses on providing a cohesive, opinionated yet flexible framework for server-side API routes and client-side React components within the Next.js ecosystem. Its key differentiator is providing integrated, end-to-end solutions for authentication, GraphQL, and file management without dictating the database layer.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install naystack"],"cli":null},"imports":["import { setupEmailAuth } from 'naystack/auth';","import { AuthWrapper } from 'naystack/auth/client';","import { useToken } from 'naystack/auth/client';","import { useSignUp } from 'naystack/auth/client';","import { ApolloWrapper } from 'naystack/graphql/client';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { setupEmailAuth } from 'naystack/auth';\nimport { AuthWrapper, useToken } from 'naystack/auth/client';\nimport { ApolloWrapper } from 'naystack/graphql/client';\nimport React from 'react';\n\n// --- Simulate a Drizzle ORM setup for the server-side --- \n// In a real app, this would be your database connection and schema\nconst db = { \n select: () => ({ from: () => ({ where: () => ([{ id: 'user-id-123', password: 'hashed-password' }]) }) }),\n insert: () => ({ values: () => ({ returning: () => ([{ id: 'new-user-id', password: 'new-hashed-password' }]) }) })\n};\nconst UserTable = { id: 'id', email: 'email', password: 'password' };\nconst eq = (a: any, b: any) => ({}); // Dummy eq function\n\n// --- Server-side (app/api/(auth)/email/route.ts) ---\n// Ensure process.env.SIGNING_KEY and process.env.REFRESH_KEY are set\nexport const { GET, POST, PUT, DELETE } = setupEmailAuth({\n getUser: async ({ email }) => {\n // Replace with your actual database query\n const [user] = await db.select({ id: UserTable.id, password: UserTable.password }).from(UserTable).where(eq(UserTable.email, email));\n return user;\n },\n createUser: async (data) => {\n // Replace with your actual database insertion\n const [user] = await db.insert(UserTable).values(data).returning({ id: UserTable.id, password: UserTable.password });\n return user;\n },\n onSignUp: async (userId, body) => {\n console.log(`User ${userId} signed up.`);\n }\n});\n\n// --- Client-side (app/layout.tsx) ---\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\n// --- Client-side (app/page.tsx or any client component) ---\n'use client';\n\nfunction DashboardButton() {\n const token = useToken();\n\n return (\n
\n {token ? (\n \n ) : (\n \n )}\n
Current Token: {token ? 'Present' : 'Not Present'}
\n
\n );\n}\n\n// To make the client component render within the quickstart context\nexport { DashboardButton };","lang":"typescript","description":"This quickstart demonstrates the core Naystack setup for authentication, combining server-side route handlers with client-side context providers and hooks. It simulates a basic Drizzle ORM integration for the server logic and shows how to wrap a Next.js application with `AuthWrapper` and `ApolloWrapper`, then conditionally render UI based on authentication state using `useToken()`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}