next-auth retrieving user session info

[flacial]

For next-auth discord integration, I found these options to integrate next-auth into an existing database.

The first option seems to be the easiest and it's what Lihas and I thought of in first attempt: Configure the OAuth services you want to use, but don't configure a database (which will enable JSON Web Tokens) and use a custom signin() callback to authenticate users and/or insert them in your existing database.

It's possible but I'm not sure how to get the userId that's used in the following snippet to update the user's discord related info:

helpers/discordAuth.ts

 return prisma.user.update({
    where: {
      id: userId
    },
    data: {
      discordRefreshToken: refreshToken,
      discordAccessToken: accessToken,
      discordAccessTokenExpires: accessTokenExpiresAt
    }
  })

It seems it's getting it from the req.user which is gotten when these middlewares are called. I'm not sure what are they or how they work in this context:

pages/discord/success.tsx

 return new Promise(resolve => {
    const middlewares = [loggingMiddleware, sessionMiddleware(), userMiddleware]

    runMiddlewares(middlewares, req, res, async () => {
      if (!req.user?.id) {
        return resolve({
          props: {
            errorCode: ErrorCode.USER_NOT_LOGGED_IN
          }
        })
      }
      try {
        const { code } = query || {}
        const user = await setTokenFromAuthCode(req.user.id, code as string)
        const userInfo = await getDiscordUserInfo(user)
        ...
        resolve({ props: { userInfo, username: req.user.username } })
      }
      ...
    })
  })

Potential solution:

• To get the userId from the session, we can use something like JWT.verify and pass it the secret of the session and any other properties that it has like expireAt.

Here's where the userId is needed:

  callbacks: {
    async signIn({ account }) {
      const { provider, refresh_token, access_token, expires_at } = account

      const accessTokenExpiresAt = new Date(
        Date.now() + (expires_at * 1000 || 0)
      )

      if (provider === 'discord') {
        await prisma.user.update({
          where: {
            id: userId // Missing
          },
          data: {
            discordRefreshToken: refresh_token,
            discordAccessToken: access_token,
            discordAccessTokenExpires: accessTokenExpiresAt
          }
        })
      }

      return true
    }
  },

The signIn can access the middleware req object but that object only has the discord response properties such as user, account, and profile.

---

The 3rd option seems to be the best as the above is just a workaround that we'll have to deal with in the future when further integrations of other providers are required or needed.

Create a new set of tables and import your existing data into them.

This is a lot easier and more robust than trying to update an existing table, as if things like timestamp fields are declared slightly differently you will likely run into problems at some point. You can use the entityPrefix option if you want NextAuth.js to create the tables in the same database without the table names clashing with existing tables, the option is documented here.

You only need to populate the users and accounts tables if you want to import users. You don't need to worry about the sessions table.

[flacial]

Update(1): Tried to run runMiddlewares with the middlewares in the signIn callback and it seems to be returning the session user object.

{
  id: 1,
  name: 'Admin Administrator',
  username: 'admin',
  password: '$2b$10$OKsH6r5//AtYlIW/EzUWQeUYdwcKF8JUEeD8RXfLURj8BPw1ilir2',
  email: 'admin@mail.com',
  gsId: null,
  isOnline: null,
  createdAt: 2022-02-26T15:21:15.540Z,
  updatedAt: 2022-02-26T23:18:46.359Z,
  isAdmin: true,
  forgotToken: null,
  cliToken: 'Qa-fLZjMTGEQrnGUfV8eM',
  emailVerificationToken: null,
  tokenExpiration: null,
  discordRefreshToken: null,
  discordAccessToken: null,
  discordAccessTokenExpires: 2022-02-26T23:18:46.356Z
}

[songz]

Here's how the middlewares work I believe:

1. You take the nextConnect handler: https://github.com/garageScript/c0d3-app/blob/master/pages/api/graphql.ts#L11
2. Then add the middlewares (same code above).

The middlewares populates the user property in the req object

[songz]

I don't fully understand your 3rd option, but when I'm reading it, it seems like alot of work and it could be broken down into steps. There are a couple of things going on, so let's clarify the user experience.

In the current experience, user is logging in with their username / password. After they are logged in, they connect to their discord account. This is not the same as giving user an option to login with Discord from the signin page.

So I'm thinking the first step could be your option 1, where we deprecate the existing implementation in favor of having next-auth handle it. Should make our codebase simpler right?

[flacial]

Update(2): Was able to update the user with discord token data.

Semi-final code:

export default (req, res) =>
  NextAuth(req, res, {
    providers: [
      DiscordProvider({
        clientId: process.env.DISCORD_CLIENT_ID,
        clientSecret: process.env.DISCORD_CLIENT_SECRET
      })
    ],
    callbacks: {
      async signIn({ account }) {
        try {
          const { provider, refresh_token, access_token, expires_at } = account

          const middlewares = [
            loggingMiddleware,
            sessionMiddleware(),
            userMiddleware
          ]

          const userId = await new Promise((resolve, reject) =>
            runMiddlewares(middlewares, req, res, async () => {
              if (!req.user?.id) {
                return reject({
                  errorCode: ErrorCode.USER_NOT_LOGGED_IN
                })
              }

              return resolve(req.user.id)
            })
          )

          const accessTokenExpiresAt = new Date(
            Date.now() + (expires_at * 1000 || 0)
          )

          if (provider === 'discord') {
            await prisma.user.update({
              where: {
                id: userId
              },
              data: {
                discordRefreshToken: refresh_token,
                discordAccessToken: access_token,
                discordAccessTokenExpires: accessTokenExpiresAt
              }
            })
          }

          // Means the signIn was successful
          return true
        } catch {
          // Means the signIn wasn't successful
          return false
        }
      }
    },
    debug: true
  })

[songz]

next auth would be signing in with discord

This is ideal, BUT I think doing that immediately is too big of a change, mainly because of this problem: when the user logs in with discord, we are unable to correlate that with c0d3.com users. Here's a potential problem scenario:

1. user signs in with discord, realizes that their c0d3.com account is not correlated
2. signs in with c0d3 account, then connects to discord

---

Here's an approach that I think would solve that problem:

1. User logs in with c0d3.com account (as is currently), then connect with discord using next auth. This prepares us for the next step and cleans up some of the codebase.
2. Add user login with discord. When user logs in with discord, we can lookup by our user table under the discord username column to see if the user exist. If it does, we log them in. If not, we tell them we can't find their account and they need to create a c0d3 account first.

Potential 3rd step: creating an account with discord login, but to do this we need to address a few issues:

1. How do we pick username for these new discord users? Do we have a new page with a username suggestion (that matches their discord username? and what if that is taken?)
2. What if user logs in with discord for the first time (thus new account is created), and then realizes they actually have an unconnected c0d3 account?

[flacial]

Add user login with discord. When user logs in with discord, we can lookup by our user table under the discord username column to see if the user exist. If it does, we log them in. If not, we tell them we can't find their account and they need to create a c0d3 account first.

To get the discord username, the user table has to have a column with the user's discord username. Should we clear all the discord token related columns and ask the users to connect discord again, because it currently one has the following columns: discordRefreshToken, discordAccessToken, and discordAccessTokenExpires

Or rather than clearing all of it, why not create a function that iterates over all the users, fetch discord API with their token to get their ID, update the user discordUsername column with the fetched username.

Working code to update all the users' discordId

const { PrismaClient } = require('@prisma/client')
const fetch = require('node-fetch')

const prisma = new PrismaClient()
const discordAPI = 'https://discordapp.com/api'

const updateUserDiscordId = (userId, discordId) => {
  return prisma.user.update({
    where: { id: userId },
    data: { discordId }
  })
}

const fetchDiscordUserId = accessToken => {
  const res = fetch(`${discordAPI}/users/@me`, {
    method: 'GET',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      Authorization: `Bearer ${accessToken}`
    }
  })

  return res
}

const getUsers = prisma.user.findMany({})

getUsers.then(async users => {
  let usersWithInvalidToken = 0

  await Promise.all(
    users.map(async user => {
      const res = await fetchDiscordUserId(user.discordAccessToken)
      const { id } = await res.json()

      if (!id) usersWithInvalidToken += 1

      return id && updateUserDiscordId(user.id, id)
    })
  )

  console.log(
    'Finished the task -',
    `Users with invalid tokens: ${usersWithInvalidToken}`
  )

  process.exit(0)
})

Note: I think looking up the user id instead of username is better because the username might change, the id won't.

But how can the above code run? Should be make a copy of the production database, if so, how?

Something else, I found out that integrating nextAuth will solve the issue of checking if the user is logged in or not using getSession in getServerSideProps.

[flacial]

Here's a mindmap that goes over how I think of it: https://www.xmind.net/m/hgjjgi

Send a request to discord API with the user token and get his id

This node in the mindmap is wrong. I misunderstood.

[songz]

The script should be run separately on a different server, and not needed to be committed into the codebase.

I wouldn't do this:

getUsers.forEach(user => {
  const { id } = await fetchDiscordUserId(user.discordAccessToken)
  
  updateUserDiscordId(user.id, id)
})

Because we may get rate limited by discord and end up with some finished, some error'd out.

Here's what I think:

1. get all users, filter out by users with accessToken but no discord Id.
2. fetch discord info for user1, on success write to DB, then write to a file (success.json with userId and discordId for later verification) then fetch discord info for user2, etc. until there is error message. Then we write the remaining array into another file: (remainingUsers.json).
3. slowly complete remainingUsers.json

[flacial]

Something like this? I tested it by manually throwing an error when some condition is true. The only thing I'm not certain about is the data it writes into success.json and remainingUsers.json. Are the data it writes enough for later verification or should I add more info such as the username or the date.

View script

const Storage = require('./storage.js')
const { PrismaClient } = require('@prisma/client')
const fetch = require('node-fetch')

const successStorage = new Storage('./users', 'success', 'json')
const prisma = new PrismaClient()
const discordAPI = 'https://discordapp.com/api'

const updateUserDiscordId = (userId, discordId) => {
  return prisma.user.update({
    where: { id: userId },
    data: { discordId }
  })
}

const fetchDiscordUserId = accessToken => {
  const res = fetch(`${discordAPI}/users/@me`, {
    method: 'GET',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      Authorization: `Bearer ${accessToken}`
    }
  })

  return res
}

const getUsers = prisma.user.findMany({})

const runIt = async () => {
  const usersWithAccessTokenAndNoDiscordId = (await getUsers).filter(
    user => user.discordAccessToken && !user.discordId
  )

  const handleUpdatingUserDiscordId = async (users, x = 0) => {
    try {
      if (x >= users.length) {
        console.log(
          `Users count: ${
            (await getUsers).length
          }\nUsers with AccessToken and no DiscordId: ${users.length}\n`
        )

        // Async function won't exit without it
        process.exit(0)
      }

      const user = users[x]

      const res = await fetchDiscordUserId(user.discordAccessToken)
      const { id } = await res.json()

      if (id) {
        await updateUserDiscordId(user.id, id)
        await successStorage.add(user.id, { userId: user.id, discordId: id })
      }

      return handleUpdatingUserDiscordId(users, x + 1)
    } catch (e) {
      console.log(
        'Encountered an error. Storing the remaining users into /users/remainingUsers.json\n'
      )
      const remainingUsersStorage = new Storage(
        './users',
        'remainingUsers',
        'json'
      )

      const storeRemainingUsers = async (i = x) => {
        if (i >= users.length) return

        const { id, discordAccessToken } = users[i]

        await remainingUsersStorage.add(users[i].id, {
          id,
          discordAccessToken
        })

        return storeRemainingUsers(i + 1)
      }

      storeRemainingUsers()

      setTimeout(async () => {
        const remainingUsersArray =
          await remainingUsersStorage.toArrayByValues()

        handleUpdatingUserDiscordId(remainingUsersArray, 0)

        console.log('Retrying...')
      }, 1000 * 30) // retry after 30 seconds
    }
  }

  return handleUpdatingUserDiscordId(usersWithAccessTokenAndNoDiscordId)
}

// Uncomment the below line to start the script 🔽
// runIt()

Here's the Storage module: https://github.com/flacial/c0d3-submissions/blob/main/utils/storage.js

[flacial]

Answer: #1528 (reply in thread)