huv1k / nextjs-auth-prisma

Full-stack boilerplate template.

Hey, I'm Lukáš aka Huvik 👋

I am full stack developer currently working in Productboard. I am passionated about React, GraphQL, Typescript and Open source.

Previously I worked in Vercel as a product developer and Next.js developer and implemented API routes. Before that I worked in Prisma on Prisma Admin predecessor of Prisma Studio.

I really love music mostly DNB and run a private Telegram channel for sharing great DJ sets. I am a proud father, love hiking and everything around mountains.

Links:

• Twitter
• Website
• Speaking

nextjs-auth-prisma's Issues

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

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.