kandi X-RAY | react-google-login Summary
kandi X-RAY | react-google-login Summary
A Google oAUth Sign-in / Log-in Component for React.
Top functions reviewed by kandi - BETA
- Sign in with form
- Handler for the signin failure
react-google-login Key Features
react-google-login Examples and Code Snippets
Trending Discussions on react-google-login
i am using following command to install react-google-login for react npm install react-google-login but its not working...
ANSWERAnswered 2022-Mar-30 at 13:44
npm install react-google-login --force or
npm install react-google-login --legacy-peer-deps
I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs...
ANSWERAnswered 2022-Mar-16 at 07:01
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.
For GitHub Actions:
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:
I am new to react-router-dom for the first time . I am using react-router-dom to switch between pages and it is rendering a blank page, only the navbar component is rendering. When I render the home and auth components individually outside the Routes, they render successfully.Please help me debugging this code.
Here is my App.js...
ANSWERAnswered 2022-Mar-27 at 12:03
I am trying to implement a React - Node js application that authenticates the user with Google and then retrieve its YouTube channel Id with google apis. I'm new to Google APIs, so I need some help to make this code works. The authentication with Google perfectly works, but I have a lot of difficulties in making the request to retrieve the channel id.
This is the code to focus in the React authentication component implemented with react-google-login:...
ANSWERAnswered 2022-Feb-01 at 17:28
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.List my YouTube channels View in Fusebit
I was trying set up google authentication with react frontend and django rest framework backend. I set up both the frontend and backend using this two part tutorial, PART1 & PART2. When I try to login with google in the frontend I get
POST http://127.0.0.1:8000/google-login/ 400 (Bad Request) I think it's because my google api needs an access token and an authorization code to be passed. After debugging the react js, I noticed the response I get from google doesn't have an authorization code. I suspect because
permission(by default), Source:React login props , instead of
code. I was wondering how would you change the response type in react? (I'm not even sure if this alone is the issue)
Here's my backend code
In my views.py file...
ANSWERAnswered 2021-Nov-04 at 23:26
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
- Configured the OAuth consent screen
- Register a Django superuser
- Registered a
Site, with value of
localhost:8000for both fields.
- Went into the admin panel, and added a
Secret Keyas 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
- Registered a
- Filled in the
App.js, in the params of the
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
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 (
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.
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.
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
Services, or even
I am attempting to convert my React project to TypeScript and am stuck on this login component. I am using react-google-login, and I'm getting the following error here when using renderProps:...
ANSWERAnswered 2022-Jan-03 at 20:23
You are passing button props on svg component, replace GoogleIcon svg component with button like IconButton from MUI
i have been using tailwindcss 2 but i wanted to upgrade to 3. I followed their tutorial but is not working i dont know why.
ANSWERAnswered 2021-Dec-23 at 19:01
I found the issue, you need to update react-scripts to the latest update
npm install react-scripts@latest
I use Formik and Yup to validate my login form in React. As you can see from the code below, I check that the inputs are not empty and then call my backend to check if the user exists. The call to the backend works, because if the user does not exist I report the error in the div with id "invalidUser" (I do not know if this is the most correct solution, I thought of a way to insert the error in the form of control of formik but I have not succeeded) while the required() Yup doesn’t work because it doesn’t report errors when I don’t write anything in the inputs. Why? Do you have a solution? Also my control solution if the user exists or not can go well or there is a better one?
ANSWERAnswered 2021-Dec-14 at 16:19
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:
Okay so I am deving a new React site and and playing around with some time stuff and realised that when using the dev tools and running a
I get back
Fri Dec 03 2021 03:55:44 GMT+0000 (Greenwich Mean Time)
However since I am in the Australian Timezone I expect that this should come back as
Fri Dec 03 2021 14:55:44 GMT+1100 (Australian Eastern Daylight Time)
So my first thought was that my system timezone was out of whack, however when I tried the same on any other website, (open dev tools and run
new Date()) I get the correct time zoned Date.
My guess of what is going on is that the Date() primitive is being overwritten somewhere but I'm unsure of how to check what is overriding it. I am using the
date-fns package but that's in terms of date libraries. Below is my
ANSWERAnswered 2021-Dec-06 at 01:13
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'm trying to make a website with react-google-login SSO authentication, and I'd like to make a private route where if no user is logged in, no one can access those routes and even see the sidebar component. And will be always be redirected to the login page even if they try to access the route through the url.
Here's my app.js...
ANSWERAnswered 2021-Nov-26 at 07:40
i used redux for sign-in, in this case you can write react-router-component, to check that user is logged in or not
No vulnerabilities reported
Reuse Trending Solutions
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page