# Prisma BetterAuth En Next.js-applikation som demonstrerar integration mellan **BetterAuth** och **Prisma** för autentisering, användarroller och säker användarhantering. --- ## Teknologier - **Next.js 16** – React-ramverk med App Router - **BetterAuth 1.3** – Autentiseringsbibliotek - **Prisma** – ORM för databasåtkomst - **PostgreSQL** – Relationsdatabas - **TypeScript** – Typat JavaScript - **Tailwind CSS** – Utility-first CSS-ramverk - **shadcn/ui** – UI-komponentbibliotek - **React Hook Form** – Formulärhantering - **Zod** – Schema- och inputvalidering --- ## Funktioner ### Autentisering - Registrering via e-post & lösenord - Inloggning med sessionshantering via cookies - Automatisk omdirigering baserat på auth-status ### Användarroller - Roller: `user` (default) och `admin` - Rollbaserad åtkomstkontroll - Admin-dashboard för hantering av användare ### Admin-funktionalitet - Lista alla användare - Visa användarinfo: namn, e-post, roll, verifieringsstatus - Skyddade administratorsidor --- ## Installation ### 1. Klona repositoryt ```bash git clone cd prisma-betterauth ## Installation 1. Klona repositoryt: ```bash git clone cd prisma-betterauth ``` 2. Installera beroenden: ```bash npm install ``` 3. Konfigurera miljövariabler: Skapa en `.env.local` fil i roten av projektet: ```env DATABASE_URL="postgresql://username:password@localhost:5432/database_name" ``` 4. Kör Prisma-migreringar: ```bash npx prisma migrate dev ``` 5. Generera Prisma-klient: ```bash npx prisma generate ``` 6. Starta utvecklings-servern: ```bash npm run dev ``` ## Projektstruktur ``` src/ ├── app/ │ ├── admin/ # Admin-dashboard (skyddad ruta) │ ├── api/auth/ # BetterAuth API-rutter │ ├── logga-in/ # Inloggningssida │ ├── registrera/ # Registreringssida │ ├── mina-sidor/ # Användarprofil │ ├── layout.tsx # Root-layout med navbar │ └── page.tsx # Startsida ├── components/ │ ├── layout/ │ │ ├── navbar.tsx # Huvudnavigering med auth-status │ │ └── navbar-wrapper.tsx │ └── ui/ # shadcn/ui komponenter ├── lib/ │ ├── auth.ts # BetterAuth-konfiguration │ ├── auth-client.ts # Klient-side auth-funktioner │ ├── prisma.ts # Prisma-klient │ └── utils.ts # Hjälpfunktioner └── types/ └── auth.d.ts # TypeScript-typer för auth ``` ## Databas-schema ### User - `id`: UUID primärnyckel - `name`: Användarens namn (valfritt) - `email`: E-postadress (unik) - `emailVerified`: Boolean för e-postverifiering - `password`: Hashat lösenord - `role`: Användarroll (`user` eller `admin`) - `createdAt`/`updatedAt`: Tidsstämplar ### Account - Länkar användare till autentiseringsleverantörer - Stöder flera autentiseringsmetoder ### Session - Hanterar användarsessioner - Automatisk cleanup av utgångna sessioner ## Användning ### Registrering 1. Navigera till `/registrera` 2. Fyll i namn, e-post och lösenord 3. Klicka på "Registrera" 4. Omdirigeras till inloggningssidan ### Inloggning 1. Navigera till `/logga-in` 2. Fyll i e-post och lösenord 3. Klicka på "Logga in" 4. Omdirigeras till startsidan eller admin-sidan (beroende på roll) ### Admin-åtkomst 1. Logga in med ett konto som har `role: "admin"` 2. Navigera till `/admin` 3. Se lista över alla användare ## API-rutter ### Autentisering - `GET/POST /api/auth/[...all]` - BetterAuth API Alla autentiseringsoperationer hanteras genom BetterAuths API-rutter. ## Säkerhet - Lösenord hashas automatiskt av BetterAuth - Sessioner hanteras säkert med HTTP-only cookies - Rollbaserad åtkomstkontroll på server-sidan - Input-validering med Zod-scheman ## Utveckling ### Tillgängliga kommandon ```bash npm run dev # Starta utvecklings-server npm run build # Bygg för produktion npm run start # Starta produktions-server npm run lint # Kör ESLint ``` ### Prisma-kommandon ```bash npx prisma studio # Öppna Prisma Studio npx prisma migrate dev # Kör migreringar npx prisma generate # Generera Prisma-klient npx prisma db push # Pusha schema till databas ``` ## Konfiguration ### BetterAuth Konfigurerad i `src/lib/auth.ts` med: - PostgreSQL-adapter - E-post och lösenordsautentisering - Anpassade användarfält (role) ### Prisma Konfigurerad i `prisma/schema.prisma` med: - PostgreSQL som databasprovider - User, Account och Session-modeller ## Felsökning ### Vanliga problem 1. **Kan inte logga in** - Kontrollera att databasen är igång - Verifiera att användaren finns i databasen - Kontrollera att lösenordet är korrekt 2. **Admin-sidan otillgänglig** - Kontrollera att användaren har `role: "admin"` - Uppdatera användarrollen i Prisma Studio om nödvändigt 3. **Session fungerar inte** - Kontrollera att cookies är aktiverade - Verifiera att `NEXTAUTH_SECRET` är satt (om används) ## Licens Detta projekt är privat och avsett för utbildningsändamål. # or pnpm dev # or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. # BetterAuth-Prisma ```