An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Google Login in React
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.
Original Link: https://dev.to/heyvik/google-login-in-react-2m97
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To