CODEWITHSUNDEEP
javascriptnode.jsreactjsoauth-2.0google-oauth
Josh Merrian
Josh Merrian

Reputation: 331

Implementing simple Google oAuth in ReactJS

I have a mini vanilla JS app set up like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta
      name="google-signin-client_id"
      content="{{client_id}}" /> <!--Here goes my actual WORKING google client id-->
    />
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
 
    <button onclick="signOut()">Sign Out</button>
    <script>
      function onSignIn(googleUser) {
        const profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail()); // This is null if the 'email' scope is not present.
        }

      function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          console.log("User signed out.");
        });
      }

    </script>
  </body>
</html>

Where I sign in a user, and then I can sign them out, using Google. When I am trying to transfer this to a React project, I run into some problems:

Upvotes: 0

Views: 249

Answers (1)

Tam Nguyen
Tam Nguyen

Reputation: 181

I think you can use this library https://www.npmjs.com/package/react-google-login. Or maybe you can read github of that repo to see how to grab google oauth to react app

Upvotes: 1

Related Questions