Theo's Typesafe Cult•16mo ago

Refreshing NextAuth Discord provider user details

Not sure how to phrase this so will try to describe in detail: My website uses the nextauth discord provider (and no other sign in). When a user with an account changes their discord name and then signs in, it doesn't update. When a user changes their discord profile picture (that i'm using as their profile picture on my website) the link breaks (see image). Is there a way to fetch the user's current username/profile picture on signin and update the database? Thanks

Solution:

You can type it properly like this (refer the added lines) ```ts import type { DiscordProfile } from "next-auth/providers/discord"; ...

Jump to solution

11 Replies

shiroyasha9•16mo ago

I'm pretty sure that you get the latest profile details in the signIn callback, and from there you can update your database values. You get the profile param there which is what you are looking for. https://next-auth.js.org/configuration/callbacks#sign-in-callback

Callbacks | NextAuth.js

Callbacks are asynchronous functions you can use to control what happens when an action is performed.

hyhyOP•16mo ago

this was really helpful, thank you - profile seems to be the wrong type though - logging out profile helped me find that the new url should be profile.image_url, but the profile only has 4 properties (image doesn't actually exist)

hyhyOP•16mo ago

not sure where this typegen is coming from

hyhyOP•16mo ago

disgusting code but it will have to do for now

async signIn({ user, profile }) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
  const { username, image_url } = profile as any
  await prisma.user.update({
    where: { id: user.id },
    data: { name: username as string, image: image_url as string },
  })
  return true
},

async signIn({ user, profile }) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
  const { username, image_url } = profile as any
  await prisma.user.update({
    where: { id: user.id },
    data: { name: username as string, image: image_url as string },
  })
  return true
},

i'm sorry for the crime i've comitted if anyone can help me get the correct profile type i'd appreciate it

Solution

shiroyasha9•16mo ago

You can type it properly like this (refer the added lines)

import type { DiscordProfile } from "next-auth/providers/discord";

declare module "next-auth" {
  interface Profile extends DiscordProfile { }
}

import type { DiscordProfile } from "next-auth/providers/discord";

declare module "next-auth" {
  interface Profile extends DiscordProfile { }
}

shiroyasha9•16mo ago

Add the lines to next-auth.d.ts file

hyhyOP•16mo ago

awesome, thanks so much @shiroyasha9 that's looking good now ❤️

shiroyasha9•16mo ago

Glad to be here 🤝🏼

Mugetsu•16mo ago

Hey, whats is this theme ? 😉

shiroyasha9•16mo ago

"I'm a vim user btw" 🤪 the theme is catppuccin, there is a VS Code extension for it as well!

Mugetsu•16mo ago

Sweet, thanks ! 😉

Gaming

Programming

Refreshing NextAuth Discord provider user details