auth0-blog / vuejs2-authentication-tutorial

Vuejs 2 Authentication Tutorial

This is the code that accompanies the Vuejs 2 Authentication Tutorial on Auth0 Blog

Lock Login Widget

User presented with an option to authorize

Installation

# Get the project
git clone [email protected]:auth0-blog/vuejs2-authentication-tutorial.git vuejs2-authentication-tutorial


# Change directory
cd vuejs2-authentication-tutorial

# Install the dependencies
npm install

# Run your app
npm run dev

vuejs2-authentication-tutorial's Issues

Wrong expiration date property

Great Tutorial, Just a quick note:

I think in the function getTokenExpirationDate the property used to get the expiration date should be token.token_expiration_date

function getTokenExpirationDate (encodedToken) {
const token = decode(encodedToken)
if (!token.token_expiration_date) { return null }

const date = new Date(0)
date.setUTCSeconds(token.token_expiration_date)

return date
}

Cheers

Cloned the repo npm run dev fails

Hi,

I cloned and did npm install then npm run dev, starting server fails with this error:

Starting dev server...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8080
    at Object.exports._errnoException (util.js:1018:11)
    at exports._exceptionWithHostPort (util.js:1041:20)
    at Server._listen2 (net.js:1258:14)
    at listen (net.js:1294:10)
    at Server.listen (net.js:1390:5)
    at EventEmitter.listen (C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial\node_modules\express\lib\application.js:618:24)
    at Object.<anonymous> (C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial\build\dev-server.js:82:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the startupbattle package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs startupbattle
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls startupbattle
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial\npm-debug.log

And this is the npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\oraclexe\app\oracle\product\11.2.0\server\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\Python36\Scripts\;C:\Python36\;C:\Users\payam.mesgari\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\payam.mesgari\AppData\Roaming\npm;C:\Program Files\Java\jre1.8.0_131;C:\Program Files\Java\jdk1.8.0_131;
10 verbose lifecycle [email protected]~dev: CWD: C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial
11 silly lifecycle [email protected]~dev: Args: [ '/d /s /c', 'node build/dev-server.js' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `node build/dev-server.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Workspace\Vuejs\auth-app\vuejs2-authentication-tutorial
17 error Windows_NT 10.0.15063
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] dev: `node build/dev-server.js`
22 error Exit status 1
23 error Failed at the [email protected] dev script 'node build/dev-server.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the startupbattle package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     node build/dev-server.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs startupbattle
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls startupbattle
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

UnauthorizedError: jwt issuer invalid.

Hi,

I followed your tutorial on https://auth0.com/blog/vuejs2-authentication-tutorial/ but I am getting an error when I want to access the Private route.

The error on my server log is:

GET /api/test/public 304 0.785 ms - -
OPTIONS /api/test/private 204 0.835 ms - -
GET /api/test/private 401 405.760 ms - 650
UnauthorizedError: jwt issuer invalid. expected: https://myurl.eu.auth0.com

I can confirm that the error expected url is same as issuer!
in my router if I remove the authCheck everything works, but once I add the authCheck function, I can not read the file.
In my browser I get the 401 (Unauthorized)

authCheck function:

const authCheck = jwt({
  secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: "https://myurl.eu.auth0.com/.well-known/jwks.json"
    }),
    // This is the identifier we set when we created the API
    audience: 'https://www.myurl.com/api',
    issuer: "https://myurl.eu.auth0.com",
    algorithms: ['RS256']
});

My front-end api-axios file:

function getPrivate() {
  const url = `${BASE_URL}/test/private`;
  return axios.get(url, { headers: { Authorization: `Bearer ${getAccessToken()}` } }).then(response => response.data);
}

Can someone help me with this ? Where is the problem ?

jwt malformed

Hi,

I cloned and did npm install then npm run dev and also I started server by npm start
I made an account in auth0 and setup everything
but when page calls the private api I receive this error:

UnauthorizedError: jwt malformed
    at /Users/amirbidva/vuejs2-authentication-tutorial-master/server/node_modules/express-jwt/lib/index.js:100:22
    at /Users/amirbidva/vuejs2-authentication-tutorial-master/server/node_modules/jsonwebtoken/index.js:155:18
    at process._tickCallback (internal/process/next_tick.js:150:11)

what should be the value of issuer in server.js?

It seems the API interface of auth0 changed. right?

the code is not working anymore

Token key hard coded in front

There is something I don't understand : should'nt ID_TOKEN_KEY be received by auth0 and set during login instead of being hard coded in the front end as it is done here ?