SignIn with Google

signin with google for react native introduction in the last tutorial, you built a user login/logout feature to your app using the parse user parse user class now you will learn how to use google sign in to retrieve user data from google and log in, sign up or link existent users with it you will also install and configure react native google signin react native google signin lib to achieve that the parse user linkwith parse user linkwith method is responsible for signing up and logging in users using any third party authentication method, as long as you pass the right parameters requested by each different provider after linking the user data to a new or existent parse user parse user , parse will store a valid user session in your device future calls to methods like currentasync currentasync will successfully retrieve your user data, just like with regular logins at any time, you can access this project via our github repositories to checkout the styles and complete code https //github com/templates back4app/react native js login google https //github com/templates back4app/react native ts login google prerequisites to complete this tutorial, you will need a react native app created and https //www back4app com/docs/react native/parse sdk/react native sdk complete the previous guides so you can have a better understanding of https //www back4app com/docs/react native/parse sdk/working with users/react native login goal to build a user login feature using google sign in on parse for a react native app 1 installing dependencies the most popular way to enable google sign in on react native is using react native google signin react native google signin to handle it since this library configuration depends on your development environment, target platform, and preferences, set it up following the https //github com/react native google signin/google signin after that, make sure that your app main file ( app js app js or app tsx app tsx ) is correctly initializing and configuring googlesignin googlesignin like this app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3&#x9; 4 // parse initialization configuration goes here 5 // 6&#x9; 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16&#x9; 17 // 2 usign google sign in with parse let’s now create a new method inside the userlogin userlogin component calling google sign in authentication modal with googlesignin signin googlesignin signin if the user signs in with google, this call will retrieve the user data from google and you need to store the id, idtoken, and google email for later javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; after that, you can use parse user linkwith parse user linkwith on a new parse user parse user object to register a new user and log in note that if your user had already signed up using this google authentication, linkwith linkwith will log him in using the existent account javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; add this function to your usersignin usersignin component and assign it to your google button onpress onpress parameter go ahead and test your new function note that the user will be redirected to your home screen after successfully registering and/or signing in 3 verifying user sign in and session creation to make sure that the google sign in worked, you can look at your parse dashboard and see your new user user (if your google authentication data didn’t belong to another user), containing the google authdata authdata parameters you can also verify that a valid session was created in the dashboard, containing a pointer to that user user object 4 linking an existing user to google sign in another linkwith linkwith possible use is to link an existing user with another auth provider, in this case, google add this function that calls linkwith linkwith the same way you did in userlogin userlogin to your hellouser hellouser component or directly to your home screen the only difference here is that instead of calling the method from an empty parse user parse user , you will use it from the logged in user object javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; assign this function to a google button onpress onpress parameter on your home screen test your new function, noting that the parse user parse user object authdata authdata value will be updated with the new auth provider data verify if the user has indeed updated in your parse server dashboard conclusion at the end of this guide, you learned how to log in, sign up or link existing parse users on react native using google sign in with react native google signin react native google signin in the next guide, we will show you how to perform useful user queries