Offline with auth0 problem sw.js

I was following this sample https://auth0.com/blog/vuejs-kanban-board-adding-progressive-web-app- features/ to create a pwa with offline setup WITH Auth0 authentication.

The issue I came across was related to “sw.js:20 Uncaught (in promise) TypeError: Request method ‘POST’ is unsupported at sw.js:20”

I have setup pwa to use sw.js and when the user clicks login it will post to Auth0 for gmail authentication, but when auth0 posts back to http://localhost:8080/callback I get the above error that sw.js (serviceworker doesn’t work with posts)

The sample pwa starts ok but then for authentication with auth0 it is disjointed and goes another direction.

Do you have guidance for me in terms of pwa with auth0 (vue.js) and/or how I can have offline pwa with auth0 authentication?

thanks-dave

1 Like

Hi @dyardy

The code outlined in Vue.js Kanban Board: PWA Features - Service Worker for Offline Support is configured to request an authorization to Auth0 using the “Implicit flow”, which sends the results back as a GET to the callback URL, with the results after the hash (e.g. https://localhost:8080/callback#access_token=xxxxxxx). The authorization request is a GET too (to https://{your_auth0_domain}/authorize?xxxxx).

Were you able to follow exactly what’s the part of the app or the request it makes where the problem appears?

Just to clarify something: the authentication flow needs to happen online (you are interacting with an online service to the the results). So your app might be prepared to work offline, but when you need authentication/authorization you’ll need to be connected.

1 Like

Thanks for the response.
I started over and i was able to authenticate once…but now am getting this odd error

PrivateMeetups.vue?5fd4:33 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__auth_Auth.a is not a constructor
at eval (PrivateMeetups.vue?5fd4:33)
at Object…/node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PrivateMeetups.vue (app.js:1019)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (PrivateMeetups.vue?c829:1)
at Object…/src/components/PrivateMeetups.vue (app.js:1998)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (index.js?61a1:1)
at Object…/src/router/index.js (app.js:2038)

It seems to be getting stopped at this line

// import AppNav from ‘./AppNav’;
import Auth from ‘…/auth/Auth’;
import { getPrivateMeetups } from ‘…/…/utils/meetup-api’;

const auth = new Auth();

I am not sure how it could work once, then not again.

I tried the sample and it works fine. It seems that any reference to the following fails - > as if Auth.js is not available anymore. Remember I using within pwa/sw.js and wondering if it can’t find Auth.js for some reason? Ideas?

import Auth from ‘…/auth/Auth’;
const auth = new Auth();

Not sure how you structured your project, but if I’m reading the instructions correctly, it references the Auth0 class in this folder: /src/auth/Auth.js.

The full code of the blog sample is located at GitHub - stevehobbsdev/kanban-board-pwa: An implementation of the Kanban Board project, but with PWA features. if you want to check it out and compare it with the code you have.

1 Like

I am using that exact github as the basis and just trying to add the Auth0 aspects to it. Would there be a sample with the Auth0 code added to it? (using the pwa service worker sw.js). This appears to be the only difference is the service worker aspect.

I have this const auth = new Auth() defined within my router/index.js and it works/no error as long as I do not define it within any of the components.

The sample has it defined in router/index.js and also within each of the components like appnav/privatemeetups.

If I try to do similar within the kanban sample code l const auth = new Auth(); i.e. within router/index.js and any of the components I get the error ‘not a constructor’.
I am not sure why at this point.

import Auth from ‘…/auth/Auth’;
const auth = new Auth();

Have you seen anything like this before? thx