I am getting "Error: permission_denied: Client doesn't have permission to access the desired data." I am relatively sure I have a rule problem. Is there a way to trace which client calls in angularfire failed? The level of abstraction and ansynchronicity in this library makes it difficult to even find the function call that caused it let alone the actual firebase REST call.
Go to Firebase console.
On left side bar, click on "Develop" to expand.
Click on "Database" option.
On main screen click on "Rules" tab.
Copy paste the below JSON in rules
{
"rules": {
".read": true,
".write": "auth != null"
}
}
Below is the screenshot :-
Related
I am doing the following call to execute an action only in case an user exists
private _userConnector: UserConnector,
....
this._userConnector.get(userId).subscribe(() => {
// conditional action
},
(error) => {
console.log('your handling goes here');
});
However, if the userId does not exist the error ribbon appears on the back:
I dived deep in all the method calls behind _userConnector.get but I did not find how to only catch the error in susbscribe avoiding the red error ribbon.
Error handling is implemented in low level http interceptors. There's a documentation that describes the handlers and how to customise them.
The error that you notice in the message box is likely driven by the ForbiddenHandler, which is configured to handle 403 errors. You can customise the handler to avoid the error in the message box. See the implementation on github.
Background: I have an app that is showing a list of movies, but what I want to do is to show the list only for users who are authorized (by checking token stored on the local-storage).
so the flow I want to achieve is:
user enters the app main page
check if has token in local storage
if yes check if it is authorized
if authorized = show list, else don't show
so what I do right now is in my main (wrapper) component right after I create my store:
const store = configureStore();
var token = localStorage.get(authConstants.LOCAL_STORAGE_TOKEN_KEY);
if(token){
store.dispatch(actions.checkInitialAuth(token));
}
checkInitialAuth actions is:
export function checkInitialAuth(token){
return dispatch => {
dispatch(requestLogin());
return fetch(authConstants.API_USER_DETAILS, {headers: { 'Authorization' : `Bearer ${token}`}})
.then(function(response){
if(!response.ok){
throw Error(response.statusText);
}
return response.json();
})
.then(function(user){
localStorage.set(authConstants.LOCAL_STORAGE_TOKEN_KEY, token);
dispatch(receiveLogin(user)); // <==========
dispatch(setTopMovies()); // <==========
})
.catch(function(err){
// TODO: handle errors
console.log(err);
});
}
}
so the question is, is it the right place to invoke the initial auth check right after the creating store and right before the element creation?
and now if I have to invoke more actions only if the user is authorized do I have to invoke them in the then inside the checkInitialAuth action? is it the right place to make all the action dispatch calls?
and last one, when the auth is wrong (I changed manually the token to be wrong on the local storage) the console.log(err) is logging as expected but I have also this annoying 401 error in the console, can I somehow avoid it?
thanks a lot!
is it the right place to invoke the initial auth check right after the creating store and right before the element creation?
Yes. Usually this is where all the initialization happens before store is passed to Provider.
is it the right place to make all the action dispatch calls?
This depends a lot on your application logic. You component can check if a user is authenticated itself to display the correct content for 'topMovies'. But nothing stops you from dispatch more actions here.
but I have also this annoying 401 error in the console, can I somehow avoid it?
It is the network request error. It is the response from the server your fecth is contacting. You can hide the error by change your Chrome Dev console filter if you really want to hide them (but why?).
I am starting with Polymer and Firebase and have implemented the Google OAuth authentication.
I have notice the page loads before authentication and if you click back you can get to the page without authorization, albeit that you are not able to use the firebase api and therefore the page is not usable.
My issue is that I do not want my javascript loaded until authenticated.
How could this be done.
Many thanks
It depends if your using firebase or their polymer wrapper, polymerfire.
Create a document for all the imports that you want to be conditionally loaded
// user-scripts-lazy.html
<link rel="import" href="user-script-one.html">
<script src="script.js"></script>
// etc
Using Polymerfire
In the element that hosts <firebase-auth> create a observer and you'll expose some variables from firebase-auth.
<firebase-auth
user="{{user}}"
status-known="{{statusKnown}}"></firebase-auth>
In the observer, watch the user element and the status known
statusKnown: When true, login status can be determined by checking user property
user: The currently-authenticated user with user-related metadata. See the firebase.User documentation for the spec.
observers:[
'_userStateKnown(user, statusKnown)'
]
_userStateKnown: function(user, status) {
if(status && user) {
// The status is known and the user has logged in
// so load the files here - using the lazy load method
var resolvedPageUrl = this.resolveUrl('user-scripts-lazy.html.html');
this.importHref(resolvedPageUrl, null, this.onError, true);
}
}
To get the state without using polymerfire you can use onAuthStateChange
properties: {
user: {
type: Object,
value: null // important to initialise to null
}
}
..
ready: function() {
firebase.auth().onAuthStateChagned(function(user) {
if(user)
this.set('user', user); // when a user is logged in set their firebase user variable to ser
else
this.set('user', false); // when no user is logged in set user to false
}.bind(this)); // bind the Polymer scope to the onAuthStateChanged function
}
// set an observer in the element
observers: [
'_userChanged(user)'
],
_userChanged: function(user) {
if(user === null) {
// authStatus is false, the authStateChagned function hasn't returned yet. Do nothing
return;
}
if(user) {
// user has been signed in
// lazy load the same as before
} else {
// no user is signed in
}
}
I haven't tested the code while writing it here, but i've implemented the same thing various times.
There are a couple of options.
Put content you don't want loaded behind a dom-if template with "[[user]]" as its driver. This could include your firebase element, so the database isn't even considered until after log on.
Put a modal dialog box up if the user is not logged on. I do this with a custom session element . Whilst the overlay is showing then the rest of the page is unresponsive to anything.
If it is simply an aesthetic issue of removing the non-logged-in page from view, could you either hide the page (or display some kind of overlay) while the user isn't authenticated?
I currently have this in an current project for some elements: hidden$="{{!user}}"
I have identified the solution for my purpose ...
Add storage role based authorization (see is there a way to authenticate user role in firebase storage rules?)
This does have a limitation currently of hard coded uid's
In the page, request storage resource and if successful include it in the dom (i.e. add script element with src pointing to storage url)
Call javascript as normal
I've got web application with browser authentication before webpage is loaded so in automated test i am log in via http://user:password#domain but when i am entering wrong credentials, pop up would not disappear it would wait for correct credentials. But i want to test if there is a access to webpage with wrong credentials, every browser is closing without problem, but IE is throwing
modal dialog present
i was trying to use
driver.SwitchTo().Alert().Dismiss();
but it doesn't work.
any idea how to close that pop up authentication?
Authentication popup is NOT generated by Javascript / it is not a javascript alert. So It can not be handled by WebDriver.
You did not mention the programming language you use. Your sample code seems to be in C#. In Java - we have a java.awt.Robot to simulate keyboard events. You might have to find C# equivalent to press the ESC key.
Robot robot = new Robot();
//Press ESC key
robot.keyPress(InputEvent.VK_ESCAPE);
robot.keyRelease(InputEvent.VK_ESCAPE);
In project I currently work in I decided to take completely another approach. I had similar situation of NTLM authentication but I'm pretty sure that for basic authentication it will work as well. I wrote simple chrome extension which utilizes listener on chrome.webRequest.onAuthRequired. Additionally, by putting additional methods in content script to communicate with background script I've managed a way to change credentials on the fly without caring about annoying windows.
background.js:
var CurrentCredentials = {
user: undefined,
password: undefined
}
chrome.runtime.onMessage.addListener(function(request) {
if(request.type === 'SET_CREDENTIALS') {
CurrentCredentials.user = request.user;
CurrentCredentials.password = request.password;
}
});
chrome.webRequest.onAuthRequired.addListener(function(details, callback) {
if(CurrentCredentials.user !== undefined && CurrentCredentials.password !== undefined) {
return {authCredentials:
{
username: CurrentCredentials.user,
password: CurrentCredentials.password
}
};
}
}, {urls: ["http://my-server/*"]}, ["blocking"]);
and content-script.js:
var port = chrome.runtime.connect();
window.addEventListener("message", function(event) {
if (event.source !== window)
return;
if (event.data.type && (event.data.type === 'SET_CREDENTIALS')) {
chrome.runtime.sendMessage({
type: 'SET_CREDENTIALS',
user: event.data.user,
password: event.data.password
});
}
}, false);
Extension must be packed as crx and added to ChromeOptions prior to driver initialization. Additionally, it is required to set credentials BEFORE actual call to site that needs authentication, so I browse simple html file on the disk and post a chrome message while being on the page: window.postMessage({type: 'SET_CREDENTIALS', user: arguments[0], password: arguments[1]}, '*') by using IJavascriptExecutor.ExecuteScript method. After it is done, no authentication window shows up and user is authentication as expected.
I am using the "new" spotify apps api and their documentation about the default tabs only seem to be relevant if you are using the old 0.X api.
I can create the tabs with my manifest using the below code. But I can't seem to fin a way to interact with them.
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I found a example of interacting with the default tabs that looks like this:
sp = getSpotifyApi(1);
// detects arguments value for tab
sp.core.addEventListener("argumentsChanged", function (event) {
console.log('args changed', sp.core.getArguments());
});
But I keep getting the error message "Uncaught ReferenceError: getSpotifyApi is not defined " and according to this post Cannot use the "getSpotifyApi" function in spotify app it's due to the fact that it's the 0.X way of interacting with the api.
Cannot use the "getSpotifyApi" function in spotify app
The only thing close to it that i found where the 1.X tab bars, they dont resemble a classic spotify tab bar, more like regulair gray buttons.
https://developer.spotify.com/docs/apps/views/1.0/tabbar-tabbar.html
anyone have any ideas here?
Looks like your tabbar docs point to the proper usage documented on https://developer.spotify.com/docs/apps/views/1.0/ui-ui.html. I think UI.setActiveView should do what you want.
Alternatively, you should be able to navigate using uri's like spotify:app:appname:tabname
disclaimer I haven't built any tabs into my app yet.