Pass oauth_token & oauth_token_secret securely without JWT to the browser?

[deadcoder0904]

When I used JWT, I passed it inside token like:

session: {
	jwt: true,
},
callbacks: {
	async jwt({ token, account, user }) {
		if (user) {
			token.username = user.username
		}
		if (account) {
			token[account.provider] = {
				oauth_token: account.oauth_token,
				oauth_token_secret: account.oauth_token_secret,
			}
		}

		return token
	},
	async session({ session, token }) {
		session.username = user.username
		return session
	},
},

And used it in my api/search.ts like:

const token = await getToken({
	req,
	secret: process.env.NEXTAUTH_SECRET,
})

if (!token)
	return res.status(401).json({
		status: 'token is null',
	})

const userClient = new TwitterApi({
	appKey: process.env.TWITTER_CONSUMER_KEY,
	appSecret: process.env.TWITTER_CONSUMER_SECRET,
	accessToken: token.twitter.oauth_token,
	accessSecret: token.twitter.oauth_token_secret,
})

Now, I'm trying to use it without JWT by storing the session in the database. However, I don't know how to use oauth_token & oauth_token_secret?

Do I need to do a database lookup for username to get oauth_token & oauth_token_secret or is there another way?

My code for [...nextauth].ts currently looks like:

session: {
	jwt: false,
},
callbacks: {
	async signIn({ user, profile, account }) {
		if (profile) {
			user.username = profile.screen_name
		}
		// if (account) {
		// 	  user[account.provider] = {
		//	  	  oauth_token: account.oauth_token,
		//		  oauth_token_secret: account.oauth_token_secret,
		//	  }
		//  }
		//  return true
	},
	async session({ session, user }) {
		session.username = user.username
		return session
	},
},

How do I do it?

[deadcoder0904]

Turns out, the oauth_token & oauth-token_secret is stored in Account schema so I used prisma to solve this by checking for session.username which I already store as above.

[...nextauth.ts]

session: {
	jwt: false,
},
callbacks: {
	async signIn({ user, profile }) {
		if (profile) {
			user.username = profile.screen_name
		}
		return true
	},
	async session({ session, user }) {
		session.username = user.username
		return session
	},
},

search.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { TwitterApi } from 'twitter-api-v2'
import { getSession } from 'next-auth/react'

import prisma from '@/server/db/prisma'

const search = async (req: NextApiRequest, res: NextApiResponse) => {
	const { query } = req.body

	const session = await getSession({
		req,
	})

	if (!session)
		return res.status(401).json({
			status: 'session is null',
		})

	const token = await prisma.user.findUnique({
		where: {
			username: session.username,
		},
		select: {
			accounts: {
				select: {
					oauth_token: true,
					oauth_token_secret: true,
				},
			},
		},
	})

	if (!token)
		return res.status(401).json({
			status: 'token is null',
		})

	if (!token.accounts[0].oauth_token || !token.accounts[0].oauth_token_secret)
		return res.status(401).json({
			status: 'oauth_token & oauth_token_secret is null',
		})

	const userClient = new TwitterApi({
		appKey: process.env.TWITTER_CONSUMER_KEY,
		appSecret: process.env.TWITTER_CONSUMER_SECRET,
		accessToken: token.accounts[0].oauth_token,
		accessSecret: token.accounts[0].oauth_token_secret,
	})

	try {
		const data = await userClient.search(query)

		return res.status(200).json({
			status: 'Ok',
			data: data.tweets,
		})
	} catch (e: unknown) {
		return res.status(400).json({
			status: (e as Error).message,
		})
	}
}

export default search

The above part, specifically, token.accounts[0].oauth_token looks hacky to me but I believe to work around that I can have a UI to switch accounts :)

[balazsorban44]

The reason is that a user can have multiple accounts (one-to-many user-account relation) and your query will try to find all of them.

I guess you could be more specific and say you only want Twitter accounts, but Prisma will still return an array, as it might think you can have multiple of those as well.

Your solution looks good!