huv1k / nextjs-auth-prisma

Full-stack boilerplate template.

Next.js-auth-prisma boilerplate

Build bleeding-edge full-stack applications using Next.js, GraphQL, TypeScript and Prisma.

Getting started

1. Clone this project git clone https://github.com/huv1k/nextjs-auth-prisma
2. Install dependencies yarn install or npm install
3. Setup your local environment
4. Run application yarn dev or npm run dev
5. Profit 💰

Features

• 🐣 Simple: You can focus on building your product.
• ⚡️ Fast: Compile only what is needed and when is needed.
• 💍 Feature-rich: Code generation, automatic migrations, type-safety.
• 🛠 Customizable: You can easily change tools you are not familiar with.

Overview

I have created this boilerplate because there was a missing one with all features. Which would support fast development and easy deployment without sacrificing performance. This boilerplate is built on the best open-source tools out there:

• ⚡️ Next.js - The React framework for Production
• 🛠 TypeScript - Type-safety for your code
• 🤝 Prisma - ORM for accessing and managing your data
• 🛡 NextAuth.js - Authentication for Next.js
• 🦅 urql - Highly customisable GraphQL client with sensitive defaults
• ⚙️ GraphQL Code Generator - Generates code out of GraphQL schema
• 🧘‍♀️ GraphQL Yoga - Fully-featured GraphQL Server
• 💄 Prettier - Formatting your code
• 🤖 Dependabot - Keeping your dependencies up to date

Run Prisma migrations on save

This boilerplate works out of the box with automatic migrations for rapid prototyping. I described this in my article Improve prototyping speed of Prisma, you can check how it works under the hood.

Automatic GraphQL types generated

GraphQL types are automatically generated for data masking. This pattern is one of the best practise you should follow when building scalable applications. This pattern was first introduced by Relay.

Authentication using NextAuth.js

This boilerplate is configured to use GitHub authentication provider. NextAuth.js comes with a lot of different providers. You can choose, which providers suit your needs most.

Defining custom authorization rules

You can define authorization rules for your resolvers. You can follow Pothos's auth plugin documentation or checkout example in this repository.

Deployment

For deployment, you can use Vercel, this boilerplate works with Vercel out of the box! Use this template and then import Git repository inside Vercel dashboard.

Setup

Connect your database

This starter could be used with all databases supported by Prisma. I would suggest using PlanetScale, which has a nice generous free plan. You can follow Prisma getting started to get your database up and running.

NextAuth GitHub provider

You need to create GitHub OAuth App. You're going to provide Authorization callback URL like:

• Local development: http://localhost:3000/api/auth
• Production deployment: https://www.YOURDOMAIN.TLD/api/auth

Then you are going to copy Client ID and Client secret and fill your environment variables.