Cannot authenticate with emberfire - javascript

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',
}

Related

Undefined $auth in Vue using #websanova/vue-auth

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

How to use firebase in front end as a module?

I am making a project in which I am using typescript and also using the module system(type="module"). I put the following inside my main.html file.
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
I have another file firebase.ts which contains
// #ts-nocheck;
var firebaseConfig = {
apiKey: "AIzaSyAePVmVNzKbvbLnAGP1VVQwyEaE7pJ3a_M",
authDomain: "chess-3ea12.firebaseapp.com",
databaseURL: "https://chess-3ea12.firebaseio.com",
projectId: "chess-3ea12",
storageBucket: "chess-3ea12.appspot.com",
messagingSenderId: "454944098464",
appId: "1:454944098464:web:9d10fe0a1808233f5ca1c5"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default {
fs: firebase.database(),
db: firebase.database().ref(),
auth: firebase.auth()
}
Typescript will obviously show error
Cannot find name 'firebase'
How I can fix this means that I could get firebase a module so I could import it inside any file.
You can install Firebase as a dependency so that it appears in node_modules. You won't actually be using anything in it except for its definition file, though. With typeof import(...) syntax, you can import the type of a module, so import it and declare the Firebase type onto the window:
declare global {
interface Window {
firebase: typeof import('firebase');
}
}
Then, you'll be able to reference window.firebase and use its types:
const { firebase } = window;
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default {
fs: firebase.database(),
db: firebase.database().ref(),
auth: firebase.auth()
}

Cannot find name 'ENV' returnTo: ENV.BASE_URI

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)

Ember app see hash in localhost URL

In my Ember app (based on engines), I do not see hash in the localhost URL
I did try changing locationType in environment.js
locationType: 'hash'
Though the routing & everything is working fine, I am just wondering how do I get the # in the address bar URL.
Below is my complete environment.js
/*jshint node:true*/
'use strict';
module.exports = function(environment, appConfig) {
console.log(environment);
var ENV = {
modulePrefix: 'myapp-ui',
environment: environment,
rootURL: '/myapp/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
},
EXTEND_PROTOTYPES: {
// Prevent Ember Data from overriding Date.parse.
Date: false
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
TRACKING_ENABLED: true,
LOG_TRACKING_ENABLED: false,
ROUTE_TRANSITION_TRACKING_ENABLED: false,
LOG_ERROR_TRACKING: true,
ANALYTICS_URL:"X",
ANALYTICS_SITE_ID:0,
STUB_MODE : false,
SET_LOCALE : true
};
if (environment && environment !== 'development') {
ENV.rootURL = "";
}
return ENV;
};
Update your config/environment.js's locationType config option to hash and restart your Ember server.
locationType: 'hash', // inside ENV
Quote from Ember guies,
You can change this option in config/environment.js under ENV.locationType.
https://guides.emberjs.com/v2.2.0/configuring-ember/specifying-url-type/
In your 'Router.js' file in the root of your app, you add these lines of code:
Router.reopen({
location: 'hash'
});
More info on hash here: HASHLOCATION ember
Then go to localhost:4200/#/

How to make Ember Cli Mirage to work with Ember Simple auth

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');
});
});

Categories