Develop Reference

react native TypeError: Cannot read property 'navigation' of undefined

I am using the FacebookAuthProvider by firebase to login my users from my platform.
I'm using react native in expo with firestore and it was working fine till I tried to add in some checks to redirect users to the correct screens after login. There are two different roles (administrators and users) which have to be separate right after the login.
if (/* user is administrator */) {
this.props.navigation.navigate('Admin');
} else {
this.props.navigation.navigate('Main');
}
After adding this method to separate users by there roles, I got this error:
react native TypeError: Cannot read property 'navigation' of undefined
Later I will add some more details (log files etc. as soon as I've learned how to grep them from my locale machine).
For better understanding I put my whole code here (sorry for the bad indentations which lesses the readability):
const auth = firebase.auth();
const firebaseUser = '';
const usersRef = firebase.firestore().collection('users');
async handleFacebookButton() {
const { type, token, } = await Facebook.logInWithReadPermissionsAsync(FACEBOOK_APP_ID, {
permissions: ['public_profile', 'email']
});
if (type === 'success') {
//Firebase credential is created with the Facebook access token.
const credential = firebase.auth.FacebookAuthProvider.credential(token);
auth.signInAndRetrieveDataWithCredential(credential)
.then(function(userCredential) {
newUserCheck = userCredential.additionalUserInfo.isNewUser;
console.log('newUserCheck = ', newUserCheck)
});
this.setState({loggedIn: "You are signed in"})
this.setState({signedIn: true})
console.log('you are signed in');
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
firebaseUser = {name: user.displayName, uid: user.uid, email: user.email}
console.log(firebaseUser.name, ' and ', firebaseUser.uid);
var existingRef = usersRef.doc(firebaseUser.uid);
existingRef.get().then(function(documentSnapshot) {
// check if user is registered
if(documentSnapshot) {
data = documentSnapshot.data();
console.log('existing user exists!!');
// check if user is an administrator
if (data.administrator == true) {
console.log('existing administrator exists!!');
this.props.navigation.navigate('Admin');
} else { this.props.navigation.navigate('Main');
}
}
});
(error => {
console.log('user not accessed: ', error);
});
//User is not yet in firebase database and needs to be saved
// double check that user is a new user
if (newUserCheck == true) {
this.ref
.doc(uid)
.set({
id: firebaseUser.uid,
username: firebaseUser.name,
email: firebaseUser.email,
})
this.props.navigation.navigate('ChooseRoute')
}
}
})
}
// If login type is not success:
(error => {
this.setState({loggedIn: "Login failed: log in again"})
this.setState({ errorMessage: error.message });
});
}

I fixed it!! 3 days later - it was a binding issue - after several unsuccessful attempts to work out which were the right parts of the functions to bind I converted both 'auth().onAuthStateChanged' and 'documentSnapshot' into fat arrow functions and the errors are gone!! Thank goodness for ES6...! Hope this helps someone else down the line...

Getting Correct Info in Console, But Angular 2 Login Not Working as Expected

I have a login in my Angular 2 app, and I have been converting it from using a fake backend (which works) to connect to our mongoDB-based API instead.
This is the login function I am using in the authentication service:
login(username: string, password: string) {
const u = encodeURIComponent(username);
const p = encodeURIComponent(password);
this._url = `https://api.somesite.com/v0/staff/login/${u}/${p}?apikey=somekey`;
console.log(this._url);
return this.http.post(this._url, JSON.stringify({ username: username, password: password }))
.map((response: Response) => {
// login successful if there's a jwt token in the response
const user = response.json();
if (user && user.token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify(user));
}
});
}
In my login component I am subscribing like this:
login() {
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(
data => {
this.router.navigate(['/']);
console.log('User logged in as: ' + this.model.username);
},
error => {
this.alertService.error(error);
this.loading = false;
});
this.authenticationService.username = this.model.username;
}
When I try this, and log to the console "this_url", I get what I would expect. For instance, if the user typed in "billsmith" for username, and "parisnow" for password, I see this in the console for "this_url":
https://api.somesite.com/v0/staff/login/billsmith/parisnow?apikey=somekey
Furthermore, I can type that url directly into the browser address window and see data (when the username and password correctly correspond to actual records in our database). So it's accessing the correct info in that sense.
But in the console I get a "404" error for that generated url. It also doesn't "do anything". In other words, it doesn't correctly redirect to the main component as it did with the fakeBackend-enabled login. And the only thing that's different now is the url that I am calling (because I'm connecting to our actual API now, as opposed to a fake backend provider).
FYI, the url when using the fake backend looked like this:
return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password}))
What am I missing here?
By the way, this is how things look on the server side re: our mongoDB:
exports.byLogin = function(req, res, next) {
let ioOnly = false, username, password;
if (_.isUndefined(req.params)){
ioOnly=true;
username = req.username;
password = req.password;
}
else {
username = req.params.username;
password = req.params.password;
}
staff.findOne({username: username, password: password}, function(err, doc) {
if (err) { if (!ioOnly) { return next(err) } else { return res(err)}}
else if(doc) ((!ioOnly) ? res.send(doc) : res(doc));
else ((!ioOnly) ? res.sendStatus(204) : res(doc));
});
};

How to watch for new records added to model in Sails.js

I'm trying to push a message for when a user sends a message to a certain certain Id (within an User model) in a user to user chat messaging system. I can't get it to work, nor do I know how to get started. I have this in my Messaging controller:
sendAndReceiveMsgs: function(req, res) {
if (req.isSocket && req.param('message') && req.param('to')) {
var message = req.param('message'),
from = req.user.id,
to = req.param('to');
Messaging.create({ message: message, from: from, to: to })
.exec(function (err, created) {
console.log('sent');
});
} else if (req.isSocket) {
Messaging.find({ where: { to: req.user.id }, limit: 1, sort: 'id DESC' })
.exec(function(err, messages) {
if(messages.length > 0){
console.log(message.length + " new messages");
} else {
console.log("No new messages");
}
Messaging.subscribe(req.socket, message);
Messaging.watch(req);
Messaging.publishCreate({ id: message[0].id, message: message[0].message });
});
} else if (!req.isSocket) {
return res.notFound();
}
}
However, it doesn't push further new messages to the user (meant for him). Any clue? I really don't understand this, and don't know where to go from here. Thanks!

Please show the client side code too.
One thing I noticed is that you're using subscribe but it's used only to see messages emittted by .publishUpdate(), .publishDestroy(), .publishAdd() and .publishRemove(). Not sure if that helps

You need to use io.socket.on in your client. See the documentation here.
The eventIdentity if your using pub/sub methods are also the model name.

Can't write user data to firebase

I'm new at this so bear with me. I'm trying to use the fire base simple login with the email and password. I have that working with this:
var authClient = new FirebaseAuthClient(fireRef, function(error, user) {
if (error) {
// an error occurred while attempting login
if(error.code === "INVALID_EMAIL"){
$('#log_email_error').hide();
$('#log_pass_error').hide();
$('#log_email_error').html("Invalid email specified.").fadeIn();
$('.login_button').removeClass('login_button_success').attr('value','Log in');
}
if (error.code === "INVALID_PASSWORD") {
$('#log_email_error').hide();
$('#log_pass_error').hide();
$('#log_pass_error').html("The specified password is incorrect..").fadeIn();
$('.login_button').removeClass('login_button_success').attr('value','Log in');
}
console.log(error);
} else if (user) {
// user authenticated with Firebase
hideLogin();
$('.userInfo_cont').show();
$('.userInfo').html('<div> '+ user.email + ' <span class="grey">| </span> </div>');
$('.logout').on('click',function(){
authClient.logout();
});
console.log('User ID: ' + user.id + ', Provider: ' + user.provider);
} else {
// user is logged out
$('.userInfo_cont').hide();
showLogin();
}
});
But when the user registers I want to store some additional info in a firebase/users area
which I can do with this in the registration:
$('#submit_reg').on('click',function(){
var firstName = $('#regFirstname').val();
var lastName = $('#regLastname').val();
var email = $('#regUsername').val();
var password = $('#regPassword').val();
authClient.createUser(email, password, function(error, user) {
if (!error) {
console.log('User Id: ' + user.id + ', Email: ' + user.email);
authClient.login('password', {
email: email,
password: password,
rememberMe: false
});
hideLogin();
userInfo = {
userId : user.id,
firstName : firstName,
lastName : lastName,
email : user.email
}
var url = USERS_LOCATION + "/" + user.id;
var userRef = new Firebase(url);
console.log(userInfo);
userRef.set(userInfo);
}else{
//display error
alert(error);
}
});
});
My Problem is when I implement the read write rules like the documentation has:
{
"rules": {
"users":{
"$userid": {
".read": "auth.id == $userid",
".write": "auth.id == $userid"
}
}
}
}
I get a permission denied when the user registers. So it registers the user just fine but won't write the additional data to the /users/id area.
Any help would be much appreciated.
Craig

In the snippet above, you're calling login(), and then immediately calling set() afterwards. This is problematic because the login() method is asynchronous, and you are almost always guaranteed to have called set() method prior to the return of the login attempt method, since login() is non-blocking yet makes a network call to the Firebase servers.
This means that even though you're calling login() with the correct email and password, you're trying to set the data before the authentication process has completed.
I would recommend moving your set() logic into a block that will only be executed when you are certain that the user has already authenticated, such as in the callback you passed when calling new FirebaseAuthClient() and detected a logged in user.

Expressjs authentication

I have some questions regarding login and sessions. I have this code:
The db query:
login: function(req,callback) {
var query = 'SELECT id FROM users WHERE email = "' + req.body.email_login + '" AND password = "' + hashlib.sha1(req.body.password_login) + '" LIMIT 1';
client.query(query, callback);
}
The route:
app.post('/login', function(req, res, next) {
users.login(req,function(err, results) {
if (err) {
res.render('index');
} else if (results[0]) {
req.session.userdata = results[0];
req.session.is_logged_in = true;
res.render('site/news');
}
}
}
Auth middleware:
var auth = function (req, res, next) {
if (req.session.userdata && req.session.is_logged_in === true) {
next();
} else {
res.redirect('/');
}
}
I use db store for the session.
Now my questions are:
1) Is this a safe way to do it? Or should I consider doing it some other way?
2) Say I have this URL /domain/users/1, where the last segment is the user id which is used to fetch user data.
And on that view I have a form for changing user data. Is it safe to check if the user id matches the session user id and then show the form?
In the view:
// e.g. get the session.id from dynamichelper
if (data.userid === session.userdata.id) {
// The form where user can change his data contained within here
}
The server is going to use SSL.
Thanks in advance
George

In the db query code, check for req.body.email_login and req.body.password_login to make sure they're not null and that they're strings. Someone could sent an empty response and that will generate an Internal Error on your side.
Also in the route, you might want to log the error and redirect the user to the /500.html page (internal error):
if (err) {
console.log(error);
res.redirect('500');
} else ...
You shouldn't do this in the view:
if(data.userid === session.userdata.id) { //The form where user can change his data contained within here }
Try instead to achieve this in the model (preferably), make a function for it and pass only one parameter to the view like so:
res.render('view', { loggedIn: true });
The function from the model:
function checkUser(id, session) {
return (userid === session.userdata.id);
}
...
module.exports.checkUser = checkUser;
You can call it from the route like so (for ex):
res.render('view', { loggedIn: model.checkUser(req.body.id, req.session); }

You might also want to look at http://passportjs.org/