auth0-samples / auth0-vue-samples

Auth0 Integration Samples for Vue.js Applications

Auth0 Vue.js Samples

This is the sample code for the Auth0 Vue.js Quickstart using @auth0/auth0-vue.

There are two sample applications:

• 01 - Login — demonstrates logging in and viewing profile information
• 02 - Calling an API — demonstrates how to call a third-party API using access tokens

What is Auth0?

Auth0 helps you to:

• Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, among others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
• Add authentication through more traditional username/password databases.
• Add support for linking different user accounts with the same user.
• Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
• Analytics of how, when and where users are logging in.
• Pull data from other sources and add it to the user profile, through JavaScript rules.

Create a Free Auth0 Account

1. Go to Auth0 and click Sign Up.
2. Use Google, GitHub or Microsoft Account to login.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

auth0-vue-samples's Issues

Vue user profile - adding app_metadata

My issue is similar to the one asked here. After adding a custom claim to a user's profile data, I create a rule to add it to the user's token upon logging in. What I don't understand is how to access and show the custom data inside a Vue app. I know I can't use the same double-bracketed data binding like for {{ $auth.user.name }} in the profile.vue of this sample. But how exactly can it be consumed by the app so that it is visible in the user's profile? I'm assuming it has to do with the guidance offered in the sample-use-cases page, which advised to "use the context.accessToken property" but how exactly do you "use" it? All I see is advice to "[e]xtract the ID Token from the response, decode it, and retrieve the user attributes and use them to personalize your UI," but I can't find anywhere the process for "extracting" and "decoding" clearly explained.

npm install fails with node 12.6.0

As the title says, npm install fails with 12.6.0, works fine with 11.0.0.

In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:222:
In file included from ../../nan/nan_converters.h:67:
../../nan/nan_converters_43_inl.h:22:1: warning: 'ToBoolean' is deprecated: ToBoolean can never throw. Use Local version. [-Wdeprecated-declarations]
X(Boolean)
^
../../nan/nan_converters_43_inl.h:18:12: note: expanded from macro 'X'
      val->To ## TYPE(isolate->GetCurrentContext())                            \
           ^
<scratch space>:86:1: note: expanded from here
ToBoolean
^
/Users/myuser/.node-gyp/12.6.0/include/node/v8.h:2523:3: note: 'ToBoolean' has been explicitly marked deprecated here
  V8_DEPRECATED("ToBoolean can never throw. Use Local version.",
  ^
/Users/myuser/.node-gyp/12.6.0/include/node/v8config.h:311:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:222:
In file included from ../../nan/nan_converters.h:67:
../../nan/nan_converters_43_inl.h:40:1: warning: 'BooleanValue' is deprecated: BooleanValue can never throw. Use Isolate version. [-Wdeprecated-declarations]
X(bool, Boolean)
^
../../nan/nan_converters_43_inl.h:37:15: note: expanded from macro 'X'
  return val->NAME ## Value(isolate->GetCurrentContext());                     \
              ^
<scratch space>:93:1: note: expanded from here
BooleanValue
^
/Users/myuser/.node-gyp/12.6.0/include/node/v8.h:2561:3: note: 'BooleanValue' has been explicitly marked deprecated here
  V8_DEPRECATED("BooleanValue can never throw. Use Isolate version.",
  ^
/Users/myuser/.node-gyp/12.6.0/include/node/v8config.h:311:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:223:
In file included from ../../nan/nan_new.h:189:
../../nan/nan_implementation_12_inl.h:356:37: error: too few arguments to function call, expected 2, have 1
  return v8::StringObject::New(value).As<v8::StringObject>();
         ~~~~~~~~~~~~~~~~~~~~~      ^
/Users/myuser/.node-gyp/12.6.0/include/node/v8.h:5381:3: note: 'New' declared here
  static Local<Value> New(Isolate* isolate, Local<String> value);
  ^
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:223:
In file included from ../../nan/nan_new.h:189:
../../nan/nan_implementation_12_inl.h:356:58: error: expected '(' for function-style cast or type construction
  return v8::StringObject::New(value).As<v8::StringObject>();
                                         ~~~~~~~~~~~~~~~~^
../../nan/nan_implementation_12_inl.h:356:60: error: expected expression
  return v8::StringObject::New(value).As<v8::StringObject>();
                                                           ^
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:2722:
../../nan/nan_object_wrap.h:24:25: error: no member named 'IsNearDeath' in 'Nan::Persistent<v8::Object, v8::NonCopyablePersistentTraits<v8::Object> >'
    assert(persistent().IsNearDeath());
           ~~~~~~~~~~~~ ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/assert.h:93:25: note: expanded from macro 'assert'
    (__builtin_expect(!(e), 0) ? __assert_rtn(__func__, __FILE__, __LINE__, #e) : (void)0)
                        ^
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:2722:
../../nan/nan_object_wrap.h:127:26: error: no member named 'IsNearDeath' in 'Nan::Persistent<v8::Object, v8::NonCopyablePersistentTraits<v8::Object> >'
    assert(wrap->handle_.IsNearDeath());
           ~~~~~~~~~~~~~ ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/assert.h:93:25: note: expanded from macro 'assert'
    (__builtin_expect(!(e), 0) ? __assert_rtn(__func__, __FILE__, __LINE__, #e) : (void)0)
                        ^
2 warnings and 5 errors generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/myuser/Projects/vue-meetup/auth0-vue-samples/01-Login/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:203:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.5.0
gyp ERR! command "/Users/myuser/.nvm/versions/node/v12.6.0/bin/node" "/Users/myuser/Projects/vue-meetup/auth0-vue-samples/01-Login/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/myuser/Projects/vue-meetup/auth0-vue-samples/01-Login/node_modules/node-sass
gyp ERR! node -v v12.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Bootstrap Vuex user store after authentication, before loading any modules

I have the sample working perfectly. After authentication, I want to call my backend api and get user application settings. I want this to happen before loading any modules.

Any ideas where to place that call so it executes prior to anything else loading?

Support useRefreshTokens in auth0client

Any reason why we shouldn't use useRefreshTokens to make use of rotating refresh tokens if enabled ? If not, seems like a good optional addition to the plug-in.

Missing profile data

When we run the demo locally, we can authenticate etc, but $auth.profile does not contain profile data as outlined here but rather the claims data:

{
  "iss": "...",
  "sub": "...",
  "aud": "...",
  "iat": ...,
  "exp": ...,
  "nonce": "..."
}

The docs here seem to confirm this:

• https://auth0.com/docs/api-auth/tutorials/adoption/scope-custom-claims

Is there a reason the code in this demo seems to be different (i.e. having profile data returned in the auth call) to what the docs describe (claims only) ?

Perhaps the repo is out of date?

Deprecated dependencies.

Got several warnings of deprecated dependencies used in the sample project.

Will vue-router hash mode be supported?

Hi,

These samples works well only in vue-router history mode. But the default for vue-router is hash mode. Do you have a plan to support hash mode in the future?

Error component issues

Hi,

The error component uses {{msg}} but msg() is declared as a method. I believe it should be a computed value, like show

White screen of death on Safari (Windows, iOS) and Chrome (iOS)

Login sample not working on Safari (Windows, iOS) and Chrome iOS. White screen is shown whenever site is opened. Samples are working perfectly on windows (Chrome, Firefox).

I can see the following error in console on Safari (Windows, iOS)
Syntaxerror: unexpected keyword 'const'. const declarations are not supported in strict mode.
Issue not resolved even after replacing all occurrences of const (except in node_modules) with var,
So I think some modifications are required in webpack configs or installed modules to generate ES5 compatible code without const keyword.

Login the successful login

Hi Steve Hobbs,
Great wee package. One question the project i am working on has a logging service that catches API calls and a bunch of other things.

I am trying to capture the point where a user successfully logs in within the authWrapper.js -> useAuth0 method. Currently the previous dev team added it to the .finally of the 'created' method after dispatching an action to take the Auth0 token and querying another service. But this is triggered by page refreshes.

Any thoughts?

Cheers

Double-page load on page refresh when authenticated

It seems that if you're already logged in, then refresh the page, the demo does a second page reload to authenticate:

1. Go to http://localhost:3000
2. Log in
   • the site loads
   • you immediately see "User's profile picture" (missing profile data for my login, so it looks broken)
   • so far so good
3. Reload the page
   • the page reloads
   • you see the "Log in" button
   • there is a short delay as you are authenticated in the background
   • the button changes from "log in" to "User's profile picture"
   • the visible delay here is a bit clunky
4. Navigate to http://localhost:3000/external-api
   • the page loads as expected
5. Reload the page
   • the page reloads
   • the button reads "log in"
   • there is a short delay as you are authenticated in the background
   • the page FULLY reloads, showing the #authentication hash in the URL
   • you immediately see "User's profile picture"
   • the full page reload is really clunky

It seems this could be fixed by changing Auth.login() to Auth.getAccessToken() in the router, but with some additional logic to register an initial page load.

Additionally, the accessToken and tokenExpiry could be saved in local storage and the service hydrated when the app loads.

Along with #70 I'll probably do some work on this to provide a more Vue-like experience.

I can PR when done.

After 'Log In' the home page still shows not logged in

The issue that i first noticed, whats the home page shows' at first Log In, after I log in i get redirected to universal log in and then back to home (root) however it still says Log In (at this moment isAuthenticated page variable is null). Well it does get set to true but then due to data.state.target is undefined it gets set to false again)

After I click log in, it makes the call to Auth0, gets authenticated and returns to callback component, which redirects to the root and at this moment and the navbar component reads the loggedIn value (which is true at this moment)

(within navbar.vue)
handleLoginEvent(data) {
this.isAuthenticated = data.loggedIn; ///Right here it is true
this.profile = data.profile;
}

however, it also hits the method handleLoginEvent within the callback.vue at which point !data.error returns true and then does $route.push(data.state.target || "/") which in which data.state is null and so throws exception setting data.loggedIn to false (and the navbar then shows the user as not logged in but in fact he/she is)

methods: {
handleLoginEvent(data) {
if (!data.error) {
this.$router.push(data.state.target || "/");
}
}
}

why am i getting data.state =null (which causes exception when trying to access data.state.target as it is now undefined)?

Question: Why declare a new Vue instance in the plugin?

Apologies if this isn't the right place to ask this, please close and redirect me if there's a better spot.

I'm curious why both the examples in this repo elect to construct an entirely new Vue instance in the plugin like this.

auth0-vue-samples/01-Login/src/auth/authWrapper.js

Line 18 in c0b9ced

instance = new Vue({

Why this pattern versus simply defining global methods, like suggested inthe Vue documentation here?

Vulnerabilities found in the VueJS samples

Description:
After running the npm install command, 453 high severity vulnerabilities were found.

VUE Quickstart: Difference between snippet code in the tutorial page and the seed project.

Vue.js quickstart: https://auth0.com/docs/quickstart/spa/vuejs

There's a difference between the quickstart project code and the snippet code in the tutorial page.
Specifically the import section in the file:

• src/Auth/AuthService.js

What is the API IDENTIFIER in Scenario #2 - Calling an External API

Could you please tell me what should I enter for this following variable?

"audience": "<YOUR AUTH0 API IDENTIFIER>",

VUE Quickstart: Difference between snippet and code from the sample project in the tutorial page.

VUE Quickstart: https://auth0.com/docs/quickstart/spa/vuejs

A directory path description is missing, this will allow
the users verify the information regarding the clientID
and domain in the project directory
(from the sample project downloaded)
For example, you can verify if the client ID and domain
is set going to the following file in the project directory.
This will allow the users verify the set of this information in the project downloaded.

Why i lost user data e.g name picture .. etc when i refresh page ?

handleRedirectCallback usage

auth0-vue-samples/01-Login/src/auth/authWrapper.js

Line 45 in c0b9ced

async handleRedirectCallback() {

Is the above function used anywhere?

Callback URL mismatch even with callback URL set

Hi,
I am following an example of setting up Auth0 with Vue SPA, but at the point of login I am getting a Callback URL mismatch error even though the callback URL is set exactly as in the manual:

Also, when trying to set up a Login URI, I am getting the following error in the console:
Error! Payload validation error: 'Object didn't pass validation for format absolute-uri-or-empty: http://localhost:3000' on property initiate_login_uri (Initiate login uri, must be https and cannot contain a fragment).

Update to vue2

This should be updated to use vue2 instead of vue1.

Error during npm start

Got an error when running npm start, can not find module "Chalk."

Issue with AuthService property not being passed into Callback component

After login it successfully calls the callback URL - http://localhost:8080/callback this is routed to the Callback.vue component but the auth instance of AuthService is undefined -

vue.esm.js?efeb:476[Vue warn]: Error in data(): "TypeError: Cannot read property 'handleAuthentication' of undefined"

found in

---> at src\components\Callback.vue
at src\App.vue

outdated dependency

The Auth0.js currently used in this project(V8) is outdated, latest release and correct one's V9.0.0

After login, refreshing the page and returning information is too slow.

After logging in, refreshing the page, some methods and user information returned by auth0 are particularly slow, and it takes about a minute to wait. Have you encountered such a problem again?

Is isAuthenticated() Reliable?

I am able to update localStorage with localStorage.setItem('expires_at', Date.now() + 86400000) which sets the expiration to 24 hours later. After setting that, I refresh the application and I am "logged in."

Perhaps checking the expiration alone is not a sufficient method of determining if a user is authenticated. Or it could just be a misunderstanding on my part.

Vue User Profile

Can someone help me on how to fetch user profile after they signed up to display that profile info into users profile page ?

There are some examples using react and other frameworks but none using Vue 2

Thnx in advance!

Feedback on the Vue samples

I am an old friend of Auth0, even worked for a while on improving Aurelia samples set (more on that at a different time) and am currently interested in Auth0 support for Vue. Unlike my previous work on a few Aurelia Open Source projects, I am now looking at Auth0 as the identity management provider for a big company in the healthcare market that hired me as the "adviser to the CEO".

With this explanation, allow me a few critical comments on the incomplete Vue QuickStart samples:

1. Missing samples

This existing set has only 01-Login and 05-Authorization samples. I believe that for the consistency reasons, the samples set should follow the structure and content of the auth0-javascript-samples set.

2. Sample 01-Login is a lot more complicated than it should be

Just check the list of dev-dependencies - and my characterization would seem mild 😄

3. npm install command results with indication of serious problems

λ npm install
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 116 packages from 394 contributors and audited 10559 packages in 9.437s
found 21 vulnerabilities (11 low, 1 moderate, 7 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

4. Samples are not created with Vue CLI 3.x

I am of the firm opinion that each of the samples targeting the specific platform, should follow the "coding practices" of these platforms.

Global mixin

Hi there,

Just checking out this project for a new Vue project.

I've been trying to understand the global mixin approach, but having given it a good going over, I'm not sure it's the best way to do things in Vue, though I see what it is trying to demonstrate.

Being a global mixin, it adds the created and destroyed lifecycle hooks to every component instance in your app; there could be 100s or 1000s of these (every item in a list, for example).

The purpose appears to be to check if the component has a handleLogin method. This could be done by making the mixin local, and just including it in the components that need it:

export default {
  mixins: [Auth],
}

Secondly, adding an event listener, doesn't work on a component unless it is on the screen as you log in. For example, the code which assigns the profile data to the profile component will store it only whilst that component is on the screen. As soon as you navigate and come back, the data is lost.

https://github.com/auth0-samples/auth0-vue-samples/blob/master/01-Login/src/views/Profile.vue#L27-L29

There are several ways you could do this in Vue:

• javascript module
• local storage
• shared store
• vuex

I'm just not sure Vue benefits from having event listeners spread across components when its own reactivity engine would handle this natively.

I can submit a PR if you like?

VUE Quickstart: Warnings after npm install execution

Vue.js quickstart: https://auth0.com/docs/quickstart/spa/vuejs

Warnings after npm install execution.

Login samples Production mode issue

Login sample are not working in production mode.
Steps to reproduce issue 1

1. npm install --only=production
2. npm start

Error 1
module.js:471
throw err;
^
Error: Cannot find module 'chalk'
Conclusion 1
Not all devDependencies are devDependencies. Some devDependencies should be moved to dependencies section

Issue 2
Even after installation of all dependencies using npm install in development mode, App won't run in production mode although it works fine in development mode.

Production mode error after installation of all dependencies

[email protected] start L:\01-login
node build/dev-server.js

npm WARN invalid config loglevel="notice"

ERROR Failed to compile with 3 errors 12:00:51 AM

error in ./src/App.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (L:\01-login\node_modules\extract-text-webpack-plugin\loader.js:25:9)

@ ./src/App.vue 2:2-371
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Home.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (L:\01-login\node_modules\extract-text-webpack-plugin\loader.js:25:9)

@ ./src/components/Home.vue 2:2-381
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Callback.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (L:\01-login\node_modules\extract-text-webpack-plugin\loader.js:25:9)

@ ./src/components/Callback.vue 2:2-385
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

Listening at http://localhost:8080

Wrong apiUrl parameter in Vue sample project.

When download the Sample project, the parameter apiUrl in\01-login\src\auth\auth0-variables.js is not propely prepopulated.

I'm logged in a tenant in Australia region, and the apiUrl parameter still shows the audience from the European region tenant.

AUTH-3349

Vue2.0 deprecated lifecycle hook

Noticed inside of package.json, Vue2.0 is being used. However, the lifecycle hook from 1.X to 2.X has changed Ready() to mounted()

https://vuejs.org/v2/guide/instance.html

https://github.com/auth0-samples/auth0-vue-samples/blob/master/01-Login/package.json#L20

In app.js you are using mounted() but the documentation on quickstart guide is not updated

VueJS Quickstart: auth_config.json not overwriting user's domain and client ID

In the VueJS Quickstart, if the user downloads the sample while being logged in, the Domain and Client ID should be overwritten in the auth_config.json file.

refreshing the page causes user to have to login again

in chrome, if I hit Refresh, then the user is required to re-login. how do I overcome this?

Typo in Documentation

In the quickstart documentation there is a typo at this line, should be authorization not authorizaton

this.lock.on('authorizaton_error', (error) => {
    // handle error when authorization fails
  });

Logout not displayed properly

I download and run the sample but after I successfully login I still see the Login button instead of the Logout. If I press Login again and once Lock loads close it (without logging in again) I can see the Logout button.

outdated dependencies

Sample using outdated dependency (including auth0-lock). (AUTH-3705)

Missing Vue.js getting started link inside the tutorial (for vue beginners)

Vue.js tutorial page: https://auth0.com/docs/quickstart/spa/vuejs

If I'm a vue beginners, I've to go out the tutorial page looking for more vue information, we can add a link to Vue getting started like this:

• https://vuejs.org/v2/guide/

There I'll find the necessary information in order to know/start with vue.

outdated dependencies

(AUTH-4061)
Sample using outdated version of dependencies such as Vue, vue-resource, vue-router, babel-loader and others.

outdated dependencies

• vue 1.0.16 -> 1.0.24
• vue-resource 0.7.0 -> 0.9.3
• vue-router 0.7.10 -> 0.7.13

Vue.js Example '01-login' fails with 401 unauthorized

I downloaded the example and ran it as described in the quickstart guide.
The app starts fine and also the Auth0 Login works with my Google Account.

However after I log in (or better said sign up since this is the first attempt with my Google Account). The page returns the following:

The chrome dev tools panel shows me a 401 error code from that request https://alemanni-game.eu.auth0.com/oauth/token and the response is:

{"error":"access_denied","error_description":"Unauthorized"}

The logs show me the following:

Here the details of the 'Failed Exchange':

{
  "date": "2020-08-25T10:48:24.338Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "<client_id>",
  "client_name": null,
  "ip": "78.35.206.11",
  "user_agent": "Chrome 83.0.4103 / Linux 0.0.0",
  "details": {
    "code": "*************b8p"
  },
  "hostname": "alemanni-game.eu.auth0.com",
  "user_id": "",
  "user_name": "",
  "log_id": "90020200825104825180000599953486520206291538153981345826",
  "_id": "90020200825104825180000599953486520206291538153981345826",
  "isMobile": false
}

I am using a Single Page Application:

And the API is the default 'Auth0 Management API'. Somebody said I need to configure Machine to Machine Applications in that API - however the search input field in there does not yield any results to I can not configure anything.

I am very confused why that example does not work in my case :(

PS: Every whitelisting in the Application settings was set to http://localhost:3000

Outdated auth0.js dependency

In Package.json the Auth0.js library is set to version 8.8, the latest version is 8.9

AUTH-3349

Should use mount instead of ready

I wasn't able to get the data to process for the ready state. mount ended up working perfectly.

error in npm run buil

Fresh checkout, run npm install then npm run build. It works but at the end I get this error.
using nove 8.9.0 on ubuntu 17.04.

ERROR in static/js/vendor.f04c1d01f4534f33e779.js from UglifyJs
Unexpected token: name (EventEmitter) [./node_modules/EventEmitter/src/index.js:16,0][static/js/vendor.f04c1d01f4534f33e779.js:21113,6]

Update lock version to 10

fix #5

Could not get a new token (login_required: Login required).

I downloaded the sample app last week. There was a problem with it never requesting a logout for Auth0, which I reported on the community site. The suggestion I was given seemed to work, but I then had a different issue - an alert saying Could not get a new token (login_required: Login required) which I could not get rid of.

Before reporting it here I upgraded to Node.js LTS (10), and did a new install of the sample app. I believe that I followed the given instructions. The same alert issue appears immediately, so it seems impossible to use. If it helps, my browser is Google Chrome (up to date - Version 71.0.3578.98 (Official Build) (64-bit)).

Is there something wrong with my set up?

I attach a screenshot.

npm run build Error

Hi,

When i try to build for production i get this error:

ERROR in static/js/vendor.a68eaa00d8a774012425.js from UglifyJs
Unexpected token: name (EventEmitter) [./node_modules/EventEmitter/src/index.js:16,0][static/js/vendor.a68eaa00d8a774012425.js:19845,6]

Here´s the full terminal:

[email protected] build /Users/Gernot/www/dev/ombrelleria/01-login
node build/build.js

⠧ building for production...(node:6671) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

Starting to optimize CSS...
Processing static/css/app.ad95d194046acfc443170f6e1e31d292.css...
Processed static/css/app.ad95d194046acfc443170f6e1e31d292.css, before: 154708, after: 148766, ratio: 96.16%
Hash: 1397de7e08420c11bc29
Version: webpack 3.5.1
Time: 14368ms
Asset Size Chunks Chunk Names
static/img/glyphicons-halflings-regular.8988968.svg 109 kB [emitted]
static/fonts/glyphicons-halflings-regular.f4769f9.eot 20.1 kB [emitted]
static/fonts/fontawesome-webfont.af7ae50.woff2 77.2 kB [emitted]
static/fonts/fontawesome-webfont.fee66e7.woff 98 kB [emitted]
static/fonts/fontawesome-webfont.b06871f.ttf 166 kB [emitted]
static/img/fontawesome-webfont.912ec66.svg 444 kB [emitted] [big]
static/fonts/glyphicons-halflings-regular.448c34a.woff2 18 kB [emitted]
static/fonts/glyphicons-halflings-regular.fa27723.woff 23.4 kB [emitted]
static/fonts/glyphicons-halflings-regular.e18bbf6.ttf 45.4 kB [emitted]
static/fonts/fontawesome-webfont.674f50d.eot 166 kB [emitted]
static/js/vendor.a68eaa00d8a774012425.js 655 kB 0 [emitted] [big] vendor
static/js/app.fcc47ad19f8bf8549094.js 16.1 kB 1 [emitted] app
static/js/manifest.a42480d1744d86f0755f.js 1.49 kB 2 [emitted] manifest
static/css/app.ad95d194046acfc443170f6e1e31d292.css 149 kB 1 [emitted] app
static/js/vendor.a68eaa00d8a774012425.js.map 827 kB 0 [emitted] vendor
static/js/app.fcc47ad19f8bf8549094.js.map 73.8 kB 1 [emitted] app
static/css/app.ad95d194046acfc443170f6e1e31d292.css.map 250 kB 1 [emitted] app
static/js/manifest.a42480d1744d86f0755f.js.map 14.2 kB 2 [emitted] manifest
index.html 454 bytes [emitted]

ERROR in static/js/vendor.a68eaa00d8a774012425.js from UglifyJs
Unexpected token: name (EventEmitter) [./node_modules/EventEmitter/src/index.js:16,0][static/js/vendor.a68eaa00d8a774012425.js:19845,6]

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

How to go from client to server API

The client SPA logs in and gets access token and id token. When making authorized requests,
we pass id_token in the header (via HTTP interceptor).

How would a server verify the user identify in this case? Should it be access token instead? Is this an example of "implicit grant"?

Any advice would be appreciated.

Error during npm install

I get an error, when running "npm install"

npm ERR! Unexpected string in JSON at position 3485 while parsing '{
npm ERR!   "name": "auth0-vue-samples",
npm ERR!   "vers'

And i can figure out where the problem lies, since this is directly download from the master.