SignIn with Google

9 min

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\ 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\ lib to achieve that the \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 will store a valid user session in your device future calls to methods like \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 javascript example repository https //github com/templates back4app/react native js login google typescript example repository https //github com/templates back4app/react native ts login google prerequisites to complete this tutorial, you will need a react native app created and connected to back4app https //www back4app com/docs/react native/parse sdk/react native sdk complete the previous guides so you can have a better understanding of the parse user class 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\ to handle it since this library configuration depends on your development environment, target platform, and preferences, set it up following the official docs https //github com/react native google signin/google signin after that, make sure that your app main file ( \app js\ or \app tsx\ ) is correctly initializing and configuring \googlesignin\ like this app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3	 4 // parse initialization configuration goes here 5 // 6	 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	 17 // 2 usign google sign in with parse let’s now create a new method inside the \userlogin\ component calling google sign in authentication modal with \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\ on a new \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\ 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\ component and assign it to your google button \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\ (if your google authentication data didn’t belong to another user), containing the google \authdata\ parameters you can also verify that a valid session was created in the dashboard, containing a pointer to that \user\ object 4 linking an existing user to google sign in another \linkwith\ possible use is to link an existing user with another auth provider, in this case, google add this function that calls \linkwith\ the same way you did in \userlogin\ to your \hellouser\ component or directly to your home screen the only difference here is that instead of calling the method from an empty \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\ parameter on your home screen test your new function, noting that the \parse user\ object \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\ in the next guide, we will show you how to perform useful user queries