Can Endpoints JS Client utilize GAE User Api Authorization (js/python) - javascript

I am using the python version of GAE. For most pages I authenticate the user server side with google.appengine.api.users
user = users.get_current_user()
if user:
# Great user logged in proceed
...
else:
# Oops user not logged in and/or App not yet authorized
# Present user with login dialogue then redirect here
So the user logs in and authenticates my app. Sometime later the user encounters a page with some java script functionality that uses google endpoints. The user is still logged into the page but it seems like I am forced to present another login dialogue before the endpoints api server side recognizes the User
Relevant JS Code:
iaw.signin = function(mode, callback) {
// Hoping setting mode to true here (no authorization prompt)
// magically figures out user already logged into browser and
// picks up relevant token/headers to feed to endpoints and
// verifies user authorized and logged in
// note: callback = iaw.userAuthed
gapi.auth.authorize({client_id: iaw.CLIENT_ID,
scope: iaw.SCOPES, immediate: mode},
callback);
};
iaw.userAuthed = function() {
var request = gapi.client.oauth2.userinfo.get().execute(function(resp) {
if (!resp.code) {
console.log('Succefully logged in');
}
else
{
console.log('Not successfully logged in');
}
});
};
Version of code above always prints "Not successfully logged in". If I follow the google example and call gapi.auth.authorize({ immediate: false}) it will present the user with another login dialogue and then everything works.
Is what I am trying to do possible? It just seems unfortunate in some cases to ask my user to login (authorize backend server code) and then immediately ask them to login again (authorize my javascript client code).

Related

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.

How to extend firebase authentication login session from the client side?

The question is in the title. I have done some research but it seems like I can't find a solution to extending the life of the login session when using firebase authentication.
Currently, I have a file that logs the user in from the front-end. After logging in with Firebase Authentication, I pass the firebase id token to the server:
//[index.php]
auth.onAuthStateChanged(function(user) {
if (user) {
//Retrieve the firebase id token
user.getIdToken().then((idToken) => {
//Send the idToken to the server
sendIdTokenToServer();
});
} else {
//The user is logged out, redirect to login page
}
});
From the server side, I verify the firebase id token, and assign it to $_SESSION['firsebase_id_token'] if the token is valid.
//[server.php]
//Pseudo verifying the token, if the token is valid, record it
if (verifyToken($token)) $_SESSION['firebase_id_token'] = $token;
Now, from this point on, I am trying to verify the token before processing anything from the server side. For example:
//[test.php]
//Before processing anything, validate the token
if (verifyToken($_SESSION['firebase_id_token'])) {
//Perform an action because the user is still logged in
} else {
//Redirect the user to login page because they are logged out/the token cannot be verified
}
I am not certain this is the right approach to the problem (so please suggest the correct approach), they are just what I think is right when reading the documentation. All I want to do is to verify the user (that logged in from the client side) from the server side before performing any administrative tasks. The problem is after a very short period of time, the $token isn't valid any more, so the request cannot be made.
How do I extend the firebase id token session from the client side?
Instead of using onAuthStateChanged, which is only triggered when the user signs in or out, you should be using onIdTokenChanged, which is triggered whenever the user's auth token is refreshed (every hour automatically, or on demand when you call getIdToken(true)).

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.

Enforce Firebase Authentication on Page

I am using Firebase Authentication with Firebase UI to protect pages by requiring a user to be logged in.
In the documentation I don't see what script we need to use on the top of each page in order to determine if user is logged in. If they are not logged in I want to redirect them to the logon page.
In simple PHP, I can do the following:
require_once("./include/membersite_config.php");
if(!$fgmembersite->CheckLogin())
{
$fgmembersite->RedirectToURL("login.php");
exit;
}
I don't see what is needed to be included in the Firebase JS authentication (and/or using Firebase UI).
In JavaScript you can detect whether the user is signed in with:
var user = firebase.auth().currentUser;
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
See the Firebase documentation on determining what user is signed in.

What is it the best solution to hide a single page application private pages with Firebase?

I'm going to explain the problem better with an example, in this Firebase official example https://office-mover-demo.firebaseapp.com/ I can show the hidden page without login with a simple command in the console:
app.classList.remove('is-hidden');
Yes, of course, the data in firebase can be accessed only if a user successful logged in. So my question is: Can i do something to show the structure of the html private part only after a successful login of the user? (Only with static content and firebase auth)
From the Firebase documentation on monitoring authentication state:
// Create a callback which logs the current auth state
function authDataCallback(authData) {
if (authData) {
console.log("User " + authData.uid + " is logged in with " + authData.provider);
} else {
console.log("User is logged out");
}
}
// Register the callback to be fired every time auth state changes
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.onAuth(authDataCallback);
Where the snippet calls console.log, you can just as easily show/hide the HTML.
My solution to this problem - as I understand it - is to set a cookie upon user login containing the user's id or, with an additional call to Firebase, a secret visible only to the logged in client. My server can then read the cookie and determine whether the user is authorized to view the content and only then download it. Thus, I am using Firebase for authentication, but my own server for authorization.
It works, and I can also log the user in to my server using this approach just as if I had received an Oauth token.
However, lacking experience with cookies, I would like to know how secure this is!

Categories

Resources