Google Sign-In for Website - Login State Management - javascript

I'm incorporating Google Sign-In for my website and the basic setup is working fine, however I face a problem to manage the user's login status.
I came across the below SO question, which suggested to use sessionStorage/localStorage to carry the login status across pages of a website, and when user signs out the stored info should be cleared.
https://stackoverflow.com/a/40206395/5345604
I afraid I don't entirely understand the suggested implementation though. What if user signs out from his Google account somewhere else, say from Gmail or from Google Maps? In this case when the user revisits my website, how can I detect that he is no longer signed in with Google and remove the stored client side session? Or this is not the way it is supposed to work?
And on top of the above question, I'm also thinking about the authentication with my backend (PHP). Given the ID token, shall I be sending it across to my server and authenticate it with the Google API Client Library every time? Or shall I only authenticate the user once and store a flag of indication in $_SESSION, and then destroy the session when the user signs out? (Given that the token is in fact a JWT, I suppose the implementation is meant to be stateless and requires the token to be passed to the server every time? Are there any concerns to implement it with the traditional approach of a server side session?)

I can only answer your first question: The login of your website is completely separate from the login status of other Google services. Even YouTube is separate from google.com.

Related

Google Oauth - Where to sign in users, backend/frontend

What is the difference between using Google OAuth and signing in users at the frontend of the application, and signing in users at the backend side of the application?
Example: Signing in users and getting the ID and a auth object in React or letting Node/Express handle everything, the prosess, redirecting and store it in a database.
Is there any advantages for one or the other methods, which are most common and are there any "rules"?
What is the difference between using Google OAuth and signing in users
at the frontend of the application, and signing in users at the
backend side of the application?
So to clarify to everyone reading this, signing in users at the backend side of the application is another way of saying OAuth for servers and signing in users at the frontend of the application is OAuth for JavaScript browser applications such as React.
Signing in users via OAuth for servers and browsers results in a 'token' that a server/browser can use to make requests on behalf of the user. We are asking the user to provide us access to their information via an outside service provider such as an email address, identification of some sort and it will be inside that token as well as some possible permissions that allow us to take actions on behalf of that user.
Is there any advantages for one or the other methods, which are most
common and are there any "rules"?
Server-side OAuth is usually used when we have an app that needs to access user data when they are not logged in. So if you are attempting to build an application that needs to access the users email every ten minutes and possibly delete emails on the users' behalf, you would want to be able to access their email account every 10 minutes regardless of whether they are logged into our application. So for this use case we want to make use of Oauth for server.
Otherwise, if we are not trying to do anything on behalf of the user except sign them into our app, then we can just go with OAuth for browser.
Those two things are very different. Without knowing the specifics of what you're trying to accomplish, you should know as a general rule that front-end-only authentication and authorization leaves you extremely vulnerable.
If someone knows JavaScript well, or is using editing plugins, or any of a million different things, they can bypass much front-end authorization. Or they could just watch to see what calls your app makes to the back end, then simulate those calls from something like Postman, bypassing your web front end entirely.
If you're not securing your backend, you're not secure. Typically systems do both.
It is just a different ways of registering users to our website.
Signing in users at the frontend using OAuth can be very handy as it enables our users to not go through our boring forms in our website. Using OAuth is just one click away from registering users in our website. Beneficial to both the clients and developer.We are provided with the general information about clients by the provider(google,facebook) just clicking on one button.
Signing in users at the backend side is the traditional way of registering our clients. Here we force our client to fill the forms in our website(which may be painfull if it is a long form) and all the filled data is stored in our database.
So they are both different ways to register clients to our websites. Both are used very often. It depends on usecase and needs. Oauth can be used if you want to attract more clients by registering them just by one click.

Google Analytics API authorization for CMS (Single authorization)

I'm developing a 'CMS' for use in clients websites and I would like to include a few analytics views. I have searched and I found some things like this one in google analytics demos and tools (https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/), but it needs you to be logged with the analytics google account to show them.
I have seen Worpdress plugins that shows analytics in the dashboard and you only have to authorize them once and not to be logged in google. ¿How is this done?
I need to show client analytics in the dashboard of the CMS, but I don't want to ask for login everytime or request to be logged in their google accounts.
Thanks to anyone who can help.
The Google Analytics embedded API is built using JavaScript. JavaScript is client sided and there for an implicit login. Implicit logins do not contain a refresh token so when ever the access token expires normally after an hour you will need to login again.
Your Word press plugin assuming its the one i think it is. Uses php and is there for server sided and uses a hybrid login which probably requested offline access from you when you authenticated it first time. Offline access gives you a refresh token which can then be used to request a new access token when ever the plugin needs to access Google Analytics.
Assuming that your client only wants to see their own data they should be using a service account. Service accounts are preauthorized and will there for not require that you authenticate them again. Service accounts only work with server sided languages like php you can not use service account authentication with JavaScript.

Creating a common Login App using FirebaseUI

I have developed several web applications with the own login forms/logic etc. I would like to simplify these by creating a single dedicated web app to handle all the login logic using FirebaseUI. The way I imagine this working is when the user needs to login with one of my apps they are redirected to my login web app. The user supplies their credentials and if successful the login app redirects back to the original app with data to confirm whether the login was successful.
If this is possible I shouldn't have to repeat the login logic in my other web applications and any changes to login code are only required in my login app. I'm not sure if such an approach is possible, however, or how I could securely and safely let each web app determine that the user has successfully logged in. Can anyone offer advice on how to implement this or point to examples where this has been done already?
You might be looking for single sign-on.
Google does something similar. Every time you login you're redirected to accounts.google.com, and after that you're redirected to your app.
You're right in saying that it's trickier than it appears on first sight though. Most web login systems are based around cookies and the whole client-server process around them. Cookies are set per domain. If all your webapps are on the same domain or subdomains of a single domain, you should be OK to go with this approach and get the results you want. If not, you're going to need some extra work to get code from different domains to speak with each other and make everything possible.
In general, if designing a login system from scratch is considered a big endevour, designing a single sign-on system is an order of magnitude harder. OWASP had this to say about them in 2011.

Reset password using google openIDConnect

I am working on a project where we integrating the google openIdConnect to let user sign-in to the application using google auth. I taken help from https://developers.google.com/identity/protocols/OpenIDConnect to authenticate user.
I also need to allow user to reset the password within the application post user logged in. But not able to found any specific help on this.
Can we able to reset password using openIDConnect or it not possible at all. If its possible then how.
NOTE: My preference would be client side solution then a server side.
One of great side effects of OpenID Connect is that you do not need to care about user registration+confirmation and password reset processes within your application. If you are using google as an identity provider, google takes care of this.
At most, you could link to password-reset URL from google, but:
It is already linked on the google's login page.
Google could change URL without prio notice as it is not a part of OpenID Connect specification.
Why do you think google will be using passwords for authentication?

How can Facebook verify Facebook Connect requests?

So I'm developing my own API for my website - I'm mimicking the Facebook JS SDK in regards to how my system works. API client displays a button, popup comes up and the user can log in. Login popup issues an event to the opener window and the parent window now knows the user is logged in. That all works.
What I'm having trouble understanding is how they can verify that the refresh requests are valid. If the API client needs to send a request to the server to ask if the user is logged in and it's all in JS, then everything is transparent. The API client says, "Hi, I'm application 4jhkk2l3bnm389, is the user that's logged in on Facebook also authenticated with me? If so, can you send me a new token so I can make API calls?" and Facebook says, "Oh, you're application 4jhkk2l3bnm389? Yeah, the user is logged in and has allowed you to access their information, here's an access token."
But how does Facebook prevent an outside application that isn't the authentic application from saying, "Hey, I'M actually application 4jhkk2l3bnm389, I promise I'm not lying. Can I have an access token?"
I have no idea how they determine the difference. Obviously if it was all done through AJAX calls in modern browsers then you could just provide an Access-Control-Allow-Origin header. But if a malicious client were to use cURL then I don't think I could ever tell the difference. How does Facebook do it? A good explanation is much appreciated! Thanks!
All access tokens belongs to an app/user pair, and in order for Facebook to return such an access token to the app, these has to be verified.
The app, or client_id, is verified against the domain specified in the redirect_uri - if the page tries to use a client_id/redirect_uri pair it does not own, then it will not receive the access token as this will be passed to the valid redirect_uri (the mechanism the JS SDK uses follows the same rule).
The user, or uid, is verified using the cookie Facebook sets when you sign in.
While you can easily spoof the client_id/redirect_uri pair using curl, the same does not apply to the uid, as you would have to be in the possession of the users cookie. And if this is the case, well, then you could simply grant your own application access.
Facebook uses OAuth 2.0 for authentication. You can find details of how Facebook deals with OAuth right here: https://developers.facebook.com/docs/authentication/. There are many different ways OAuth can be used, depending on whether you're on a mobile device, a page on facebook.com itself, or, in your case, just a web page outside of facebook.com. The details of that final flow can be found here: https://developers.facebook.com/docs/authentication/client-side/.
Basically, Facebook knows what applications you have given permission to view your information. When you run one of those applications, they first make sure you are logged in to Facebook, then they request a user access token from Facebook, essentially saying, "Hey Facebook, I don't know this person, nor should I. Can I get access to their information?". And then Facebook looks internally and if it decides this particular application should have access to this user's information, it sends a user token.
That's the simple way of describing it. There are many different ways the authentication flow can happen, depending as I said earlier on what kind of device the request is happening from, whether this is a page on facebook.com, etc., essentially based on your security constraints. Best to read the Facebook authentication docs referred to earlier for the details since it can get quite tricky.

Categories