I am trying to create SPA using Vue.js and Laravel as backend. I am using tymon/jwt-auth for JWT Authentication at the backend.
I cannot find $auth in my Login.vue.
I included #websanova/vue-auth in my app.js like this
...
import {createAuth} from '#websanova/vue-auth/dist/v3/vue-auth';
import driverAuthBearer from '#websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpAxios from '#websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '#websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';
...
var auth = createAuth({
plugins: {
http: axios,
router: router
},
drivers: {
http: driverHttpAxios,
auth: driverAuthBearer,
router: driverRouterVueRouter,
},
options: {
rolesKey: 'type',
notFoundRedirect: {name: 'user-account'},
}
});
Vue.use(auth);
But this gives me Uncaught TypeError: vue.reactive is not a function
I followed latest implementation as instructed at #websanova/vue-auth site
I also tried some old tutorials this and this using v2 of the package, but in that case this.$auth is undefined in Login.vue
Here's my complete app.js and Login.vue
Related
I'm doing an Adonis v5 app with Vue 2 as frontend.
My problem is, once I've build Vue frontend into public adonis folder. If I access to a speficic route writing it into the top browser searcher, I get the E_ROUTE_NOT_FOUND from Adonis.
I do think that adonis is trying to search the route into the router of the server and not into the Vue router. Althought adonis it's configured to use static files and the first frontend page works:
Vue router.js:
Vue.use(VueRouter);
const routes = [
{
path: "/",
redirect: { name: "acceso" },
},
{
path: "/acceso",
name: "acceso",
component: SignupView,
meta: { guestAllow: true },
}];
const router = new VueRouter({
mode: "history",
routes,
});
Adonis routes.ts (It shouldn't affect as the have a prefix:
Route.group(() => {
Route.group(() => {
Route.post("register", "AuthController.register");
Route.post("login", "AuthController.login");
}).prefix("auth");
Route.group(() => {
Route.get("logs", "LogsController.index");
}).middleware("auth:api");
}).prefix("/api");
Adonis static.ts:
import { AssetsConfig } from '#ioc:Adonis/Core/Static'
const staticConfig: AssetsConfig = {
enabled: true,
dotFiles: 'ignore',
etag: true,
lastModified: true,
maxAge: 0,
immutable: false,
}
If I write localhost:3333 on the browser I redirects to /access (Correct)
But if I refresh the page, or browse manually the same route, the error shows
Any idea of what could it be?
Thank you for your time.
After looking some other projects on internet, I've seen that if you use mode: "history" on vue-router it pops the error.
So I've tried to comment this line and now I can refresh the page without E_ROUTE_NOT_FOUND error.
Frontend Vue router.js:
const router = new Router({
//mode: "history",
routes,
});
I assume my authentication service fails to load a configuration file causing an error.
Im following along a tutorial on AUTH0.Here is the link https://auth0.com/blog/real-world-angular-series-part-2/.
I have to import a file from env.config.ts that will be used by my authentication service.Here is the code env.config.ts
const _isDev = window.location.port.indexOf('4200') > -1;
const getHost = () => {
const protocol = window.location.protocol;
const host = window.location.host;
return `${protocol}//${host}`;
};
const apiURI = _isDev ? 'http://localhost:8083/api/' : `/api/`;
export const ENV = {
BASE_URI: getHost(),
BASE_API: apiURI
};
Here is a quote from the tutorial "This code detects the host environment and sets the app's base URI and base API URI. We'll import this ENV configuration wherever we need to detect and use these URIs."
This env file is imported into a file required by auth0,
Here is my snippet of the auth.config.ts
import { ENV } from './../core/env.config';
interface AuthConfig {
CLIENT_ID: string;
CLIENT_DOMAIN: string;
AUDIENCE: string;
REDIRECT: string;
SCOPE: string;
NAMESPACE: string;
};
export const AUTH_CONFIG: AuthConfig = {
CLIENT_ID: '[xxx]',
CLIENT_DOMAIN: '[]', // e.g., kmaida.auth0.com
AUDIENCE: '[http://localhost:8083/api/]', // e.g., http://localhost:8083/api/
REDIRECT: `${ENV.BASE_URI}/callback`,
SCOPE: 'openid profile email',
NAMESPACE: 'http://myapp.com/roles'
};
Please have a look at the tutorial and maybe share what i could have missed.
The auth.service.ts uses the configutaion file as such
// Remove data from localStorage
this._clearExpiration();
this._clearRedirect();
// End Auth0 authentication session
this._auth0.logout({
clientId: AUTH_CONFIG.CLIENT_ID,
returnTo: ENV.BASE_URI
});
}
this is what my imports section looks like of auth.service.ts
import { Injectable } from '#angular/core';
import { Router } from '#angular/router';
import { BehaviorSubject, Subscription, of, timer } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { AUTH_CONFIG } from './auth.config';
import * as auth0 from 'auth0-js';
import { ENV } from './../core/env.config';
The error emmited in my cmd reads
ERROR in src/app/auth/auth.service.ts:92:17 - error TS2304: Cannot find name >'ENV'.
92 returnTo: ENV.BASE_URI.
I also suspect the way the imports are handled from core have a problem ,as i really im not well vast with the slash imports.
I have my app directory that holds the auth and core folder as direct children.
try declaring ENV inside a constructor.
public constructor(){
const env = ENV
}
Then use it.
console.log(env.BASE_URI)
Am using the nuxtjs adonuxt template as located Adonuxt temlate and
am trying to use the adonis Env use in my resources plugins but this fails
I have created a vuescoketio plugin in the resources/plugins
import Vue from 'vue'
import store from '../store'
import VueSocketIO from 'vue-socket.io'
const Env = use('Env');
Vue.use(new VueSocketIO({
debug: true,
connection: Env.get('SOCKET_URL', 'https://localhost:5389'),
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
}))
But the above always throws an error
ReferenceError: use is not defined
Which i believe is from const Env = use('Env')
How can i use the ENV as specified on the adonis documentation at https://adonisjs.com/docs/4.0/configuration-and-env
You need to use process.env.
Example (nuxt.config.js):
export default {
env: {
SOCKET_URL: process.env.SOCKET_URL || 'http://localhost:3000'
}
}
Plugin
Vue.use(new VueSocketIO({
debug: true,
connection: process.env.SOCKET_URL,
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
}))
I am currently following this tutorial to authenticate my EmberApp with Firebase: Ember authentication with Firebase. I am working on the part which uses the Torii addon for authentication.
Here is what I have done so far:
app/torii-adapters/application.js
import Ember from 'ember';
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default ToriiFirebaseAdapter.extend({
firebase: Ember.inject.service()
});
app/adapters/application.js
import config from '../../config/environment';
import FirebaseAdapter from 'emberfire/adapters/firebase';
import Firebase from 'firebase';
export default FirebaseAdapter.extend({
firebase: new Firebase(config.firebase)
});
config/environment.js
module.exports = function(environment) {
var ENV = {
modulePrefix: 'my-auth-test',
environment: environment,
baseURL: '/',
locationType: 'auto',
firebase: 'MY_FIREBASE_URL',
torii: {
sessionServiceName: 'session'
},
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
...
routes/application.js -> Login function
login: function() {
var controller = this.get('controller');
var email = controller.get('userEmail');
var password = controller.get('userPassword');
this.get('session').open('firebase', {
provider: 'password',
email: email,
password: password
}).then(function() {
this.transitionTo('protected');
}.bind(this));
}
The problem that I have is the following error:
Please set the firebase property in your environment config.
But as far as I can see I have the property set. Can someone help me fix this issue?
That's the old method. Recently I ran into a similar issue after copy/pasting my old implementation, but after a quick look at https://github.com/firebase/emberfire I updated my config/environment.js to the following and was able to get it to work.
Try:
// config/environment.js
var ENV = {
firebase: {
apiKey: 'xyz',
authDomain: 'YOUR-FIREBASE-APP.firebaseapp.com',
databaseURL: 'https://YOUR-FIREBASE-APP.firebaseio.com',
storageBucket: 'YOUR-FIREBASE-APP.appspot.com',
}
For development and testing I want to use Ember CLi Mirage. I'm trying to get it to work with simple auth and oauth2. How do I have to set up Mirage to work with a session token?
This is what I'm doing so far:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
authenticate() {
var data = this.getProperties('username', 'password');
this.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', data);
}
}
});
And in mirage I'm not sure how to set up my token route:
this.post('/token');
For custom work like this, pass a function in as the second parameter to your route definition:
this.post('/token', function(db, request) {
// generate a token
return {
token: token
};
});
I'd have to know more about your backend to offer more specific guidance, but this is the general idea. Hope it helps!
I use the following in my tests:
import { test } from 'qunit';
import { authenticateSession } from 'app-name/tests/helpers/ember-simple-auth';
import moduleForAcceptance from 'app-name/tests/helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | whatever');
test('visiting /subpage-that-requires-authentication', function(assert) {
authenticateSession(this.application);
visit('subpage-that-requires-authentication');
andThen(function() {
assert.equal(currentURL(), 'subpage-that-requires-authentication');
});
});