Connect to Adonis.js API

[digitalit]

Hi Matej, I will try to use this great package to connect my Quasar v1.0.5 to my Adonis.js API v4.1.

This is my respons from Adonis.js API:

{
  "status": "success",
  "payload": {
    "type": "bearer",
    "token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "refreshToken": null
  },
  "user": {
    "id": 1,
    "email_address": "xxxxxxxxxxx",
    "firstname": "xxxxxx",
    "lastname": "xxxxxx",
    "last_logged_in": "2019-07-30T06:37:07.716Z",
    "updated_at": "2019-07-30 08:37:07",
    "fullname": "xxxxxxxxxxx"
  }
}

will this be usable with your package?

[digitalit]

I get this error:

Could not find a declaration file for module './auth'. '/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/@mspiderv/vuejwtauth/src/auth.js' implicitly has an 'any' type.ts(7016)

[digitalit]

[mspiderv]

Hi @digitalit. Looks like you are using TypeScript. Am I right?

My package was written in ES6 and currenty does not support TypeScript typings. I will make a note to my todolist and add TS support asap.

If you need a quick fix, simply add this before your import: // @ts-ignore

Or declare my module using: declare module '@mspiderv@vuejwtauth';

Then the type of imported module will be any so it should work.

[digitalit]

Thank you for a quick answer @mspiderv

Well, i'm no fan of TS so i hope i'm not using it. If i do it's not on purpose.

// @ts-ignore did nothing so where should i put: declare module '@mspiderv@vuejwtauth'; ?

And about my JWT respons from Adonis.js API, is it okay?

[mspiderv]

You should write // @ts-ignore above every import from my package. For example

// @ts-ignore
import * from '@mspiderv/vuejwtauth';

Or you can write declare module '@mspiderv@vuejwtauth'; on one place (maybe in your entry index.js file?) to tell TypeScript that you are goin to import package with name @mspiderv@vuejwtauth.

Your API response is not good. This package was designed with idea, that you need to send two requests to your API. First will log you in using credentials and responses with access token. The second one is authenticated request (carries previously obtained access token in header Authorization) and the response here is your user object.

You are combining these two requests. If you want to use this package you should make two endpoints login and fetchUser. The structure of your API responses may looks like you want it to looks. There are 3 functions in my package responseible to "extracting data from API responses". Take a look at the last three functions here (https://github.com/mspiderv/vuejwtauth/blob/master/src/methods.js#L75). By default, this package assume that your API response for login endpoint will carry the access token in the token property. The same for refresh endpoint. And finally, API response for fetching the user data should carry the user object in user property. If you want your own API response structure, then you need to override these functions using the options property. I can provide you more info about this if you want.

Do you have your project in some repo? Can I take a look and help you ?

[digitalit]

The TS error i so weird as i don't use TS in Quasar.

As for the API response i have two connections: one for login: http://localhost:4000/api/auth/login one for get-user: http://localhost:4000/api/auth/get-user

In Nuxt.js JWT auth that im migrating from to Quasar it look like this:

  strategies: {
    local: {
      endpoints: {
        login: {
          url: '/api/auth/login',
          method: 'post',
          propertyName: 'payload.token'
        },
        logout: false,
        user: {
          url: '/api/auth/get-user',
          method: 'get',
          propertyName: 'user'
        }
      }
    }
  },

[digitalit]

Is it okay if i mail you these two repos to mspiderv@gmail.com ?

[mspiderv]

Sure.

[digitalit]

Tried to build and run Quasar as SPA and then i get no errors.

I really hope this is fixable since i need to build and run Quasar in SSR mode?

[mspiderv]

Try to create a new file /src/index.d.ts/ and paste the followin into it declare module '@mspiderv/vuejwtauth';.

[digitalit]

Still same error as in https://github.com/mspiderv/vuejwtauth/issues/2#issuecomment-516303361

[mspiderv]

Try to move file /src/index.d.ts to /src/boot/auth.d.ts. If it wont help oyu, then I don't know what to do. I unzipped your repo, run npm install and quasar dev and everything is working without making any changes.

[digitalit]

Try quasar dev -m ssr and then you will see the problem

[mspiderv]

It works anyway. $ quasar dev -m ssr runs without any problems for me. Node.js version is v10.16.0.

What you are saying make no sense, because it look like you are not using TypeScript in your project, yet the "Could not find a declaration file for module" is TypeScript-related error. Make sure you have no tsconfig file in your repo.

[digitalit]

I run Node v9.4.0 do you think this could be a problem? EDIT: No, i tried on another server with latest Node and same error.

I can't find anything related to TS. do you think i have some fault TS settings in VSCode?

[mspiderv]

Try to unzip that ZIP that you sent me previously. Open that folder, run npm install and then quasar dev. Dont use any code editor, just open terminal / cmd and run that two commands. Thats the exact thing what I have done and it do work for me. I really dont know what the problem is, but it is 100% TypeScript-related issue.

[digitalit]

I'm super happy that you can runt it in ssr mode this means that there is something corrupt on my computer.

Tried to unzip in new folder and doing all in terminal and quasar dev works but not quasar dev -m ssr