New Google Sign In library prompt at every page reload - javascript

In my project, I use regular popup client-sided JS authentication (platform client)
I migrated from old Google Sign in to new Google Identity Platform (gsi client)
I used the simple exemple code
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse,
auto_select: true
});
google.accounts.id.prompt();
}
My problem is, each time a user reload the page, he gets the One Tap UX prompt which take tremendous time
A second problem to that is if a user have 2 Google account connected to his browser, the prompt ask him to choose the account everytime he reloads (like it's not saved)
How can I achieve the behavior I had with the last library which is too simply have nothing changed at page reload but only when connecting the first time ?

I think Automatic sign-in is what you need.
Google One Tap supports automatic sign-in, which provides a frictionless user experience (UX) by removing the manual steps visitors must take when returning to your site. Users don't need to remember which Google Account they selected during their last visit, decreasing the chances of unnecessary duplicate accounts being created on your platform.
Automatic sign-in is intended to complement our Sign In With Google button and One Tap dialogs. It is designed to be used across your entire site, with manual sign-up or switching accounts occurring only after the user has first signed-out of your site.
To enable automatic sign-in, add data-auto_select="true" to your HTML code, as shown in the following snippet:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-auto_select="true"
data-login_uri="https://your.domain/your_login_endpoint">
</div>
Refer: https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out#sign-in-users-automatically

After some research it was determined that this issue might be caused by callback function that handles an ID token.
I would like to add that your Singing method is correct and other users also do it this way as seen here.
I think you should take a look at the Authenticate with a backend server guide to know how to handle these tokens, .

Related

Showing address bar in a PWA based on condition

I am implementing PayPal payment system through smart buttons in a PWA app. The problem I am facing is that, by default in a PWA the address bar is hidden, so when the payment dialog for PayPal open it seems as if it's a dialog of the app itself. This is worrying because it doesn't give the user assurance that they're using PayPal's system and that their account is secure.
If I do the same thing through the browser, then the payment window opens in a separate tab with the URL being show.
How can I make it so that the similar behaviour is replicated on the app, or is there a way to show the address bar when the payment dialog is opened?
Screenshot of the dialog
I can't answer about showing an address bar in PWA, but if the goal is to make Smart Buttons open a new tab or redirect, the solution is: don't use Smart Buttons.
Instead, integrate two routes on your server, one for 'Set Up Transaction' and one for 'Capture Transaction', documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/
The first call will return an approval_url that you can simply redirect to (or open a full browser for), rather than using Smart Button JS.
After approval at PayPal in this new window/tab/browser you opened, the return will be to the return_url you specified at Set Up time, which can be a deeplink.
The return should then present an order review/confirmation page (unless you wish to skip this, for which you should specify an application_context object with user_action: 'PAY_NOW' so the user is clicking on the right verbiage for what you're going to be doing.)
Then on this return -- using the provided query string information -- run that second 'Capture Transaction' call. If the response happens to be INSTRUMENT_DECLINED, simply reopen the original approval_url since this situation is recoverable (some details on the situation here, though that demo and Handle Funding Failures guide are for Smart Buttons, but the concept is the same). If the response is success or any other error, proceed accordingly.

How to disable a user from firebase?

In the firebase API
https://firebase.google.com/docs/auth/web/manage-users
we can delete users, but how could we prevent users from simply registering again, in the GUI for firebase we have the option to disable users , how could we do this in the program, for example if we are building a admin panel that checks posts for a listing site that have been reported, and we want to disable the creator or the reporter for spamming as part of availiable actions.
Thanks.
I develop in react if that changes the answer.
To prevent the user from re-registering, you should disable account instead of deleting it. This will prevent the user from signing in again, and from refreshing their ID token. If you want to do this programmatically, have a look at updating a user with the Admin SDKs. For example, in Node.js it'd be:
admin.auth().updateUser(uid, { disabled: true })
Keep in mind however that even after disabling the account, their existing ID token will remain valid until it expires (typically within an hour), and cannot be revoked. If you want to prevent them from posting in the meantime, you'll also want to keep a list of blacklisted/blocked UIDs somewhere, and check against that list before allowing them to write/access the data.
You will not be able to programmatically disable a user from the frontend of your app. You will need a backend, and use the Firebase Admin SDK to update the user account to become disabled. The API is updateUser.
Well they can always register again (in case the website is public/ not invite-only), with completely different credentials.
You can do a matching of the new data and existing blocked users, and if it matches above a threshold, flag them.
And you can improve your reporting, the faster you detect a user who should be blocked, the better.
Can't say I'm super familiar with Firebase but ill try and help (can't hurt).
Have you tried to blacklist the IP of the user in question?
Hope I helped :)
Have a good day!

How Google's reCAPTCHA v3 works

Google has rolled out reCAPTCHA v3. It does away with all the user friction. I wish to use it to secure my site. However, I am unsure about how this is going to protect my site. What if a hacker spams the URLs on my site with an external tool without using the interface I provide? How is reCAPTCHA v3 going to stop that?
How is reCAPTCHA v3 going to stop [Spam] ?
There are various heuristics which can be used to detect automated systems, such as the number of requests coming from a certain IP, browser fingerprinting, Google account cookies, among many others. Google seems to use some of them. If uncertain, a challenge gets shown.
What if a hacker spams the URLs on my site with an external tool without using the interface I provide?
Google generates a token for the client when they pass the checks which you have to validate on the serverside. If someone doesn't pass the CAPTCHA (a robot), they do not have a token.
In addition to the user behavior tracking on your site (as explained by Jonas Wilms), the v3 (and v2) also makes decisions based on your IP, ASN, browser and any kind of information about your system based on the information sent via your HTTP request.
The only difference is that V2 is a complete solution i.e, if it thinks a user may be a bot, it will pose additional challenges until it is convinced the user is a human. On the other hand, V3 is non-intrusive. It generates a score based on the parameters discussed above and passes it onto you. It is then your decision to take appropriate steps (like post challenges, or have two-factor authentication, etc.) based on this score.
IMO, it is better to start with a V2 solution and implement V3 if you want more control or have a better way to challenge the user if they have a low score.
(Here is an interesting article on the differences)
In few simple words google tracks your whole cursor and keyboard movement from moving mouse to select form fields to pressing tab to change fields.
To verify reCAPTCHA is working or not --> Submit a form and then
click refresh; it would ask for re-submission. Click continue. But as
this is a way much similar to Robot activity of submitting a form without any cursor of keyboard movements, reCAPTCHA will prevent
form submission or any other stuff from happenning.

Using Google auth2 sign in, force user to enter password

I just implemented Google JavaScript sign-in button to our homepage, and everything works the way it suppose to, but thats sometimes bad..
So the thing is that our users use our application on the same computer, 3-4 different users per day. Having a google sign in gives us access to implement some Google product features in our own site.
I understand that sign-in with google signs you into the Google account, and also gives permission to application.
Also i understand that this is the way it works to make the life easier for user, not to sign in each time on every site.
I can easily remove the application permission via GoogleAuth.signOut() or GoogleUser.disconnect(), even with GoogleAuth.disconnect(), so the .isSignedIn() will become false, so the user will always have the prompt screen, also i use prompt: 'select_account' on .signIn() to make sure even single user will get the prompt screen.
The problem is when the 2nd user enters to our login screen and chooses "Sign in with Google", he can actually choose any previous user in the prompt screen and enter into our application as not himself, but actually can choose the previous user and authenticate himself as the other without entering any password.
Password will be only asked if previous user also logs out from his Goole account.
I know a hack is to redirect user to URL:
https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=YOUR_REDIRECT_URL
But thats seems like a very poor solution, because our users use our application also with their personal devices, so its kind of bad if they get logged out from all applications they have signed into.
I know asking password on each sign in is not the way auth2 intended to work, but i'm sure there is a way forcing user to enter password on each time they press "sing in with google" button.
Ive spend multiple hours on searching for a solution and tried multiple things, i hope someone of you can point out the needle in the haystack that i missed

How to create a guided tutorial for a web-page using JavaScript?

Certain websites (notably Facebook games) have a step by step tutorial for new users, where JavaScript is used to create a pop-up which tells the user where to click next and what is happening.
How does one create such a system? What sort of architecture is required?
I suppose that a script is loaded if a flag is a tutorial flag is set, and that stored within the user's state there's a 'pointer' which indicate which step in the tutorial the user is at. That script would echo out the relevant JavaScript for pop-ups and highlight and whatever.
The question, I guess, is how does one detects when the user has performed the required action and that the tutorial is to proceed to the next step?
On Edit : The 'action required to proceed to the next step' could involve the user clicking on a link itself, or submitting a value through a form. So the state must be able to persists and the script must be able to detect interactions on different UI elements throughout the page.
I think solution will depend on which technologies you are using.
Simply - you can store user's tutorial progress in a cookie file, and on each his action (e.g. button click) call javaScript handler, which will update it's status.
You can prototype your tutorial as Finite State Machine. I think this tutorial data presentation will be very helpful.

Categories

Resources