/prisma-next-auth-graphql-starter

Next.js boilerplate for passwordless authentication with Prisma and next-auth with apollo graphql api with style from tailwindcss

Primary LanguageTypeScriptMIT LicenseMIT

Fullstack starter with next-auth, prisma, next.js and graphql-shield

typescript code style: prettier linter: eslint

πŸš€ Getting started

  1. Setup a database.

    Use the predefined docker-compose.yml configuration for local postgres instance.

    docker-compose up -d

    don't forget about .env

    Also, you can use any DB supported by Prisma(docs)

  2. Start developing.

    Navigate into your new site’s directory install modules and start it up.

    npm i
    npm run dev
  3. Open the source code and start editing!

    Your site is now running at localhost:3000!

    Open the starter directory in your code editor of choice and edit src/pages/index.tsx. Save your changes, and the browser will update in real-time!

πŸ—ƒοΈ Database

Database toolkit

Starter use Prisma for db queries.

Migrations

  1. Modify your schema file.

    Open the starter directory in your code editor of choice and edit prisma/schema.prisma. Add Book model for example.

    model Book {
      id         String   @id @default(cuid())
      title      String
      authors    User[]   @relation(references: [id])
      published  Boolean  @default(false)
      content    String
      createdAt  DateTime @default(now())
      updatedAt  DateTime @updatedAt
    }
  2. Generate migration files.

    Use Prisma migrate tool.

    prisma migrate dev --create-only --name init

    You can find migration files in prisma/migrations.

  3. Apply migration.

    Use Prisma migrate tool.

    prisma migrate dev
  4. Generate new fresh Prisma client.

    npm run generate

More info about Prisma Migrate you can find in docs

🧐 Auth

  • Starter use next-auth - it's a complete open source authentication solution for Next.js applications.
  • For graphql queries protection and auth rules you can use graphql-shield. Starter has a basic setup for it.

βš’οΈ Bundled instruments

Prisma studio

Prisma Studio is a visual editor for your database. Open prisma studio interface:

npm run studio

Graphql playground

Starter use ApolloServer and it's provide graphql-playground in dev mode. You can find it on localhost:3000/api/graphql

Apollo Client Devtools

Starter use Apollo Client and it's provide apollo-client-devtools in dev mode. To use it you need to install browser extension:

Download for Firefox | Download for Chrome

πŸ“œ ENV

Use .env.local on production or .env.development on dev. Read more

# Database
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/prisma?schema=public"

# Auth providers
AUTH_SECRET="this-is-a-secret-value-with-at-least-32-characters"
NEXTAUTH_URL="http://localhost:3000"

PROVIDER_GITHUB_ID=""
PROVIDER_GITHUB_SECRET=""
PROVIDER_SMTP_HOST=""
PROVIDER_SMTP_PORT=""
PROVIDER_SMTP_USER=""
PROVIDER_SMTP_PASSWORD=""
PROVIDER_SMTP_FROM=""

πŸ’« Deploy

Before deploy, you need to set up a database.

Deploy with Vercel