Develop Reference

React-Firebase Authentication

I am having a react application with firebase as authentication. My authentication code is below
await firebase.auth().onAuthStateChanged((user) => {
if (user) {
props.setUser(user); //setting the user if login/register happens
history.push(`/admin/dashboard`);
console.log("user",user)
} else {
props.setUser(null); //blocks the user to get into the app if he/she is not logged in
history.push("/");
}
});
So, when user logs in..he will be navigated to /admin/dashboard. suppose when am in /admin/home and when i refresh the page, it goes again to admin/dashboard which shouldn't happen. so I tried
history.push(${props.location.pathname}); it works correctly after the refresh, it stays on the same page when the application is logged in. but when I restart the server again when I try to log in, it says no redirect url is specified. Got stuck on this for a long time.. Any help is welcome.Thanks

What your code does is check if the user is logged in and only let the user access the data if so.
You should do that in the fireabse rules (= serverside) as this is way more secure.
You didn't provide the kind of FirebaseDB you are using. So assuming you use the Realtime Database here are some according rules:
{
“rules”: {
“.read”: “auth != null”,
“.write”: “auth != null”
}
}
You should maybe check the rules before deploying your app, because now every authenticated user can change/add/delete data, but you get the point. This does exactly what you want so you won't even need to perform a check in your ReactJS App. Firebase will automatically deny unauthenticated users the access to the database.
Btw: You should try to implement security relevant things in the Firebase Rules. Ideally you want your rules to be written in a way that you don't need to perform any validation inside your ReactJS app. Firebase rules can get quite complex. I experienced that myself when writing a chat app with chatrooms and everything. But it is definitly worth the effort if your app is more secure after.

Firebase Authentication - Logged In User Is Null

I have managed to setup a custom login system using Firebase. The user enters email/password and is redirected to the main page(which is private). I am having issue with onAuthStateChanged after logging in. When I check the auth state after logging into the main page, i get invalid user (null). The firebase dashboard shows I have logged in successfully but onAuthStateChanged is the opposite.
I am trying to check if a user is logged in to my html pages, if not I want to redirect them to the login page. I like how the authentication works in firebase but I need to protect my html pages not my divs (which is what the vast majority of firebase auth tutorials show).
If anyone has an easier way to password protect a web directory that looks nicer than HTaccess, please advise (I am not crazy about using wordpress for password protection, but its an option). Otherwise, I guess I will have to do this in PHP. Thanks in advance!
(function () {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
console.log(user);
console.log('A user is logged in.');
} else {
// No user is signed in.
console.log('Invalid user. Redirecting to root.');
window.location.replace('../index.html');
}
});
})();

If you navigate to a new page, Firebase will have to initialize again. As part of that it will try to restore the user's authentication state, but this requires a call to the server which takes time.
For that reason the onAuthStateChanged listener will initially fire with null as the current user (and auth.currentUser is set to null). Then once the user is signed in, the listener fires again with the user object for that user.
If you want to detect this initial state, you can either store some token value in the browser's local storage that you can check for yourself on the new page, or you could set a time-out for when you expect the user to be re-signed in and only then navigate away to the index.html page.

PWA blank page Facebook

I have a PWA app where one of the options you have to sign-in is Facebook, everything goes well and if you're in the browser the login works really well. The problem happens when you add the website to your mobile and it opens in PWA and you click log-in from Facebook it opens a blank page and it doesn't redirect to the app, if you close the page, go back to the app and click again facebook the user is logged in, but does anyone has any idea how to get rid of the white/blank page?
I have tried 'redirect_uri' and 'display: touch,' but none of this seems to be working anymore.

A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode.
It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank.
The most straightforward way to fix this is first to check if the user has already logged in and authorized your app before calling the .login() function.
Luckily, Facebook provides a function to do it, where they handle (almost) everything for you.
The getLoginStatus() function
The getLoginStatus() functions determines 1) if a user is signed into Facebook and 2) if the user has already authorized your app.
There are three possible states for a user:
The user is logged into Facebook and has authorized your app, in this case, the function will return: connected.
The user is logged into Facebook but has not authenticated your application, in this case, the function will return: not_authorized.
The user is either not logged into Facebook or explicitly logged out of your application, in this case, we don’t know which one is it, that’s why it returns: unknown.
For example:
When we call getLoginStatus() we’ll get an object similar to this:
{
authResponse: {
userID: '12345678912345',
accessToken: 'kgkh3h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
session_Key: true,
expiresIn: '5183738',
sig: '...'
},
status: 'connected'
}
There you can see there’s an authResponse object and a status object. We’ll focus on the status object first, checking for each of the three possible responses.
this.facebookProvider.getLoginStatus(response => {
if (response.status === 'connected') {
// User Authenticated and your App is authorized
} else if (response.status === 'not_authorized') {
// User authenticated but your app isn't authorized yet.
} else {
// the user isn't logged in to Facebook.
}
});
Try this and try to logout first from Facebook before you make call from PWA.

Meteor.user is null after (apparently) successful login

I have a simple Meteor js app that allows you to create a user account and log in, or to log in with your existing Google account via oauth (thanks to the accounts-google package).
When using the app, I enter my username and password, everything works fine. However, when I click "Sign in with Google", the google oauth pop-up asks me to select which google account I want to use for this login. I select the account, the pop up waits a second, closes, and then nothing happens. No pop-ups being blocked, no "failed login" messages. It's as if nothing happened at all.
I'm certain that the user is never being defined when I use oauth login because Meteor.user() gives me null in the JS console.
What could be going on here? Or how would I debug this? Suggestions appreciated.
p.s. If any additional information is needed, I can ammend.

You probably messed up oauth configuration either on the Meteor side or Google Developers Console side, so here is a quick recap.
Google Developers Console :
Under APIs & auth > Credentials, create a new Client ID in the OAuth section.
Choose Web Application and specify both correct redirect URIs and JavaScript origins :
REDIRECT URIS
http://localhost:3000/_oauth/google?close
http://your-production-domain.com/_oauth/google?close
JAVASCRIPT ORIGINS
http://localhost:3000
http://your-production-domain.com
Meteor configuration :
Be sure to add these packages :
meteor add accounts-google
meteor add service-configuration
In server/config.js, add these lines from http://docs.meteor.com/#meteor_loginwithexternalservice
ServiceConfiguration.configurations.remove({
service: "google"
});
ServiceConfiguration.configurations.insert({
service: "google",
clientId: "????????????????.apps.googleusercontent.com",
secret: "????????????????"
});
The clientId and secret fields should be set to those in the Google Developers Console.
Then call Meteor.loginWithGoogle() in the click handler of your login form and it should work as expected.

How get Facebook token using Oauth2 with chrome.identity

I'm using chrome.identity in a packaged app to get a user token using Facebook. I call chrome.identity.launchWebAuthFlow, and I need to take the access token, send it to the server, and then access token is used to verify the user.
Works great with Google+. But for some reason, it doesn't work for Facebook. For some reason, Facebook's OAuth appears to be special. I've added the extensionid.chromiumapp.org to the list of redirect URLs in the API. Added
"https://extensionid.chromiumapp.org/*",
"https://facebook.com/*",
"https://www.facebook.com/dialog/",
"https://graph.facebook.com/*"
to manifest.json. But nothing changed.
In calling chrome.identity.launchWebAuthFlow I use URL like this
"https://www.facebook.com/dialog/oauth/access_token?" +
"client_id=myclientid&client_secret=myclientsecret&" +
"response_type=token&grant_type=client_credentials"
When I try to invoke it, I get the following error message:
«launchWebAuthFlow completed Object {message: "Authorization page could not be loaded."} »
And when I use URL like
«"https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user"»
I get the next error:
«launchWebAuthFlow completed Object {message: "User interaction required."} undefined »
I try to get facebook token in 4 days. I am tired. What I do wrong?
Why chrome.identity.getAuthToken work great for Google+ and chrome.identity.launchWebAuthFlow dont with Facebook?
I hope someone have done the same things and can help me.

I have solved the problem. Here is an example https://github.com/blackgirl/Facebook_Oauth2_sample_for_extensions

The "User interaction required." message means that the user needs to sign in to Facebook, and/or approve the requested OAuth scopes. The setting the { interactive: true } flag would allow identity.launchWebAuthFlow to display a window where the user would perform these steps. Since you are passing the { interactive: false } flag, identity.lauchWebAuthFlow fails.
https://www.facebook.com/dialog/oauth is most likely the URL you want to use to start your flow. The client_credentials grants are normally for cases where you are accessing resources owned by your app, rather than resources owned by a specific user.
However if you did want to debug that "Authorization page could not be loaded" case, the way to do it would be to open up chrome://net-internals and look for error responses coming back from Facebook.

chrome.identity.launchWebAuthFlow(
{'url': 'https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user, 'interactive': true},
function(redirect_url) {
/* Extract token from redirect_url */
console.log(redirect_url);
});
//'interactive': true
what will this flag do, will show a dialog box asking username and password
upon successful login it will ask for grant access just press that and
you will receive redirect url in above function body.