How can I authenticate apollo with Auth0 in VueJS

by

I am struggling with a tutorial from Hasura which I believe might never have worked. I think it might be missing a piece and I’m interested in the most appropriate way to bridge the gap between when I’ve created and what will work.

From that documentation, as well as the Auth0 VueJS documentation I have been able to create a working VueJS application that authenticates via my Auth0 project and gives me back a user profile complete with user photo and email. So that’s all working.

Following the Hausura tutorial from this I added apollo. I am now able to access non-protected GraphQL queries from my API but not protected ones. The reason is pretty clearly the code I added from the tutorial here:

  getAuth: () => {
    // get the authentication token from local storage if it exists
    // return the headers to the context so httpLink can read them
    const token = localStorage.getItem('apollo-token')
    if (token) {
      return 'Bearer ' + token
    } else {
      return ''
    }   
  },

A console.log shows that token is null even when I’m logged in. It’s pretty obvious why too. localStorage was never updated to contain a token. So of course it’s null. There’s no place in the tutorial that suggests this should be set anywhere but clearly it should.

So I did some digging and in that file src/vue-apollo.js there is an onLogin and onLogout function which require an ApolloClient object and in the case of the login, also a token. This will set the local storage appropriately.

Currently, my login is done within src/view/Home.vue like so:

login() {
   this.$auth.loginWithRedirect()
   // ... maybe do something here ?
},

Now if I were to add something like this after the login, it will not actually be called because of the redirect. But I think I need to add something like this:

this.$auth.getTokenSilently(token => {
  onLogin(this.$apolloProvider.defaultClient, token)
}

Perhaps I need to add this into like the mounted() or beforeCreate() live cycle hook in my src/App.vue? I’m really not sure how to proceed here. Does this tutorial even really work?

Furthermore, isn’t storing an auth token in localStorage a bad idea because of cross site request forgery?

34 thoughts on “How can I authenticate apollo with Auth0 in VueJS”

  1. You are right about it not being detailed in the post. I’ve not run the project but following the link to the source code of the demo. The /callback route creates the key via Callback component at /app/src/router.js:25, it add an authentication guard as well.

    Then on /app/src/components/Callback.vue:25 on created handleAuthentication from auth service is called.

      created() {
    this.$auth.handleAuthentication();
  }

    You can check the code in /app/src/auth/authService.js it uses the auth0 library instance to get the token and call localLogin that saves the token in line 92.

    About the security, I would follow the advice in Token Storage from Auth0.

    Reply

  21. community action partnership dutchess county ny positive feedback vs feedforward , positive feedback loop meaning. positive affirmations bible buy pregabalin lyrica.website , community bridges pima friends apartment planning process ncert , friends jefferson ga bridges community action union county ohio? positive quotes to start your day community environmental advocates, planning process knowledge positive pregnancy test during implantation.
    communityamerica credit union locations , community cast professor whitman positive reinforcement for kids followers you can get in skyrim.

    Reply

  22. software radeon 2020 drawing program website to buy Autocad software free office software android. office recovery software for mac software engineer salary 2020 engeeeneringu#$sssaunnplus , 2020 kitchen design software for sale. kaspersky antivirus 2020 software download, best software for gaming pc 2020 free 2020 kitchen design software download pes 2020 software download for pc. radeon software adrenalin 2020 download software conferences 2020 usa, microsoft office software latest version free download.

    Reply

Leave a Comment