Vuejs-Auth0 vue: Vue.js 2.5 with vue-cli v3 including authentication with auth0 by Dominik Angerer, Storyblok

Auth0 Vue

Make sure to exchnage the auth0 information with your own in the auth.js.

A Vue.js Demo Application which uses Auth0 for Authentication

Final Result

You can follow the full tutorial on Storyblok or simply use this as a boilerplate for your applications.

The tutorial for this repository...

can be found on Storyblok. It guides you through the following steps:

How to use

  1. Checkout this repository
  2. Exchange your Auth0 client settings in src/auth.js
  3. Navigate into the project folder
  4. Execute npm install or yarn to install dependencies
  5. Start application: npm run serve

Feedback

I'm looking forward to receive your feedback, best place would definitly be in the comment section at the bottom of the tutorial on Storyblok.

What to expect

This application/tutorial gives you a quick feeling of how to use Auth0 with your Vue.js application, you can also use it as a starting point for your projects.

Comments

  • Update logout
    Update logout

    Sep 1, 2018

    Update logout function to take client ID and redirect location per docs here: https://auth0.com/docs/libraries/auth0js/v9#logout

    Note: User must add redirectTo value in "Allowed Logout URLs" in the dashboard or they will get an error.

    Issue ref: #2

    Reply
  • Update auth0-js to version >9.3.0
    Update auth0-js to version >9.3.0

    Apr 24, 2018

    Known vulnerability -> update in package.json and package-lock

    Reply
  • script doesn't work when build'ed
    script doesn't work when build'ed

    Nov 15, 2018

    Hey Dominik,

    Im having problems, when i build this repo, and try to use it.

    When i enter the url for the site http://test.rasmusp.com i get an error "Not Found - the requested URL /callback was not found on this server." and doesn't redirect to the login screen

    I have changed the redirectUri in the script and the allow urls on auth0. I works fine, when i run "npm run serve" - can you help me to why it doesn't work ?

    Reply
  • Logout loop
    Logout loop

    Sep 1, 2018

    Thanks so much for putting this together! It's frustrating that all of the official docs I've tried to follow so far haven't worked.

    One issue, I can't actually log out with the tutorial. It does delete from local storage, but then webAuth.authorize() fires and the user is logged in again.

    To fix I needed to:

    1. Add a logout route in the Auth0 dashboard
    2. Change the logout function to be:
    logout() {
      return new Promise((resolve, reject) => {
        localStorage.removeItem('access_token')
        localStorage.removeItem('id_token')
        localStorage.removeItem('expires_at')
        localStorage.removeItem('user')
        webAuth.logout({
          returnTo: 'http://localhost:8080/', // the logout route added to dashboard goes here
          clientID: '...', // same clientID in the constructor
        })
    })
    

    I don't know if you're still updating this, but I'd be happy to make a PR with those changes.

    help wanted 
    Reply