This content originally appeared on DEV Community and was authored by Vik 📈
Hello developers,
in this blog I am going tell you that how can you implement google signin/login in your app/website. I am using react-google-login library for this blog. Else you can do it with firebase too but it has a different process.
First Steps.
• You must need a google account.
• You have to generate a client id with google api.
• While generating a client id, you need to permit the url in which the login system will work. example: mysite.com.
Following me on twitter will help us both so consider following
Using the library
npm install react-google-login or yarn add react-google-login
import { GoogleLogin } from 'react-google-login';
function App() {
const responseGoogle = (response) => {
console.log(response);
}
return (
<GoogleLogin
clientId="your-client-id"
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>
)
}
How to keep you logged in
To keep your user logged in you need you use isSignedIn props.
<GoogleLogin
clientId="your-client-id"
onSuccess={responseGoogle}
isSignedIn={true}
/>
Get user info to display
It is pretty simple to get user info, in case you want to display it.
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [picture, setPicture] = useState("")
const responseGoogle = (response) => {
console.log(response);
// getting user info
setName(response.profileObj.name)
setEmail(response.profileObj.email)
setPicture(response.profileObj.imageUrl)
}
+Bonus
you can use a loginStatus, setLoginStatus useState system to redirect you once someone is logged in.
Thanks for reading this blog till now, if you get any errors, or questions. You can ask me those in the comments below.
This content originally appeared on DEV Community and was authored by Vik 📈
Vik 📈 | Sciencx (2021-11-20T09:25:05+00:00) Google Login in React. Retrieved from https://www.scien.cx/2021/11/20/google-login-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.