All good!
methods: {
authenticate: function (provider) {
var this = this;
this.$auth.authenticate(provider).then(function () {
// Execute application logic after successful social authentication
console.log(this.$auth.getToken());
this.$router.push('/dashboard');
})
}
}
I needed to add the this_ , I was trying to use this.$auth.getToken() before but it was undefined.
8080
while the frontend runs on 8081
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();
self.$axios
.get("social/auth", {
params: { token: token, driver: provider }
})
.then(function(response) {
self.$root.closeDrawer();
self.$root.signin(response.data);
});
});
}
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
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: {
clientId: window.CONSTANTS.APP_LINKEDIN_CLIENT_ID,
redirectUri: linkedInAuth.redirectUrl,
requiredUrlParams: ['scope', 'state'],
scope: ['r_emailaddress', 'r_liteprofile']
}
}
})
authenticate(provider) {
this.$auth.authenticate(provider).then((response) => {
console.log(response);
console.log(this.$auth.getToken());
axios({
url: 'https://api.linkedin.com/v2/me',
headers: {Authorization: `Bearer ${this.$auth.getToken()}`},
method: 'GET'
})
.then(resp => {
console.log(resp);
}).catch(err => {
console.log(err);
});
}).catch((error) => {
return Promise.reject(error);
});
},
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
main.ts
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",
},
}
});
app.use(router).use(VueApexCharts).mount("#app");
Login.vue
<template>....
</template>
<script>
// import GitHub from "github-api";
export default {
name: "LoginView",
methods: {
authenticate(provider) {
this.$auth
.authenticate(provider)
.then(function () {
// Execute application logic after successful social authentication
console.log("success");
console.log(this.$auth);
})
.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
// });
},
};
</script>
I am getting the following error:
app.js:1457 Uncaught TypeError: Object.defineProperties called on non-object