Confusion about using user vuex, apollo and NuxTjs/auth-module altogether.

[teethgrinder]

Hello,

Version

auth: 4.9.1
axios: 5.12.2
nuxt: 2.14.6

Nuxt configuration

mode:

[ X ] universal
spa
###nuxt.config.js

auth: {
    strategies: {
      facebook: {
        endpoints: {
          userInfo: 'https://graph.facebook.com/v6.0/me?fields=id,name,picture{url}'
        },
        clientId: '...',
        scope: ['public_profile', 'email']
      },
      'DjangoJWT': {
        provider: 'django/jwt',
        url: 'http://localhost:8000/graphql'
        endpoints: {

        },
        token: {
          property: 'access_token',
          maxAge: 60 * 60
        },
        refreshToken: {
          maxAge: 20160 * 60
        },
      }
    }
  },
  apollo: {
    tokenName: "token", // specify token name
    cookieAttributes: {
      expires: 7 // optional, default: 7 (days)
    },
    defaultOptions: {
      $query: {
        fetchPolicy: "network-only",
        errorPolicy: "all"
      }
    },
    watchLoading: "@/apollo/loadingHandler.js",
    errorHandler: "@/apollo/errorHandler.js",
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:8000/graphql/'
      }
    }
  },

Sorry for noob confusion I am totally lost while reading documentations. I am new to coding with NuxtJS area and I am confused about JWT authentication using Django-graphql-jwt and making it usable in frontend. I use vuex and I have created a Login function:

 async loginUser ({ commit }, payload) {

    try {
      let client = this.app.apolloProvider.defaultClient
      
      const LOGIN_USER = gql`
        mutation tokenAuth($username: String! , $password: String!) {
          register(
            username: $username,
            password: $password,
          ) {
            token
          }
        }
      `
      const { response } = await client.mutate({
        mutation: LOGIN_USER,
        variables: {
          username: payload.username,
          password: payload.password,
        },
      }).then(response =>{
        commit('setAnUser', response.data)
      })
      return response
    } catch (error) {
      commit('setError', error)
    }
  },

Now Login function works but when I follow the NuxtJs auth documentation, I tried to create a strategy:

auth: {
    strategies: {
      'DjangoJWT': {
        provider: 'django/jwt',
        url: 'http://localhost:8000/graphql'
        endpoints: {
             ...
        },
        token: {
          property: 'access_token',
          maxAge: 60 * 60
        },
        refreshToken: {
          maxAge: 20160 * 60
        },
      }
    }
  },

How do I use this token similar to, $auth.loggedIN ?

[drc0]

I'm using django-graphql-auth with django-graphql-jwt 0.3.1 and implemented a custom scheme handler to use nuxt apollo and that backend, thinks are work in progress but I would like some comment about this implementation, for now it handles login, token refresh, logout and token invalidation, in builds upon refresh.ts scheme on auth-next ("@nuxtjs/auth-next": "5.0.0-1622918202.e815752",). For example things like tokenRequired could probably be removed.

login is handled with

const response = await this.$auth.loginWith('apollo', {
    data: {username, password}
})

nuxt.config.js

 auth: {
    cookie: {
      prefix: 'auth',
    },
    redirect: {
      login: '/login',
      logout: '/login',
      callback: '/',
      home: '/'
    },
    plugins: [ '~/plugins/auth.js' ],
    strategies: {
      apollo: {
        scheme: '~/schemes/apollo-schema.js',
        endpoints: false,
        default: true,
        // try to refresh token on expire
        // user is still logged out after refresh token is expired
        autoLogout: false,
        token: {
          property: 'token',
          type: 'JWT',
          name: 'Authorization',
          // not really used, as JWT token has expiration embedded inside
          // just not rise an error here https://github.com/nuxt-community/auth-module/blob/75c20e64cc2bb8d4db7d7fc772432132a1d9e417/src/inc/refresh-token.ts#L78
          maxAge: 300,
          global: true,
          required: true,
          prefix: '_token.',
          expirationPrefix: '_token_expiration.'
        },
        refreshToken: {
          property: 'refreshToken',
          data: 'refreshToken',
          maxAge: 60 * 60 * 24 * 7,
          required: true,
          tokenRequired: false,
          prefix: '_refresh_token.',
          expirationPrefix: '_refresh_token_expiration.'
        },
        user: {
          property: 'user',
          autoFetch: true
        }
      }
    }
  }

~/plugins/auth.js (handles i18n redirect)

export default ({ app, $auth }) => {
  $auth.onRedirect((to, from) => {
    return app.localePath(to)
  })
}

~/graphql/mutations/login.gql

mutation login ($username: String!, $password: String!) {
  login(username: $username, password: $password) {
    success,
    errors,
    unarchiving,
    token,
    refreshToken,
    unarchiving,
    user {
      id,
      username,
    }
  }
}

~/graphql/mutations/refresh_token.gql

mutation RefreshToken($refreshToken: String!) {
  refreshToken (refreshToken: $refreshToken){
    refreshToken,
    token,
    refreshExpiresIn,
    payload,
    success
  }
}

~/graphql/mutations/revoke_token.gql

mutation RevokeToken($refreshToken: String!) {
  revokeToken(refreshToken: $refreshToken) {
    revoked
  }
}

~/graphql/queries/me.gql

{
  me {
    id,
    username
  }
}

~/plugins/apollo-scheme.js

import { RefreshScheme, ExpiredAuthSessionError } from '~auth/runtime'
import loginMutation from '~/graphql/mutations/login.gql'
import refreshTokenMutation from '~/graphql/mutations/refresh_token.gql'
import revokeTokenMutation from '~/graphql/mutations/revoke_token.gql'
import meQuery from '~/graphql/queries/me.gql'

/**
 * Refer to this https://github.com/nuxt-community/auth-module/blob/e815752e0ae1a6740fb9decb2806af5e0c550f3d/src/schemes/refresh.ts
 * in particular the logic for login, logout, refresh token on how to call the api and parse the response
 * the handling of other things is left as is where possible
 **/

export default class ApolloScheme extends RefreshScheme {
  constructor ($auth, options) {
    super($auth, options)
    this.$apollo = $auth.ctx.app.apolloProvider.defaultClient
    this.$apolloHelpers = $auth.ctx.app.$apolloHelpers
  }

  reset ({ resetInterceptor = true } = {}) {
    super.reset({ resetInterceptor })
    this.$apolloHelpers.onLogout()
  }

  refreshTokens () {
    // Token and refresh token are required but not available
    if (!this.check().valid) {
      return Promise.resolve()
    }

    // Get refresh token status
    const refreshTokenStatus = this.refreshToken.status()

    // Refresh token is expired. There is no way to refresh. Force reset.
    if (refreshTokenStatus.expired()) {
      this.$auth.reset()
      throw new ExpiredAuthSessionError()
    }

    // Delete current token from the request header before refreshing, if `tokenRequired` is disabled
    if (!this.options.refreshToken.tokenRequired) {
      this.requestHandler.clearHeader()
    }

    const data = {
      [this.options.refreshToken.data]: this.refreshToken.sync()
    }

    return this.$apollo
      .mutate({
        mutation: refreshTokenMutation,
        variables: data
      })
      .then(({ data }) => {
        return data.refreshToken
      })
      .then((data) => {
        if (!data.success) {
          return Promise.reject(data)
        }
        return { data }
      })
      .then((response) => {
        // Update tokens
        this.updateTokens(response, { isRefreshing: true })
        return response
      })
      .catch((error) => {
        this.$auth.callOnError(error, { method: 'refreshToken' })
        return Promise.reject(error)
      })
  }

  async updateTokens (
    response,
    { isRefreshing = false, updateOnRefresh = true } = {}
  ) {
    super.updateTokens(response, { isRefreshing, updateOnRefresh })
    const token = this.token.sync()
    await this.$apolloHelpers.onLogin(token, undefined, undefined, !isRefreshing)
  }

  async login ({ data, reset = true }) {
    // Ditch any leftover local tokens before attempting to log in
    if (reset) {
      this.$auth.reset({ resetInterceptor: false })
    }

    // Make login request
    const response = await this.$apollo
      .mutate({
        mutation: loginMutation,
        variables: data
      })
      .then(({ data }) => {
        return data.login
      })
      .then((data) => {
        if (!data.success) {
          return Promise.reject(data)
        }
        return { data }
      })

    // Update tokens
    // important await difference from upstream because we need to wait apollo onLogin
    await this.updateTokens(response)

    // Initialize request interceptor if not initialized
    if (!this.requestHandler.interceptor) {
      this.initializeRequestInterceptor()
    }

    // Fetch user if `autoFetch` is enabled
    if (this.options.user.autoFetch) {
      await this.fetchUser()
    }

    return response
  }

  fetchUser () {
    // Token is required but not available
    if (!this.check().valid) {
      return Promise.resolve()
    }

    return this.$apollo
      .query({
        query: meQuery
      })
      .then(({ data }) => {
        return data.me
      })
      .then((data) => {
        if (!data.username) {
          return Promise.reject(new Error('Unable to get user'))
        }
        this.$auth.setUser(data)

        return data
      })
      .catch((error) => {
        this.$auth.callOnError(error, { method: 'fetchUser' })
        return Promise.reject(error)
      })
  }

  async logout () {
    const refreshTokenStatus = this.refreshToken.status()
    const refreshToken = this.refreshToken.sync()
    if (refreshToken && !refreshTokenStatus.expired()) {
      const data = {
        refreshToken
      }
      await this.$apollo
        .mutate({
          mutation: revokeTokenMutation,
          variables: data
        }).catch(() => {
          //
        })
    }

    // But reset regardless
    return this.$auth.reset()
  }

  // skip endpoint refresh url
  initializeRequestInterceptor () {
    this.requestHandler.initializeRequestInterceptor('/')
  }
}