Does Auth-module work with Graphql (Urql)

[innovaweb-dev]

Does Auth-modu work with Graphql or only with Axios ?

My Nuxt app work with @urql/core but I don't find how implement the authentification.
Does I need to use @urql/exchange-auth with Nuxt-Auth or Nuxt-Auth is sufficient ?

[CavalcanteLeo]

yes, but you have to create you own scheme strategy, look at this: #93 (comment)

[innovaweb-dev]

Thanks @CavalcanteLeo

I have tried to apply this code to my GraphQL client (Urql).
But I don't understand what he does in setToken method with this.$apolloHelpers.onLogin(tokenValue) ?

// import meQuery from "~/graphql/queries/me.gql";
// import loginMutation from '~/graphql/mutations/login.gql'

export default class UrqlScheme {
  
  constructor(auth, options) {
    
    // console.log(auth.ctx.$urql);
    // console.log(options);
    // this.$auth = auth
    this.$urql = auth.ctx.$urql
    // this.$apolloHelpers = auth.ctx.app.$apolloHelpers
    // this._name = options._name
  }
  
  async login(login) {
    
    //language=graphql
    const MUTATION = `
      mutation signIn($username: String!, $password: String!) {
        signIn(username:$username, password:$password){
          accessToken
          refreshToken
        }
      }`;
    
    const {data} = await this.$urql.mutation(MUTATION, login).toPromise();
    this.setUserToken(data.signIn.accessToken)
    //   return this.$apollo
    //     .mutate({
    //       mutation: loginMutation,
    //       variables: data,
    //     })
    //     .then(({ data }) => Promise.resolve(Object.values(data)[0]))
    //     .then(data => this.setUserToken(data.token))
  }
  
  setToken(tokenValue) {
    return this.$apolloHelpers.onLogin(tokenValue)
      .then(() => this.$auth.setToken(this._name, tokenValue))
  }
  
  // setUser(user) {
  //   return this.$auth.setUser(user)
  // }
  
   setUserToken(accessToken) {
     return this.setToken(accessToken).then(() => this.fetchUser())
   }
  
  // check() {
  //   return !!this.$auth.getToken(this._name) && this.$auth.getToken(this._name) !== this._name
  // }
  
   fetchUser() {
     if (!this.check()) {
       return Promise.reject(false)
     }
  
     return this.$apollo.query({query: meQuery})
       .then(({data}) => Promise.resolve(Object.values(data)[0]))
       .then(data => this.setUser(data))
   }
  
  // logout() {
  //   return this.$apolloHelpers.onLogout()
  //     .then(() => this.reset())
  // }
  
  // reset() {
  //   return this.setToken(this._name, null).then(() => this.setUser(null))
  // }
}

[ryntab]

return this.$apolloHelpers.onLogin(tokenValue)
      .then(() => this.$auth.setToken(this._name, tokenValue))

this.$apolloHelpers.onLogin is a method specific to the Apollo GraphQL client. Since you are using URQL you should remove this from your code.