Next.js Discord

Discord Forum

next-auth.js - typescript, how do I add a field to the user?

Unanswered
B33lzeBub posted this in #help-forum
Open in Discord
Hi! I am trying to create a login for my website. The backend is a REST API and the front-end is in NextJS 13. I need some help in how I'd add some extra fields to the user object. I am using Next.JS 13 with the app router, next-auth and typescript.

For some clarity, this is the flow in which the app should work:
1. Login using credentials
2. Nextjs sends credentials to REST API, which validates and sends a JWT token back
3. I receive the token and base64 decode it
4. I add the access token to an user field (for session)
5. I add the roles to an user field (for session)
6. I am logged in to the site
7. I visit a page -> api client using the access token makes a request to backend and fetches the data or whatever

I currently have this for my auth options:
{
    providers: [
        CredentialsProvider({
            id: "credentials",
            type: "credentials",
            name: "Credentials",
            credentials: {
                username: { label: "Username", type: "text", placeholder: "username" },
                password: { label: "Password", type: "password" }
            },
            async authorize(credentials, req) {
                const res = await fetch(`${process.env.API_HOST}/auth/login`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(credentials)
                })
                const userResponse = await res.json()
                if (res.ok && userResponse) {
                    const user = JSON.parse(Buffer.from(userResponse.token.split('.')[1], 'base64').toString())
                    user.token = userResponse.token
                    user.roles = userResponse.roles
                    return user
                }
                return null
            }
        })
    ],
}

But I can't access session.user.token? What am I doing wrong?

2 Replies

So, when I am on a page.tsx like this, I'd like to access it like this:
export default async function Customers({}: Props) {
    const session = await getServerSession(authOptions);
    console.log(session?.user.token);
    const client = createEwhsClient({apiKey: session?.user.token});

    const data = await ewhsClient.customer.list();
    return (
        <ViewWithActions title="Customers">
            <CollectionView columns={columns} data={data}/>
        </ViewWithActions>
    )
}


but token does not exist
S2339: Property  token  does not exist on type
{     name?: string | null | undefined;     email?: string | null | undefined;     image?: string | null | undefined; }
Also maybe I am over-asking, but shouldn't there be a better way to access createEwhsClient instead of creating a new one in every page I open? Can't I just make like a lib file for it? but thats less important 😅