Trying to Run Quasar App Extension Auth Token Based

Mickey58

I’m trying to get this Auth Token app extension to work: https://www.npmjs.com/package/quasar-app-extension-auth-token-based on NPM, https://github.com/quasarframework/quasar on GitHub.

I’m on a Windows 10 computer. I’ve downloaded the repository from GitHub. I installed dependencies bash and yarn from NPM as suggested in the readme.

Now trying to build the test app which is included. But when I enter the usual command “quasar dev” from C:\Users<user>\GitHub\quasar-app-extension-auth-token-based\test\app, all I get is "Error Unknown command “dev” followed by other Quasar help info.

I tried to run “quasar ext add auth-token-based” before, but that fails with the same error.

It looks like Quasar is installed, but something basic seems to be wrong in my setup for this app extension.

What could that be?

When running quasar info, I get:
PS C:\Users…\GitHub\quasar-app-extension-auth-token-based> quasar info

Operating System Windows_NT(10.0.18362) - win32/x64
NodeJs 10.16.0

Global packages
NPM 6.9.0
yarn 1.17.3
@quasar/cli 1.0.5
cordova Not installed

s.molinari

You need to be inside your project folder to get dev or other commands to run.

Scott

Mickey58

That was not the reason for the problems, as I had run the commands from inside the folder that has the test app.

I changed the approach meanwhile and added that Quasar extension to my existing Quasar app. The installation was successful. The app extension install prompts for the backend routes to be secured by authentication (in my case http://127.0.0.1:8080 for testing with my local backend). The app extension install has overwritten my existing axios boot file, but that can be re-adjusted later.

After a small correction in my routes.js for my pre-existing Quasar app, MyLayout.vue for my existing Quasar app comes up.

Securing of the above backend routes through the Auth Token based app extension seems to work - with nobody logged in, the app is getting a connection refused error from the backend (not the case prior to installing the app extension).

However, rendering a login page through the app extension does not work. There is a Login.vue page supplied by the app extension, but the browser log, when entering localhost:4200/login shows:

[Vue warn]: Error in render: “TypeError: Cannot read property ‘login’ of undefined” found in
—> <Login> at node_modules/quasar-app-extension-auth-token-based/src/components/pages/Login.vue

Strangely, different from all my other preexisting .vue code in my Quasar app, VS Code shows lots of Vetur errors when browsing that Login.vue and other .vue code supplied by the app extension (but that might be an independent setup issue).

Bottom line: Not sure how to “surround” my existing Quasar app with the supplied login/logout pages provided by the app extension. The doc is very thin in that regard.

s.molinari

Yeah, the extension, from what I saw of it and that was a few months ago, wasn’t really a full blown and integrated extension (i.e. not something you’d really want to install). It’s more like, this is what you could do. So, I’d take it with a grain of salt as in, install it in a test app and look at it, dissect it, maybe learn from some of what it offers and just build what you need out of it into your own app.

Scott

Mickey58

@s-molinari - Scott, thanks for your judgement. The extension has a lot of useful capabilities, but integrating them into an existing app isn’t simple, basically it requires to “decode” the test app and transform that manually to your existing app.

Unfortunately, I’m late with adding authorization into my Quasar app (with Express/Mongoose backend). So I’m looking for sample code/boilerplates how to achieve it quickly.

The mentioned Quasar app extension is so far the only boilerplate I found that is based on Quasar.

There are few tutorials out that add authorization to Vue apps, like https://www.djamware.com/post/5ac8338780aca714d19d5b9e/securing-mevn-stack-vuejs-2-web-application-using-passport (using Passport with local strategy, which is good enough for my beginning, and JWT to secure the backend APIs).

Are you aware of other boilerplates to achieve what I want to do, maybe even based on Quasar?

s.molinari

No. I don’t know of any directly. Sorry.

To me though, getting it right on the server is the harder part. Good thing is, there is a lot of documentation and middleware for Express on JWT and authentication.

Good programming!

Scott

Mickey58

Thanks, Scott, found a few samples that should get me crawling, running comes a bit later

machadoug

@Mickey58 , Can you update this post with your findings? This way it might be useful to me and others in the future? I’m new to Quasar.

Mickey58

@machadoug - I have given up on using the Auth Token based app extension, as I had too many problems to get it working.

Instead, I changed my code to use JWT with Passport and local Mongoose strategy for authentication. The latter (local Mongoose strategy) is of course only relevant for you, if you use Mongoose at your backend.

The following tutorials helped me:

It required about 1 week of work, as everything was new to me…

No More Posting New Topics!

Trying to Run Quasar App Extension Auth Token Based