Twitch oauth2 login stuck in callback loop

[Kazuto]

I'm using auth-next and I'm trying to create a "Login with Twitch" strategie but no matter what I try I can't seem to get to work.

  auth: {
    strategies: {
      twitch: {
        scheme: 'oauth2',
        endpoints: {
          authorization: 'https://id.twitch.tv/oauth2/authorize',
          token: 'https://id.twitch.tv/oauth2/token',
          userInfo: 'https://api.twitch.tv/kraken/user',
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          maxAge: 3600,
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 60 * 60 * 24 * 30,
        },
        responseType: 'code',
        grantType: 'authorization_code',
        accessType: 'offline',
        redirectUri: process.env.TWITCH_REDIRECT_URI, // http://localhost:3000/api/twitch/callback
        clientId: process.env.TWITCH_CLIENT_ID,
        scope: ['openid', 'user:read:email', 'user_read'],
        state: process.env.TWITCH_STATE_SECRET,
      },
    },
  },

My callback function

module.exports.callback = async ({ query: { code } }, res) => {
  try {
    const { data } = await getTwitchToken({
      code,
      grant_type: 'authorization_code',
    })

    return data
  } catch (err) {
    console.error(
      `\n🚨 There was an error at /api/twitch/callback: ${err} 🚨\n`
    )
  }
}

const getTwitchToken = (props = {}) =>
  axios({
    method: 'POST',
    url: 'https://id.twitch.tv/oauth2/token',
    params: {
      client_id: process.env.TWITCH_CLIENT_ID,
      client_secret: process.env.TWITCH_CLIENT_SECRET,
      redirect_uri: process.env.TWITCH_REDIRECT_URI,
      ...props,
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  })

If I return res.json(data) i get everything I need. I just can't return it to the auth module.

{
  "access_token": "<MY_ACCESS_TOKEN>",
  "expires_in": 14949,
  "id_token": "<MY_JWT_TOKEN>",
  "refresh_token": "<MY_REFRESH_TOKEN>",
  "scope": [
    "openid",
    "user:read:email",
    "user_read"
  ],
  "token_type": "bearer"
}

I've created a post on cmty.app almost two weeks ago but apparently no one uses the platform.
https://cmty.app/nuxt/auth-module/issues/c654

[a-syde]

Hey @Kazuto
Could you resolve your issue? If yes, how?
I am having a similiar issue but with Keycloak not Twitch.

I need to exchange the code for tokens as described here:

I am doing this via a plugin in the module
build: { analize: true, transpile: [/typed-vuex/, '@nuxtjs/auth-next'], }, auth: { plugins: ['~/plugins/auth.ts'],

auth.ts:

import { Context } from '@nuxt/types'
const qs = require('querystring')

export default async (context: Context) => {
  // TODO: use process.env
  if (context.route.query.state && process.server) {
    try {
      const { data } = await context.$axios.post(
        'https://blabla.de/realms/master/protocol/openid-connect/token',
        qs.stringify({
          client_secret: context.route.query.session_state,
          grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange',
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }
      )

      console.log(data)

      if (context.$auth.user) {
        const username = context.$auth.user.username
        console.log(username)
      }

      return data
    } catch (err) {
      console.error(
        `\n🚨 There was an error signing the code by Keycloak: ${err} 🚨\n`
      )
    }
  }
}

My problem is that I always get an error saying: TypeError: Cannot read property 'Authorization' of undefined even though Keycloak doesn't ask for Authroization header for the endpoint.

[Kazuto]

Hey @a-syde I still haven't been able to solve the issue.

[a-syde]

@Kazuto
I managed to solve it without an overhead of plugins.
I still face one issue, which is not directly related to the auth module.
I have a multi-language app with the help of nuxt-i18n

The solution applies to Keycloak, however, it should almost be identical to Twitch and other OAuth2 systems.

In nuxt.config.js

auth: {
    redirect: {
      login: '/de',
      callback: '/de',
      home: '/',
      logout: '/',
    },
    strategies: {
      keycloak: {
        scheme: '~/plugins/logout-keycloak.ts',
        endpoints: {
          authorization: `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
          token: `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
          userInfo: `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/userinfo`,
          logout: `${process.env.KEYCLOAK_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout`,
        },
        scope: ['openid', 'profile', 'email', 'offline_access'],
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: process.env.KEYCLOAK_CLIENT_ID,
        accessType: 'online',
        codeChallengeMethod: 'S256',
      },
    },
  },

I need the plugin logout-keycloak.ts in order to correctly redirect back to my frontend because of the configuration of nuxt-i18n
Otherwise, I will be redirected to the 404 page.

logout-keycloak.ts

import Oauth2Scheme from '@nuxtjs/auth-next/dist/schemes/oauth2'
import { encodeQuery } from '@nuxtjs/auth-next/dist/utils'

export default class KeycloakScheme extends Oauth2Scheme {
  logout() {
    if (this.options.endpoints.logout) {
      const opts = {
        client_id: this.options.clientId,
        post_logout_redirect_uri: `${this._logoutRedirectURI}${this.$auth.ctx.app.i18n.defaultLocale}`,
      }
      const url = this.options.endpoints.logout + '?' + encodeQuery(opts)
      window.location.replace(url)
    }
    return this.$auth.reset()
  }
}

The takeaway is you don't need a plugin to verify the token, the auth module does it automatically for you if you configure it correctly.
Important are the callback and login routes.

Even refresh tokens will be automatically renewed.

Keycloak configuration

[a-syde]

My wish is to have the possibility to change the routes in redirect dynamically in runtime, so the user gets redirected back to the locale he chose before logging in.

redirect: {
      login: '/de',
      callback: '/de',
      home: '/',
      logout: '/',
    },

As you see above, it will always by /de only

The potential solution woud be something like:

async login() {
      await this.$auth.loginWith('keycloak', {
        redirect_uri: `/${this.$i18n.locale}/dashboard`,
      })
 },

I tried the solution above, unfortunately, it is not working.