Theo's Typesafe Cult•2y ago

NextAuth auth flow causes Next.js 13 dev server to crash without throwing any errors

I'm building a note-taking app with ct3a (partly inspired by Jack Herrington's awesome T3 video) but I'm having a really weird issue with NextAuth where the auth flow succeeds, OAuth2 callback route is hit, but then for some reason the Next.js dev server crashes without throwing any errors whatsoever. I'm positive the auth flow is working properly because running NextAuth in debug mode shows a successful OAuth2 callback response with data - but it's still not throwing errors. Here's a slightly censored version of the console output from NextAuth:

[next-auth][debug][OAUTH_CALLBACK_RESPONSE] {
  profile: {
    id: '524646212624711721',
    name: 'lucca.dr',
    email: ***REDACTED***,
    image: 'https://cdn.discordapp.com/avatars/524646212624711721/a_6b40cd1aa88086a7fdbf07b5b6c8e2e0.gif'
  },
  account: {
    provider: 'discord',
    type: 'oauth',
    providerAccountId: ***REDACTED***,
    access_token: ***REDACTED***,
    expires_at: 1677628006,
    refresh_token: ***REDACTED***,
    scope: 'identify email',
    token_type: 'Bearer'
  },
  OAuthProfile: {
    id: '524646212624711721',
    username: 'lucca.dr',
    display_name: null,
    avatar: 'a_6b40cd1aa88086a7fdbf07b5b6c8e2e0',
    avatar_decoration: null,
    discriminator: '0001',
    public_flags: 4194304,
    flags: 4194304,
    banner: 'a_20986b885071b694e6e9a401e3308c5c',
    banner_color: '#2e3d72',
    accent_color: 3030386,
    locale: 'en-US',
    mfa_enabled: true,
    premium_type: 2,
    email: ***REDACTED***,
    verified: true,
    image_url: 'https://cdn.discordapp.com/avatars/524646212624711721/a_6b40cd1aa88086a7fdbf07b5b6c8e2e0.gif'
  }
}

[next-auth][debug][OAUTH_CALLBACK_RESPONSE] {
  profile: {
    id: '524646212624711721',
    name: 'lucca.dr',
    email: ***REDACTED***,
    image: 'https://cdn.discordapp.com/avatars/524646212624711721/a_6b40cd1aa88086a7fdbf07b5b6c8e2e0.gif'
  },
  account: {
    provider: 'discord',
    type: 'oauth',
    providerAccountId: ***REDACTED***,
    access_token: ***REDACTED***,
    expires_at: 1677628006,
    refresh_token: ***REDACTED***,
    scope: 'identify email',
    token_type: 'Bearer'
  },
  OAuthProfile: {
    id: '524646212624711721',
    username: 'lucca.dr',
    display_name: null,
    avatar: 'a_6b40cd1aa88086a7fdbf07b5b6c8e2e0',
    avatar_decoration: null,
    discriminator: '0001',
    public_flags: 4194304,
    flags: 4194304,
    banner: 'a_20986b885071b694e6e9a401e3308c5c',
    banner_color: '#2e3d72',
    accent_color: 3030386,
    locale: 'en-US',
    mfa_enabled: true,
    premium_type: 2,
    email: ***REDACTED***,
    verified: true,
    image_url: 'https://cdn.discordapp.com/avatars/524646212624711721/a_6b40cd1aa88086a7fdbf07b5b6c8e2e0.gif'
  }
}

Currently my NextAuth config has Google and Discord as OAuth providers, but they both end up crashing the Next.js dev server inexplicably. Here is the repo - relevant code can be found in the editor branch. No detailed README yet but it's just a standard ct3a Next.js project: Prisma, Tailwind, NextAuth, TRPC https://github.com/ChromeUniverse/luccanotes/tree/editor

GitHub

GitHub - ChromeUniverse/luccanotes at editor

A full-stack note-taking app for Markdown lovers ❤️ - GitHub - ChromeUniverse/luccanotes at editor

16 Replies

barry•2y ago

share github repo

luccaOP•2y ago

yep just pushing some changes to a new branch

barry•2y ago

ima spin up postgres and run it see what happens

luccaOP•2y ago

okie dokie, much appreciated - I've added some more info in the main post Oh, interestingly enough, Vercel shows some errors on build Ah never mind, it's just complaining that I forgot to set the env vars on Vercel but I don't think that's useful

luccaOP•2y ago

luccaOP•2y ago

I've added a dummy login button that invokes NextAuth's signIn() method

barry•2y ago

for me its saying its missing type defs for @codemirror\state

luccaOP•2y ago

Huh

barry•2y ago

fixed it idk what happened lol

luccaOP•2y ago

Wait that doesn't make sense

luccaOP•2y ago

https://www.npmjs.com/package/@codemirror/state

npm

@codemirror/state

Editor state data structures for the CodeMirror code editor. Latest version: 6.2.0, last published: 2 months ago. Start using @codemirror/state in your project by running npm i @codemirror/state. There are 263 other projects in the npm registry using @codemirror/state.

luccaOP•2y ago

look, @codemirror/state has built-in TS defs

barry•2y ago

i did pnpm i @codemirror/state and it worked, idk why it didnt install when i did pnpm i

luccaOP•2y ago

well shoot

barry•2y ago

so, i can login just fine but i did 1 change, i removed google cuz never set that shit up for oauth but ill try with it

luccaOP•2y ago

I just checked and @codemirror/state really wasn't in the package.json lol My bad

Gaming

Programming

NextAuth auth flow causes Next.js 13 dev server to crash without throwing any errors