next-auth-v5 repo
Unanswered
Rex posted this in #help-forum
RexOP
Hi, is there any stable next-auth-v5 repo?
Because I am having errors in server components...
Because I am having errors in server components...
10 Replies
Oriental
what errors? i've been working with v5 for months without issues
@Oriental what errors? i've been working with v5 for months without issues
RexOP
Do you have a github repo?
Oriental
not right now! they are repos from my job org in github! but you can post the errors maybe i can help you.
@Oriental not right now! they are repos from my job org in github! but you can post the errors maybe i can help you.
RexOP
Hi, sorry I missed the chat...
the error I encounter is about getting en error while retrieving google image.
I get a 429
Sometime is working, sometime is not:
export const UserButton = () => {
const user = useCurrentUser();
console.log(user);
const [image, setImage] = useState<string>('');
useEffect(() => {
if (user) {
setImage(user?.image || '');
console.log('Image Requested');
}
}, []);
return (
#Unknown Channel
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src={image} />
I found that everytime I access this page, the user is retrieved 10 times (I'm in development).
Best practice here is to use useState also for the user and call it in the useEffect or is there a best option?
the error I encounter is about getting en error while retrieving google image.
I get a 429
Sometime is working, sometime is not:
export const UserButton = () => {
const user = useCurrentUser();
console.log(user);
const [image, setImage] = useState<string>('');
useEffect(() => {
if (user) {
setImage(user?.image || '');
console.log('Image Requested');
}
}, []);
return (
#Unknown Channel
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src={image} />
I found that everytime I access this page, the user is retrieved 10 times (I'm in development).
Best practice here is to use useState also for the user and call it in the useEffect or is there a best option?
Oriental
the image thing could be related to your auth config... could be because you are using session strategy to
then in your
something like that! ofc you can adjust it. but the basic idea is there
jwt if this is the the case you want to make sure you pass down the info down into the jwt in your callbacks object: async jwt({ account, token, user, profile, session, trigger }) {
if (account.image || user.image){
token.image = account.image || user.image
}
return token;
},then in your
session callback:session: async ({ session, token }) => {
return {...session, user: {...session.user, image: token.image ?? session.user.image}}
}something like that! ofc you can adjust it. but the basic idea is there
try that and let me know if this fixes the image issue
regarding the multiple fetching, could be because the use of react stric! in any case how many uses of the
useSession hook are you making inside that client component?@Oriental the image thing could be related to your auth config... could be because you are using session strategy to `jwt` if this is the the case you want to make sure you pass down the info down into the `jwt` in your callbacks object:
ts
async jwt({ account, token, user, profile, session, trigger }) {
if (account.image || user.image){
token.image = account.image || user.image
}
return token;
},
then in your `session` callback:
ts
session: async ({ session, token }) => {
return {...session, user: {...session.user, image: token.image ?? session.user.image}}
}
something like that! ofc you can adjust it. but the basic idea is there
RexOP
Thanks in advance for answering :))
This is my auth.ts in the root project structure:
as you can see the account and session are null.
When I put the code you provided I can't login anymore to google.
and sincerely I'm struggling to understand auth, do you have advice about understanding it?
thanks again 🙂
This is my auth.ts in the root project structure:
import NextAuth from 'next-auth';
import { UserRole } from '@prisma/client';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { db } from '@/lib/db';
import authConfig from '@/auth.config';
import { getUserById } from '@/data/user';
export const {
handlers: { GET, POST },
auth,
signIn,
signOut,
} = NextAuth({
pages: {
signIn: '/auth/login',
error: '/auth/error',
},
events: {
async linkAccount({ user }) {
await db.user.update({
where: { id: user.id },
data: { emailVerified: new Date() },
});
},
},
callbacks: {
async session({ token, session }) {
if (token.sub && session.user) {
session.user.id = token.sub;
}
if (token.role && session.user) {
session.user.role = token.role as UserRole;
session.user.hasCompletedRegistration =
token.hasCompletedRegistration as boolean;
}
return session;
},
async jwt({ token, account, user }) {
console.log(token, account, user);
// {token, undefined, undefined}
if (!token.sub) return token;
/* if (account?.image || user.image) {
token.image = account?.image || user.image;
} */
const existingUser = await getUserById(token.sub);
if (!existingUser) return token;
token.role = existingUser.role;
token.hasCompletedRegistration = existingUser.hasCompletedRegistration;
return token;
},
},
adapter: PrismaAdapter(db),
session: { strategy: 'jwt' },
...authConfig,
});as you can see the account and session are null.
When I put the code you provided I can't login anymore to google.
and sincerely I'm struggling to understand auth, do you have advice about understanding it?
thanks again 🙂
ow, and this is the repo I'm looking from: https://github.com/simone-capelli/next-auth-v5-starter-kit