Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    vue-authenticate plugin.
    Alessandro Sanino
    hello guys
    what flow do you usually follow if you need to regiter a user on your SPA from data from various social network (let's take Google as example)
    so ive just figured out how to use aws-amplify's Auth.signIn() method to check a cognito pool. now i have to learn about vuex's state management and how to persist locally. will this package help me get there quicker??
    Davor Grubelić
    Hi @Showcase-Joz this library is for OAuth 1/2 use only. It seems to me that AWS Amplify has it's own authentication flow, so I don't see how could you use this lib with it.
    Christopher Norkett
    Has anyone setup a provider for Twitch auth?
    Davor Grubelić
    Hi, have you checked their dev docs? https://dev.twitch.tv/docs/authentication
    Since it is OAuth, it is pretty much the same as for any other provider, you just change redirect uri, client_id and client_secret
    Christopher Norkett
    Yes I've been using the docs. I've been able to get it to authenticate. My issue right now is the popup window will get the callback with the auth token and I need to save the token before the window closes. I'm assuming I'll need to use the custom interceptor but any guidance would be appreciated
    Davor Grubelić
    What do you mean "you need to save token"? If authentication went well, you ca get token from $auth instance itself: this.$auth.getToken().
    Christopher Norkett
    When it resolves with twitch it redirects to a url with the token example: https://localhost#access_token=0123456789abcdefghijABCDEFGHIJ
    I want to save the token in the state for future calls
    Christopher Norkett

    All good!

    methods: {
    authenticate: function (provider) {
    var this = this;
    this.$auth.authenticate(provider).then(function () {
    // Execute application logic after successful social authentication

    I needed to add the this_ , I was trying to use this.$auth.getToken() before but it was undefined.

    Kysen Jackman
    Good morning. How to center the auth popup?
    hello! how can I use this plugin in a regular vue import style like this in main.js ? import authenticate from "./plugins/authenticate"; new Vue({
    render: h => h(App)
    Waldemar Enns
    Hey there, i found this module in the official alerta-webui project (Version 7.0). I am using keycloak as my auth provider in alerta. So basically i want to re-use the access_token from keycloak for API requests to another API, i want to integrate in alerta-webui 7.0 - so i coded everything but the token seems to be invalid. So my question is pretty easy: Do i get the id_token or the access_token? I need the access_token. If I get the id_token: How can i manage the auth-configuration of vue-authenticate in alerta-webui so that i get the access_token additionally? Thank's a lot!
    Samy Dindane
    Hi everyone. I managed to have vue-authenticate call my backend with the code, clientId and redirectUri, but I have no information about the user in order to store their access token (after requesting it). How should I go about that?
    I am I supposed to request an access token using the code and return that same token to the client side?
    Samy Dindane
    Ok that seems to be the case.
    Waldemar Enns
    Hey @Dinduks , can you paste a link to the comment please? Thank you :)
    Hey guys, can someone link me a good tutorial for, generic outh2, i.e laravel passport or any custom provider and using vue-auth for front-end.tutorial only for front-end.
    @all any help please.
    Waldemar Enns
    It seems that vue-authenticate in combination with popups, does not work out with popups very well, since they get blocked by default from the browser (Chrome in my case). Other libraries' popups do not get blocked (like https://www.npmjs.com/package/oidc-client ) - did anyone faced the same problem? Thanks.
    Hi Guys, anyone has working repo example which leverages VUEX and uses vue-authenticate library?
    Hello, is this community and library alive?
    Davor Grubelić
    Probably looks like "no" at the moment. Sorry about that, I just had some other priorities. I'm currently working on refactoring most of infrastructure and demo site that will allow me to quickly develop new stuff.
    Hello, i need some help in vue-authenticate stuff.
    Anyone one available at this moment?
    Milindu Sanoj Kumarage
    Screenshot from 2020-09-15 23-46-58.png
    I'm getting this error when trying to connect with FB auth
    I have CORS setup in my Spring Boot applications to allow all
    Screenshot from 2020-09-15 23-50-19.png
    My backend run on 8080 while the frontend runs on 8081
    What could be the reason I'm getting this error?
    Milindu Sanoj Kumarage
    Screenshot from 2020-09-15 23-54-01.png
    This is my Vue Authentication configuration
    Fahd ADDI

    hey I'm using vue-authenticate to login via facebook/google, I found a problem after signin, I get the acces_token but the tab doesn’t close and return to my page to execute the call back (send the access_token to back_end) instead it redirects to my website (base_use/#access_token=....)

    authenticate: function(provider) {
          let self = this;
          self.$auth.authenticate(provider).then(function() {
            let token = self.$auth.getToken();
              .get("social/auth", {
                params: { token: token, driver: provider }
              .then(function(response) {

    Expected behavior: after succes login with fb, close the tab and execute the code from let token = self.$auth.getToken();
    Actual behavior: after succes login with fb, it redirects back to my website in the new tab without executing the callback

    Hi, I get Request handler instance not found error on my component
    its something with this.$auth.authenticate(provider).then(function () when I try to auth with twitter

    I am using vue-authenticate and this.$auth.authenticate('linkedin') doesn't provide any response. I am able to launch, login and authenticate in new tab but the tab closes after authentication.

    Vue.use(VueAuthenticate, {
    baseUrl: 'http://localhost:8080/',
    providers: {
    linkedin: {
    redirectUri: linkedInAuth.redirectUrl,
    requiredUrlParams: ['scope', 'state'],
    scope: ['r_emailaddress', 'r_liteprofile']

    I'm having an issue where <div v-if="!this.$auth.isAuthenticated()"> isn't updating without reloading the page.
    If I wrap the isAuthenticated() stuff in a v-if="menuOpen" and toggle that, the auth state gets updated
    Andre-John Mas
    Given that Davor is AWOL and that vue-authenticate hasn't been updated in 9 months, I have chosen to make a fork to continue maintenance, until he is available again: https://github.com/ajmas/vue-authenticate
    Contributions are welcome. The main changes here is Vue3 support. I have dropped Vue2 support so continue using the original project if you need that.
    Stepan Kozurak
    Hello, I'm working on LinkedIn authentication. I already got token and i need to get first name and last name. Can anybody told me how can I get these user data?
    authenticate(provider) {
      this.$auth.authenticate(provider).then((response) => {
          url: 'https://api.linkedin.com/v2/me',
          headers: {Authorization: `Bearer ${this.$auth.getToken()}`},
          method: 'GET'
          .then(resp => {
          }).catch(err => {
      }).catch((error) => {
        return Promise.reject(error);
    Sameer Haque
    Hello everyone. can anyone help me how to set the provider for twitt
    Hi there, I use axios to communicate with my backend server. if we dont want to exposed our backend server to everyone, what choice can we do?
    Hussein Galal

    hello I am having an issue when trying to add simple github authentication, I am using a dashboard template and trying to add the vue-authenticate to the Login.vue, here are my main.ts and Login.vue


    import VueAxios from 'vue-axios'
    import VueAuthenticate from 'vue-authenticate'
    import axios from 'axios';
    import { createApp } from "vue";
    import VueApexCharts from "vue3-apexcharts";
    import DashboardLayout from "./components/DashboardLayout.vue";
    import EmptyLayout from "./components/EmptyLayout.vue";
    import "./assets/tailwind.css";
    import App from "./App.vue";
    import router from "./router";
    const app = createApp(App);
    app.component("default-layout", DashboardLayout);
    app.component("empty-layout", EmptyLayout);
    app.use(VueAxios, axios);
    app.use(VueAuthenticate, {
        baseUrl: "http://localhost:3000", // Your API domain
        providers: {
            github: {
                clientId: "c04d52b64abcd1366f76",
                redirectUri: "http://localhost:9000/auth/callback",


    // import GitHub from "github-api";
    export default {
      name: "LoginView",
      methods: {
        authenticate(provider) {
            .then(function () {
              // Execute application logic after successful social authentication
            .catch((err) => console.log);
      ready() {
        // // unauthenticated client
        // const gh = new GitHub();
        // let gist = gh.getGist(); // not a gist yet
        // gist
        //   .create({
        //     public: true,
        //     description: "My first gist",
        //     files: {
        //       "file1.txt": {
        //         content: "Aren't gists great!"
        //       }
        //     }
        //   })
        //   .then(function({ data }) {
        //     // Promises!
        //     let createdGist = data;
        //     return gist.read();
        //   })
        //   .then(function({ data }) {
        //     let retrievedGist = data;
        //     // do interesting things
        //   });

    I am getting the following error:

    app.js:1457 Uncaught TypeError: Object.defineProperties called on non-object