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.

nextjs-auth-prisma's Issues

Unusable template because of swc plugin

when running yarn dev i am getting following error.
Probable cause of issue - commit link
Some reference issue - formatjs/formatjs#3589

thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: LayoutError', /home/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/rkyv-0.7.37/src/impls/core/mod.rs:265:67
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/shivam/personal-projects/tabhero-webapp/node_modules/next/dist/client/next-dev.js")'

Caused by:
    0: failed to invoke `/Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm` as js transform plugin at /Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm
    1: RuntimeError: call stack exhausted
    2: stk_ovf', /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.260.23/src/plugin.rs:219:14
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/shivam/personal-projects/tabhero-webapp/node_modules/next/dist/client/router.js")'

Caused by:
    0: failed to invoke `/Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm` as js transform plugin at /Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm
    1: RuntimeError: unreachable
    2: unreachable', /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.260.23/src/plugin.rs:219:14
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/Users/shivam/personal-projects/tabhero-webapp/node_modules/next/dist/client/dev/amp-dev.js")'

Caused by:
    0: failed to invoke `/Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm` as js transform plugin at /Users/shivam/personal-projects/tabhero-webapp/node_modules/@graphql-codegen/client-preset-swc-plugin/swc_plugin.wasm
    1: RuntimeError: out of bounds memory access
    2: heap_get_oob', /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.260.23/src/plugin.rs:219:14
error Command failed with exit code 1.

Generate GraphQL hook per `*.graphql` file

This is going to reduce bundle, instead of using one big generated file, which going to be injected in pages where we don't use all operations.

Unhandled errors and wrong types in the context

With the current implementation, the demo server (and also any attempt for running this locally) returns An unexpected error has occurred..

I did a quick investigation and found out that this error is a result of a combination of issues on both the client and server.

Error Handling

nextjs-auth-prisma/src/pages/index.tsx

Line 9 in bf65529

const [{ fetching, data }] = useViewrQuery()

Here, we are ignoring the error object, therefore there can be cases where fetching === false and data is not an empty object, but data is not the object that it should be; As a result, React would try to render the Viewer component and would raise an unhandled exception because data.viewer is null.

To solve this issue, we can choose a more defensive approach and make sure that error is empty and data.viewer isn't null.

Auth (server-side)

If the user is not authenticated, the token variable in the line below would be null:

nextjs-auth-prisma/src/lib/nexus/context.ts

Line 43 in bf65529

const token = (await getToken({ req, secret })) as JwtToken

The problem is viewer resolver (code below), assumes that id is always present; Therefore, the resolver tries to invoke findUnique method with the id variable from context, which would be undefined for unauthenticated users. In absence of the id, the server returns an error to the client, expressing the condition that passed to the findUnique method is wrong.

nextjs-auth-prisma/src/lib/nexus/types/user.ts

Lines 16 to 21 in bf65529

	t.field('viewer', {
	type: 'User',
	resolve: async (_, {}, { prisma, id }) => {
	return prisma.user.findUnique({ where: { id } })
	},
	})

A better implementation would be, again, choosing a more defensive approach and informing the client that an unauthenticated user cannot request for viewer's info, by raising a custom error.

---

I'd be glad if you comment on the mentioned problems. Also, I'm not aware of your plans for this boilerplate but, if you think that these problems should be fixed, I'd be happy to send a PR.

And BTW, thanks for the boilerplate.

Move to the new Codegen client preset

We released the new Codegen client preset which is now the recommended way to use Codegen on the frontend.
We would love to support you upgrading to it and to learn from your feedback on it:
https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen