OAuth 2 Token request called on client side

[dkjensen]

My SSR app is deployed on Heroku, and uses auth-next to facilitate the OAuth2 login. Using the authorization_code grant type, I noticed the request is made on the client side, and not server. The API I am using requires the client ID and secret to be base64 encoded and passed with the request containing the 'code', so I cannot use the token request call on the client side.

What can be done to perform the request server side, as soon as the code is sent back to my app?

nuxt.config.js

proxy: {
    '/token': { target: 'https://example/oauth', changeOrigin: true },
    '/v2/users/me': { target: 'https://example', changeOrigin: true },
  },
  auth: {
    strategies: {
      custom: {
        scheme: '~schemes/custom',
        endpoints: {
          authorization: 'https://example/oauth/authorize',
          token: '/token',
          userInfo: '/v2/users/me',
          logout: 'https://example/logout',
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          maxAge: 1800,
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 3600,
        },
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: process.env.CLIENT_ID,
        secret: process.env.CLIENT_SECRET,
        scope: ['user_profile'],
    },
    redirect: {
      login: '/login',
      home: '/',
    },

schemes/custom.js

import { Oauth2Scheme } from '~auth/runtime'

function parseQuery(queryString) {
  const query = {}
  const pairs = queryString.split('&')
  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i].split('=')
    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '')
  }
  return query
}

function encodeQuery(queryObject) {
  return Object.entries(queryObject)
    .filter(([_key, value]) => typeof value !== 'undefined')
    .map(
      ([key, value]) =>
        encodeURIComponent(key) +
        (value != null ? '=' + encodeURIComponent(value) : '')
    )
    .join('&')
}

function getProp(holder, propName) {
  if (!propName || !holder || typeof holder !== 'object') {
    return holder
  }
  if (propName in holder) {
    return holder[propName]
  }
  const propParts = Array.isArray(propName)
    ? propName
    : (propName + '').split('.')
  let result = holder
  while (propParts.length && result) {
    result = result[propParts.shift()]
  }
  return result
}

export default class CustomScheme extends Oauth2Scheme {
  async _handleCallback() {
    if (!process.server) {
      return
    }
    const hash = parseQuery(this.$auth.ctx.route.hash.substr(1))
    const parsedQuery = Object.assign({}, this.$auth.ctx.route.query, hash)
    let token = parsedQuery[this.options.token.property]
    let refreshToken
    if (this.options.refreshToken.property) {
      refreshToken = parsedQuery[this.options.refreshToken.property]
    }
    const state = this.$auth.$storage.getUniversal(this.name + '.state')
    this.$auth.$storage.setUniversal(this.name + '.state', null)
    if (state && parsedQuery.state !== state) {
      return
    }
    if (this.options.responseType === 'code' && parsedQuery.code) {
      if (
        this.options.codeChallengeMethod &&
        this.options.codeChallengeMethod !== 'implicit'
      ) {
        this.$auth.$storage.setUniversal(
          this.name + '.pkce_code_verifier',
          null
        )
      }

      const response = await this.$auth.request({
        method: 'post',
        url: this.options.endpoints.token,
        baseURL: '',
        data: encodeQuery({
          code: parsedQuery.code,
          redirect_uri: this.redirectURI,
          response_type: this.options.responseType,
          grant_type: this.options.grantType,
        }),
        headers: {
          Authorization:
            'Basic ' + btoa(this.options.clientId + ':' + this.options.secret),
        },
      })

      token = getProp(response.data, this.options.token.property) || token
      refreshToken =
        getProp(response.data, this.options.refreshToken.property) ||
        refreshToken
    }
    if (!token || !token.length) {
      return
    }
    this.token.set(token)
    if (refreshToken && refreshToken.length) {
      this.refreshToken.set(refreshToken)
    }
    this.$auth.redirect('home', true)
    return true
  }
}

[deniznehlyadyuk]

Any solution?