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:
- Functions cannot be executed as they are in the VanillaJS app (between quotes)
- Even though I include the script tags in the
public/index.htmlin the React project, I don't have access to thegapivariable. Does anyone know how to do this?
asked Mar 12, 2021 at 1:38
1 Answer 1
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
Sign up to request clarification or add additional context in comments.
Comments
Explore related questions
See similar questions with these tags.
lang-js