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

 by   anthonyjgrove JavaScript Version: v5.2.1 License: MIT

kandi X-RAY | react-google-login Summary

kandi X-RAY | react-google-login Summary

react-google-login is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Security, Authentication, React applications. react-google-login has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i nhut-google-login' or download it from GitHub, npm.

A Google oAUth Sign-in / Log-in Component for React.

            kandi-support Support

              react-google-login has a medium active ecosystem.
              It has 1793 star(s) with 409 fork(s). There are 22 watchers for this library.
              It had no major release in the last 12 months.
              There are 169 open issues and 200 have been closed. On average issues are closed in 87 days. There are 33 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-google-login is v5.2.1

            kandi-Quality Quality

              react-google-login has 0 bugs and 0 code smells.

            kandi-Security Security

              react-google-login has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-google-login code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-google-login is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-google-login releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.
              react-google-login saves you 2 person hours of effort in developing the same functionality from scratch.
              It has 8 lines of code, 0 functions and 18 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed react-google-login and discovered the below as its top functions. This is intended to give you an instant insight into react-google-login implemented functionality, and help decide if they suit your requirements.
            • Sign in with form
            • Handler for the signin failure
            Get all kandi verified functions for this library.

            react-google-login Key Features

            No Key Features are available at this moment for react-google-login.

            react-google-login Examples and Code Snippets

            No Code Snippets are available at this moment for react-google-login.

            Community Discussions


            npm install react-google-login not working
            Asked 2022-Mar-30 at 13:44

            i am using following command to install react-google-login for react npm install react-google-login but its not working



            Answered 2022-Mar-30 at 13:44

            try using npm install react-google-login --force or npm install react-google-login --legacy-peer-deps



            The unauthenticated git protocol on port 9418 is no longer supported
            Asked 2022-Mar-27 at 13:23

            I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs



            Answered 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.

            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.

            For GitHub Actions:

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



            React router dom renders a blank page
            Asked 2022-Mar-27 at 12:03

            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



            Answered 2022-Mar-27 at 12:03

            it's element not component



            Problem with YouTube Data API to retrieve user's channel Id
            Asked 2022-Feb-01 at 17:28

            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:



            Answered 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



            Django and react login with google authentication
            Asked 2022-Jan-13 at 12:45

            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 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 responseType is 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 file



            Answered 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
                • 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 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/ 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.



            renderProps and TypeScript
            Asked 2022-Jan-03 at 20:23

            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:



            Answered 2022-Jan-03 at 20:23

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



            tailwindcss 3 is not loading css in react
            Asked 2021-Dec-23 at 19:01

            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.




            Answered 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



            Formik and yup validation not working for required
            Asked 2021-Dec-14 at 16:19

            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?




            Answered 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:



            Default Timezone is incorrect for only my site when running new Date();
            Asked 2021-Dec-06 at 01:13

            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

            new Date()

            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 package.json



            Answered 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!



            react how to setup private routes that can only be accessed when someone is signed in?
            Asked 2021-Nov-26 at 08:17

            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



            Answered 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


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-google-login

            You can install using 'npm i nhut-google-login' or download it from GitHub, npm.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries

            Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link