auth.js
import firebase from 'firebase'
import firebaseui from 'firebaseui';
const config = {
apiKey: "AIzaSyBfEKjNqtQRdeRxd1ocNwAQjPMo80MUn70",
authDomain: "qrpay-23f88.firebaseapp.com",
databaseURL: "https://qrpay-23f88.firebaseio.com",
projectId: "qrpay-23f88",
storageBucket: "qrpay-23f88.appspot.com",
messagingSenderId: "651606142877"
};
const auth = {
context: null,
uiConfig: null,
ui: null,
init(context) {
this.context = context;
firebase.initializeApp(config);
this.uiConfig = {
signInSuccessUrl: 'dashboard',
signInOptions: [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
}
this.ui = new firebaseui.auth.AuthUI(firebase.auth());
firebase.auth().onAuthStateChanged((user) => {
this.context.$store.dispatch('user/setCurrentUser')
let requireAuth = this.context.$route.matched.some(record => record.meta.requireAuth)
let guestOnly = this.context.$route.matched.some(record => record.meta.guestOnly)
if(requireAuth && !user) this.context.$router.push('auth')
else if (guestOnly && user) this.context.$router.push('dashboard')
});
},
authForm(container) {
this.ui.start(container, this.uiConfig);
},
user() {
return this.context ? firebase.auth().currentUser : null;
},
logout() {
firebase.auth().signOut();
}
}
export default auth;
main.js
import Vue from 'vue'
import App from '#/App'
import {router} from '#/router'
import {store} from '#/store'
import auth from '#/auth'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
beforeCreate () {
auth.init(this)
},
template: '<App/>',
components: { App }
})
Here i follow this tutorial https://michaljurkowski.medium.com/how-to-make-basic-authentication-in-vue-js-using-google-firebase-e3ec7dad274.
but i get a error Uncaught SyntaxError: ambiguous indirect export: default.how to solve this?
Related
I'm using vue 3 with composition api and vuex 4, I've done it this way before but now its throwing that error.
Here's my store/index.js
import { createStore } from "vuex";
export const store = new createStore({
state: {
patient: [],
},
mutations: {
setPatient(state, payload) {
state.patient = payload;
},
},
getters: {
getPatient(state) {
return state.patient;
},
getAppointment(state) {
return state.patient.appointments;
},
},
})
app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import {store} from './Store'
const { RayPlugin } = require('vue-ray');
window.$ = window.jQuery = require("jquery");
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(store)
.use(RayPlugin, { interceptErrors: true, host: '127.0.0.1', port: 23517 })
.mixin({ methods: { route } })
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
And following the documentation, on my component I did the following:
import { useStore } from 'vuex'
import {onMounted, reactive, ref} from "vue";
export default {
props: {
patient: {
type: Object,
required: true
}
},
setup(props) {
const store = useStore();
onMounted(() => {
store.commit('setPatient', props.patient);
})
}
}
So far I've done this before, but using the composition api is new for me, so I couldn't find where the error is
I try to send login data using axios and I get this error:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property
'post' of undefined"
TypeError: Cannot read property 'post' of undefined
I used this.$http.post from documentation.
main.js
import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import VueAxios from "vue-axios";
import router from "./router/router";
import store from "./store/index";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(VueAxios, axios);
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import account from "./account.module";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
account
}
});
stroe/account/module.js
import jwt_decode from "jwt-decode";
import accountService from "../services/account.service";
const token = localStorage.getItem("token");
const user = token ? jwt_decode(token) : null;
const state = token
? { loggedIn: true, user }
: { loggedIn: false, user };
const getters = {
}
const actions = {
login({ commit }, user) {
return accountService.login(user).then(
data => {
if (data.status == "success") {
const user = jwt_decode(data.token);
commit("loginSuccess", user);
} else {
commit("loginFailure");
}
return data;
});
}
}
const mutations = {
loginSuccess(state, user) {
state.loggedIn = true;
state.user = user;
},
loginFailure(state) {
state.loggedIn = false;
state.user = null;
},
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
services/account.service.js
const apiUrl = "***";
export default {
login(user) {
return this.$http.post(apiUrl + "login", {
login: user.login,
password: user.password
}).then(response => {
if (response.data.status == "success") {
localStorage.setItem("token", response.data.token);
}
return response.data;
});
}
}
VueAxios only creates a wrapper around the passed in axios, so this.$http.post() is the same as axios.post().
Thus, you could use axios directly in your services file:
import axios from 'axios'; 👈
const apiUrl = "***";
export default {
login(user) {
👇
return axios.post(apiUrl + "login", {
login: user.login,
password: user.password
}).then(/*...*/);
}
}
i tried to access vuex getters with namespaced modules inside routers.js but the getters always returning null value while the value is true(user logged in)
here is the example code.
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './auth'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth
}
});
store/auth/index.js
import axios from "axios"
export default {
namespaced: true,
state: {
token: null,
user: null,
status: null
},
getters: {
authenticated(state) {
return state.token && state.user && state.status;
},
user(state) {
return state.user;
}
},
mutations: {
SET_TOKEN(state, token) {
state.token = token;
},
SET_USER(state, data) {
state.user = data;
},
SET_STATUS(state, status) {
state.status = status
}
},
actions: {
async logIn({ dispatch }, data) {
let response = await axios.post('back/in', data);
return dispatch('attemptLogin', response.data.token)
},
async attemptLogin({ commit, state }, token) {
if (token) {
commit('SET_TOKEN', token);
commit('SET_STATUS', true);
}
if (!state) {
return
}
try {
let response = await axios.get('back/me')
commit('SET_USER', response.data.user)
} catch (e) {
commit('SET_USER', null)
commit('SET_TOKEN', null)
commit('SET_STATUS', null);
}
}
},
}
store/subscriber.js
import store from '../store'
import axios from 'axios'
store.subscribe((mutation) => {
switch (mutation.type) {
case 'auth/SET_TOKEN':
if (mutation.payload) {
axios.defaults.headers.common['Authorization'] = `Bearer ${mutation.payload}`;
localStorage.setItem('token', mutation.payload)
} else {
axios.defaults.headers.common['Authorization'] = null;
localStorage.setItem('token')
}
break;
default:
break;
}
})
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login';
import LoggedInLayout from '../layouts/LoggedInLayout';
import Dashboard from '../views/Dashboard';
import Post from '../views/pages/Post/Index';
import store from '../store'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
title: 'Login Page',
path: '/backend/login',
name: 'login',
component: Login,
meta: {
mustLoggedIn: true
}
},
{
path: '/backend',
component: LoggedInLayout,
children: [
{
title: 'Dashboard',
path: '/backend/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/backend/post',
name: 'post',
component: Post
},
],
meta: {
mustLoggedIn: true
}
},
]
});
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.mustLoggedIn)) {
console.log(store.getters['auth/authenticated']); // and everytime i tried to console log, it always return null
if (!store.getters['auth/authenticated']) {
next({
path: '/backend/login'
})
} else {
next('/backend/dashboard')
}
} else {
next()
}
})
export default router;
app.js
require('./bootstrap');
import Vue from 'vue';
import store from './store';
import router from './router'
import MainApp from './layouts/MainApp.vue'
import axios from 'axios';
require('./store/subscriber')
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
store.dispatch('auth/attemptLogin', localStorage.getItem('token'));
new Vue({
router: router,
store,
render: h => h(MainApp)
}).$mount('#app');
and yeah, when i tried to validate if the user is loggedin throught console log always returning null value, and i stuck with this problem for 1 hour already, can anyone help me to solve this problem ?
You are just syncing your store with local-storage. You also need to persist it for it to stay on after reload etc.,
You will need to use something like vuex-persist.
https://www.npmjs.com/package/vuex-persist
Maybe you get error on "back/me" ?
Try to add "consol.error" in the catch block!
However, why login page has meta "mustLoggedIn" setted true ?
I have a router, Home, Login components and unit tests for the Login component.
The logic is: when user is unauthenticated, send him to Login page, once he's authenticated, send him to home page.
The logic works fine in the browser, however, when I run unit tests, I get an exception: thrown: undefined once the login component tries to navigate using this.$router.push('/');
In the console I see the message:
trying to route /login /
and then the exception is thrown once i run next();
Am I missing some setup to have the router working properly in the test environment?
Alternatively: is there a way to mock the next() function passed to the navigation guard?
Here's the router:
import VueRouter from 'vue-router';
import Home from '#/views/Home.vue';
import Login from '#/views/Login.vue';
import { state } from '#/store';
export const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
noAuthRequired: true,
},
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
router.beforeEach((to: any, from: any, next: any) => {
console.log('trying to route', from.fullPath, to.fullPath);
const isAuthed = !!state.user.token;
if (!to.meta.noAuth && !isAuthed) {
next({ name: 'login' });
} else {
next();
}
});
export default router;
The component (relevant part):
import Vue from 'vue';
import Component from 'vue-class-component';
import { axios } from '../plugins/axios';
#Component
export default class App extends Vue {
private credentials = {
email: '',
password: '',
};
private error = '';
private async login() {
try {
const data = await axios.post('http://localhost:5000/api/v1/user/auth', this.credentials);
const token = data.data.payload;
this.$store.dispatch('setUser', { token });
this.error = '';
this.$router.push('/');
} catch (error) {
console.warn(error);
this.error = error;
}
}
}
And the unit test:
import Vue from 'vue';
import Vuetify from 'vuetify';
import AxiosMockAdapter from 'axios-mock-adapter';
import { Wrapper, shallowMount, createLocalVue } from '#vue/test-utils';
import flushPromises from 'flush-promises';
import Vuex, { Store } from 'vuex';
import { axios } from '#/plugins/axios';
import VTest from '#/plugins/directive-test';
import LoginPage from '#/views/Login.vue';
import { mainStore, state, IState } from '#/store';
import VueRouter from 'vue-router';
import router from '#/router';
describe('Login page tests', () => {
let page: Wrapper<Vue>;
let localStore: Store<IState>;
const localVue = createLocalVue();
const maxios = new AxiosMockAdapter(axios);
const vuetify = new Vuetify();
const errorMessage = 'Input payload validation failed';
const emailError = 'Invalid Email format';
const validData = {
email: 'valid#email.com',
password: 'test pass',
};
// in order for "click" action to submit the form,
// the v-btn component must be stubbed out with an HTML button
const VBtn = {
template: '<button type="submit"/>',
};
localVue.use(Vuetify);
localVue.directive('test', VTest);
localVue.use(Vuex);
localVue.use(VueRouter);
beforeAll(() => {
maxios.onPost().reply((body: any) => {
const jsonData = JSON.parse(body.data);
if (jsonData.email !== validData.email) {
return [400, {
message: errorMessage,
errors: { email: emailError },
}];
}
return [200, { payload: 'valid-token' }];
});
});
beforeEach(() => {
try {
localStore = new Vuex.Store({
...mainStore,
state: JSON.parse(JSON.stringify(state)),
});
page = shallowMount(LoginPage, {
store: localStore,
router,
localVue,
vuetify,
stubs: {
VBtn,
},
attachToDocument: true,
sync: false,
});
} catch (error) {
console.warn(error);
}
});
afterEach(() => {
maxios.resetHistory();
page.destroy();
});
const submitLoginForm = async (data: any) => {
page.find('[test-id="LoginEmailField"]').vm.$emit('input', data.email);
page.find('[test-id="LoginPasswordField"]').vm.$emit('input', data.password);
page.find('[test-id="LoginBtn"]').trigger('click');
await flushPromises();
};
it('Redirects user to home page after successful auth', async () => {
await submitLoginForm(validData);
expect(page.vm.$route.path).toEqual('/');
});
});
//this is my signupform.js where i have an object which have my form keys
import Datepicker from 'vuejs-datepicker'
import store from '../../store';
export default {
name: 'Signupform',
components: {
Datepicker,store
},
data() {
return {
enter_details:
{
username: '',
email: '',
contactNumber: '',
firstName: '',
lastName:'',
dob: '',
password: '',
repeat_password: ''
}
}
},
methods:{
addtoAPI() {
this.$store.dispatch('addtoapi',this.enter_details)
}
}
};
//this is my store's action
import vuex from 'vuex';
import axios from 'axios'
vue.use(vuex);
const store = new vuex.Store({
actions: {
addtoapi: ({commit}, enter_details) => {
let newuser = {
username: enter_details.username,
email: enter_details.email,
contactNumber: enter_details.contactNumber,
firstName: enter_details.firstName,
lastName: enter_details.lastName,
dob: enter_details.dob,
password: enter_details.password,
repeat_password: enter_details.repeat_password,
}
console.log(newuser);
axios.post('https://dev-api.mysc.io/int/api/v1', newuser)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
}
}
});
//now i am getting an error i.e
Signupform.js?22e4:28 Uncaught TypeError: this.$store.dispatch is not a function
at VueComponent.addtoAPI (Signupform.js?22e4:28)
at boundFn (vue.esm.js?efeb:190)
at invoker (vue.esm.js?efeb:2004)
at HTMLButtonElement.fn._withTask.fn._withTask
i am also getting one more error that when i try to see my store on vue on my browser it shows that "no vuex store"
please help me to resolve this error because i have alreaady
//this is my main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
export const bus = new Vue();
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
In your store.js write this:
export default new Vuex.Store({
//
});
instead of
export default({
//
});
UPD: demo
And you don't need to include store as a component:
// signupform.js file ...
components: {
Datepicker,
store // <--- this is unnessesary
},
const store = new Vuex.Store({
actions: {
theAction() {
alert('Action fired');
},
},
});
const app = new Vue({
el: "#app",
store,
methods: {
fireAction() {
this.$store.dispatch('theAction')
},
},
})
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<div id="app">
<button #click="fireAction">Press me</button>
</div>