react-google-login | A React Google Login Component | Authentication library

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.

As in actions/checkout issue 14, you can add as a first step:

it's element not component

if you're using the Google OAuth 2.0 flow, I'm not sure why you're using the API key, since you're sending the user Access Token used to identify the user who completed the OAuth flow with your Client ID.

Also, I recommend using the global service auth, so you don't need to send auth credentials to each service call.

After investigating a bit on my end, I think I might have a solution that works for you.

I've messed with OAuth before, and it's quite tricky sometimes because it has to be robust. So a bunch of security policies usually get in the way.

I'll provide my full step-by-step, since I was able to get it working, trying my best to match what you posted.

Firstly, to have a clean slate, I went off the example code linked in the tutorials. I cloned and built the project, and did the following:

• Creating a new project on GCP
  • Configured the OAuth consent screen
    • I set the User type to "internal". This options may not be available if you're not using an account under GSuite (which I am). "External" should be fine though, just that "internal" is the easiest to test.
  • Created a OAuth 2.0 Client
    • Added http://localhost:3000 to the "Authorized JavaScript origins" and "Authorized redirect URIs" sections
• Register a Django superuser
  • Registered a Site, with value of localhost:8000 for both fields.
  • Went into the admin panel, and added a Social Application with Client ID and Secret Key as the "Client ID" and "Client Secret" from GCP, respectively. I also picked the localhost site that we added earlier and added it to the right hand box. (I left Key blank)

Example of my Application Page

• Filled in the clientId field in App.js, in the params of the GoogleLogin component.

Here's where I ran into a bit of trouble, but this is good news as I was able to reproduce your error! Looking at the request in the network inspector, I see that for me, no body was passed, which is clearly the direct cause of the error. But looking at App#responseGoogle(response), it clearly should pass a token of some sort, because we see the line googleLogin(response.accessToken).

So what is happening is that accounts.google.com is NOT returning a proper response, so something is happening on their end, and we get an invalid response, but we fail silently because javascript is javascript.

After examining the response that Google gave back, I found this related SO post that allowed me to fix the issue, and interestingly, the solution to it was quite simple: Clear your cache. I'll be honest, I'm not exactly sure why this works, but I suspect it has something to do with the fact that development is on your local machine (localhost/127.0.0.1 difference, perhaps?).

You can also try to access your site via incognito mode, or another browser, which also worked for me.

I have knox token set up, can I use it instead of the JWT tokens?

I don't think I have enough knowledge to properly answer this, but my preliminary research suggests no. AFAIK, you should just store the token that Google gives you, as the token itself is what you'll use to authenticate. It seems that Knox replaces Django's TokenAuthentication, which means that Knox is in charge of generating the token. If you're offloading the login work to Google, I don't see how you could leverage something like Knox. However, I could be very wrong.

Does the class GoogleLogin(SocialLoginView), take care of the steps of validating the access token and code with google and creating the user with that email in database?

I believe so. After successfully authenticating with Google (and it calls the backend endpoint correctly), it seems to create a "Social Account" model. An example of what it created for me is below. It retrieved all this information (like my name) from Google.

Example of my "Social Accounts" page

As for how to retrieve the login from the browser's local storage, I have no idea. I see no evidence of a cookie, so it must be storing it somewhere else, or you might have to set that up yourself (with React Providers, Services, or even Redux.

You are passing button props on svg component, replace GoogleIcon svg component with button like IconButton from MUI

I found the issue, you need to update react-scripts to the latest update npm install react-scripts@latest

you should avoid to access directly the DOM when using React so you should save the invalidUser information inside a state and then show/hide the ErrorMessage depending on that.

You could also do the validation of the user directly before the actual submit.

So you could do something like the following:

I found the issue, it was actually because I had a chrome extension installed that would overwrite the Time zone for this specific site on localhost for some reason. The way that it works, was by overriding the Date class. I fixed the issue, by uninstalling/disabling the extension.

Thanks for your help everyone!

i used redux for sign-in, in this case you can write react-router-component, to check that user is logged in or not