--- title: SignIn with Facebook slug: docs/react/working-with-users/react-facebook-login description: In this guide you will learn how to login a user in Parse on React using Facebook Login image: https://www.back4app.com/images/logo-social.png docTags: createdAt: 2024-03-19T17:19:48.511Z --- # React Facebook Login ## Introduction In the last tutorials, you built a User login/logout feature to your App using the `Parse.User` class. Now you will learn how to use Facebook Login to retrieve user data from Facebook and log in, sign up or link existent users with it. You will also install and configure `react-facebook-login` 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 on your device. Future calls to methods like `current` will successfully retrieve your User data, just like with regular logins. ## Prerequisites :::hint{type="info"} To complete this tutorial, you will need: - A React App created and [connected to Back4App](https://www.back4app.com/docs/react/quickstart). - Complete the previous guide so you can have a better understanding of [the Parse.User class and the Parse.User.logIn method](https://www.back4app.com/docs/react/working-with-users/react-user-login) - If you want to test/use the screen layout provided by this guide, you should set up the [ library.](https://ant.design/docs/react/introduce) ::: ## Goal To build a User LogIn feature using Facebook Login on Parse for a React App. ## 1 - Installing dependencies The most popular way to enable Facebook Login on React is using `react-facebook-login` to handle it. Set it up following the [official docs](https://github.com/keppelen/react-facebook-login/). To use the lib component, you need to inform a valid Facebook app `appID`, so create one on on your Facebook for Developers dashboard, following one of their [official guides](https://developers.facebook.com/docs/development/create-an-app/). After that, add Facebook Login capability to your app while choosing the WWW option, informing `https://localhost:3000` as your website URL. Facebook Login requires that your connection is secure, even when logging in on a development environment. So, you need to setup HTTPS access for your React app by creating a local certificate, giving it full permissions in your OS and adding the files to your project. Since each OS can have its particularities, this won’t be covered in the guide. After creating the certificate, make sure to change in the `scripts` session of your `package.json` file the start command to: ```json 1 "start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start", ``` If you are using Typescript, you need to create a new file in your `src` folder called `react-facebook-login.d.ts` containing the `react-facebook-login` module declaration to use the styleless version of the component: :::CodeblockTabs react-facebook-login.d.ts ```typescript 1 declare module 'react-facebook-login/dist/facebook-login-render-props'; ``` ::: ## 2 - Using Facebook Login with Parse Let’s now create a new method inside the `UserLogIn` component that will handle the response when calling a Facebook Login authentication modal. If the user signs in with Facebook, this call will retrieve the user data from Facebook and you need to store the `id`, `accessToken`, and the profile `email`. Then, the function will try to log in on Parse using the `Parse.User.linkWith` method and these credentials. Note that if your user had already signed up using this Facebook authentication, `linkWith` will log him in using the existent account. :::CodeblockTabs JavaScript ```javascript 1 const handleFacebookLoginLoginResponse = async function(response) { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId = response.id; 10 const userEmail = response.email; 11 const userAccessToken = response.accessToken; 12 // Try to login on Parse using linkWith and these credentials 13 // Create a new Parse.User object 14 const userToLogin = new Parse.User(); 15 // Set username and email to match facebook profile email 16 userToLogin.set('username', userEmail); 17 userToLogin.set('email', userEmail); 18 try { 19 let loggedInUser = await userToLogin 20 .linkWith('facebook', { 21 authData: {id: userId, access_token: userAccessToken}, 22 }); 23 // logIn returns the corresponding ParseUser object 24 alert( 25 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 26 ); 27 // Update state variable holding current user 28 getCurrentUser(); 29 return true; 30 } catch (error) { 31 // Error can be caused by wrong parameters or lack of Internet connection 32 alert(`Error! ${error.message}`); 33 return false; 34 } 35 } catch (error) { 36 console.log("Error gathering Facebook user info, please try again!") 37 return false; 38 } 39 } 40 } ``` ```typescript 1 const handleFacebookLoginLoginResponse = async function(response: any): Promise { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId: string = response.id; 10 const userEmail: string = response.email; 11 const userAccessToken: string = response.accessToken; 12 // Try to login on Parse using linkWith and these credentials 13 // Create a new Parse.User object 14 const userToLogin: Parse.User = new Parse.User(); 15 // Set username and email to match facebook profile email 16 userToLogin.set('username', userEmail); 17 userToLogin.set('email', userEmail); 18 try { 19 let loggedInUser: Parse.User = await userToLogin 20 .linkWith('facebook', { 21 authData: {id: userId, access_token: userAccessToken}, 22 }); 23 // logIn returns the corresponding ParseUser object 24 alert( 25 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 26 ); 27 // Update state variable holding current user 28 getCurrentUser(); 29 return true; 30 } catch (error: any) { 31 // Error can be caused by wrong parameters or lack of Internet connection 32 alert(`Error! ${error.message}`); 33 return false; 34 } 35 } catch (error: any) { 36 console.log("Error gathering Facebook user info, please try again!") 37 return false; 38 } 39 } 40 } ``` ::: After that, you need to use the `react-facebook-login` `FacebookLogin` component to call the Facebook Login modal, adding it to your JSX code. You can use Facebook’s default styling or create a custom one, which is the way followed by this guide. Here is the full `UserLogin` component code, note the `react-facebook-login` button and how it is tied to the modal response method created before. :::CodeblockTabs JavaScript ```javascript 1 import React, { useState } from 'react'; 2 import Parse from 'parse/dist/parse.min.js'; 3 import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'; 4 import './App.css'; 5 import { Button, Divider, Input } from 'antd'; 6 7 export const UserLogin = () => { 8 // State variables 9 const [username, setUsername] = useState(''); 10 const [password, setPassword] = useState(''); 11 const [currentUser, setCurrentUser] = useState(null); 12 13 const doUserLogIn = async function () { 14 // Note that these values come from state variables that we've declared before 15 const usernameValue = username; 16 const passwordValue = password; 17 try { 18 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username' 23 )} has successfully signed in!` 24 ); 25 // To verify that this is in fact the current user, `current` can be used 26 const currentUser = await Parse.User.current(); 27 console.log(loggedInUser === currentUser); 28 // Clear input fields 29 setUsername(''); 30 setPassword(''); 31 // Update state variable holding current user 32 getCurrentUser(); 33 return true; 34 } catch (error) { 35 // Error can be caused by wrong parameters or lack of Internet connection 36 alert(`Error! ${error.message}`); 37 return false; 38 } 39 }; 40 41 const doUserLogOut = async function () { 42 try { 43 await Parse.User.logOut(); 44 // To verify that current user is now empty, currentAsync can be used 45 const currentUser = await Parse.User.current(); 46 if (currentUser === null) { 47 alert('Success! No user is logged in anymore!'); 48 } 49 // Update state variable holding current user 50 getCurrentUser(); 51 return true; 52 } catch (error) { 53 alert(`Error! ${error.message}`); 54 return false; 55 } 56 }; 57 58 // Function that will return current user and also update current username 59 const getCurrentUser = async function () { 60 const currentUser = await Parse.User.current(); 61 // Update state variable holding current user 62 setCurrentUser(currentUser); 63 return currentUser; 64 }; 65 66 const handleFacebookLoginLoginResponse = async function (response) { 67 // Check if response has an error 68 if (response.error !== undefined) { 69 console.log(`Error: ${response.error}`); 70 return false; 71 } else { 72 try { 73 // Gather Facebook user info 74 const userId = response.id; 75 const userEmail = response.email; 76 const userAccessToken = response.accessToken; 77 // Try to login on Parse using linkWith and these credentials 78 // Create a new Parse.User object 79 const userToLogin = new Parse.User(); 80 // Set username and email to match facebook profile email 81 userToLogin.set('username', userEmail); 82 userToLogin.set('email', userEmail); 83 try { 84 let loggedInUser = await userToLogin.linkWith('facebook', { 85 authData: { id: userId, access_token: userAccessToken }, 86 }); 87 // logIn returns the corresponding ParseUser object 88 alert( 89 `Success! User ${loggedInUser.get( 90 'username' 91 )} has successfully signed in!` 92 ); 93 // Update state variable holding current user 94 getCurrentUser(); 95 return true; 96 } catch (error) { 97 // Error can be caused by wrong parameters or lack of Internet connection 98 alert(`Error! ${error.message}`); 99 return false; 100 } 101 } catch (error) { 102 console.log('Error gathering Facebook user info, please try again!'); 103 return false; 104 } 105 } 106 }; 107 108 return ( 109

110

111

118

{'React on Back4App'}

119

{'User Login'}

120

121 {currentUser === null && ( 122

123

{'User Login'}

124 125

126 setUsername(event.target.value)} 129 placeholder="Username" 130 size="large" 131 className="form_input" 132 /> 133 setPassword(event.target.value)} 136 placeholder="Password" 137 size="large" 138 type="password" 139 className="form_input" 140 /> 141

142

143 153

154 155

156 ( 161

162

163

164 )} 165 /> 166

167

168

169

170

171

172

173

Don't have an account? Sign up

174

175 )} 176 {currentUser !== null && ( 177

178

{'User Screen'}

179 180

{`Hello ${currentUser.get('username')}!`}

181

182 192

193

194 )} 195

196 ); 197 }; ``` ```typescript 1 import React, { useState, FC, ReactElement } from 'react'; 2 import './App.css'; 3 import { Button, Divider, Input } from 'antd'; 4 import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'; 5 const Parse = require('parse/dist/parse.min.js'); 6 7 export const UserLogin: FC<{}> = (): ReactElement => { 8 // State variables 9 const [username, setUsername] = useState(''); 10 const [password, setPassword] = useState(''); 11 const [currentUser, setCurrentUser] = useState(null); 12 13 const doUserLogIn = async function (): Promise { 14 // Note that these values come from state variables that we've declared before 15 const usernameValue: string = username; 16 const passwordValue: string = password; 17 try { 18 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 22 ); 23 // To verify that this is in fact the current user, `current` can be used 24 const currentUser: Parse.User = await Parse.User.current(); 25 console.log(loggedInUser === currentUser); 26 // Clear input fields 27 setUsername(''); 28 setPassword(''); 29 // Update state variable holding current user 30 getCurrentUser(); 31 return true; 32 } catch (error: any) { 33 // Error can be caused by wrong parameters or lack of Internet connection 34 alert(`Error! ${error.message}`); 35 return false; 36 } 37 }; 38 39 const doUserLogOut = async function (): Promise { 40 try { 41 await Parse.User.logOut(); 42 // To verify that current user is now empty, currentAsync can be used 43 const currentUser: Parse.User = await Parse.User.current(); 44 if (currentUser === null) { 45 alert('Success! No user is logged in anymore!'); 46 } 47 // Update state variable holding current user 48 getCurrentUser(); 49 return true; 50 } catch (error: any) { 51 alert(`Error! ${error.message}`); 52 return false; 53 } 54 }; 55 56 // Function that will return current user and also update current username 57 const getCurrentUser = async function (): Promise { 58 const currentUser: (Parse.User | null) = await Parse.User.current(); 59 // Update state variable holding current user 60 setCurrentUser(currentUser); 61 return currentUser; 62 } 63 64 const handleFacebookLoginLoginResponse = async function(response: any): Promise { 65 // Check if response has an error 66 if (response.error !== undefined) { 67 console.log(`Error: ${response.error}`); 68 return false; 69 } else { 70 try { 71 // Gather Facebook user info 72 const userId: string = response.id; 73 const userEmail: string = response.email; 74 const userAccessToken: string = response.accessToken; 75 // Try to login on Parse using linkWith and these credentials 76 // Create a new Parse.User object 77 const userToLogin: Parse.User = new Parse.User(); 78 // Set username and email to match facebook profile email 79 userToLogin.set('username', userEmail); 80 userToLogin.set('email', userEmail); 81 try { 82 let loggedInUser: Parse.User = await userToLogin 83 .linkWith('facebook', { 84 authData: {id: userId, access_token: userAccessToken}, 85 }); 86 // logIn returns the corresponding ParseUser object 87 alert( 88 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 89 ); 90 // Update state variable holding current user 91 getCurrentUser(); 92 return true; 93 } catch (error: any) { 94 // Error can be caused by wrong parameters or lack of Internet connection 95 alert(`Error! ${error.message}`); 96 return false; 97 } 98 } catch (error: any) { 99 console.log("Error gathering Facebook user info, please try again!") 100 return false; 101 } 102 } 103 } 104 105 return ( 106

107

108

115

{'React on Back4App'}

116

{'User Login'}

117

118 {currentUser === null && ( 119

120

{'User Login'}

121 122

123 setUsername(event.target.value)} 126 placeholder="Username" 127 size="large" 128 className="form_input" 129 /> 130 setPassword(event.target.value)} 133 placeholder="Password" 134 size="large" 135 type="password" 136 className="form_input" 137 /> 138

139

140 150

151 152

153 void}) => ( 158

159

160

161 )} 162 /> 163

164

165

166

167

168

169

170

Don't have an account? Sign up

171

172 )} 173 {currentUser !== null && ( 174

175

{'User Screen'}

176 177

{`Hello ${currentUser.get('username')}!`}

178

179 189

190

191 )} 192

193 ); 194 }; ``` ::: Add these classes to your `App.css` file if you want to fully render this component’s layout. :::CodeblockTabs App.css ```css 1 @import '~antd/dist/antd.css'; 2 3 .App { 4 text-align: center; 5 } 6 7 html { 8 box-sizing: border-box; 9 outline: none; 10 overflow: auto; 11 } 12 13 *, 14 *:before, 15 *:after { 16 margin: 0; 17 padding: 0; 18 box-sizing: inherit; 19 } 20 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin: 0; 28 font-weight: bold; 29 } 30 31 p { 32 margin: 0; 33 } 34 35 body { 36 margin: 0; 37 background-color: #fff; 38 } 39 40 .container { 41 width: 100%; 42 max-width: 900px; 43 margin: auto; 44 padding: 20px 0; 45 text-align: left; 46 } 47 48 .header { 49 align-items: center; 50 padding: 25px 0; 51 background-color: #208AEC; 52 } 53 54 .header_logo { 55 height: 55px; 56 margin-bottom: 20px; 57 object-fit: contain; 58 } 59 60 .header_text_bold { 61 margin-bottom: 3px; 62 color: rgba(255, 255, 255, 0.9); 63 font-size: 16px; 64 font-weight: bold; 65 } 66 67 .header_text { 68 color: rgba(255, 255, 255, 0.9); 69 font-size: 15px; 70 } 71 72 .heading { 73 font-size: 22px; 74 } 75 76 .flex { 77 display: flex; 78 } 79 80 .flex_between { 81 display: flex; 82 justify-content: space-between; 83 } 84 85 .flex_child { 86 flex: 0 0 45%; 87 } 88 89 .heading_button { 90 margin-left: 12px; 91 } 92 93 .list_item { 94 padding-bottom: 15px; 95 margin-bottom: 15px; 96 border-bottom: 1px solid rgba(0, 0, 0, 0.06); 97 text-align: left; 98 } 99 100 .list_item_title { 101 color: rgba(0, 0, 0, 0.87); 102 font-size: 17px; 103 } 104 105 .list_item_description { 106 color: rgba(0, 0, 0, 0.5); 107 font-size: 15px; 108 } 109 110 .form_input { 111 margin-bottom: 20px; 112 } 113 114 .login-social { 115 display: flex; 116 justify-content: center; 117 margin-bottom: 30px; 118 } 119 120 .login-social-item { 121 width: 54px; 122 height: 54px; 123 border-radius: 54px; 124 padding: 12px; 125 margin: 0 12px; 126 border: 1px solid #e6e6e6; 127 box-shadow: 0 2px 4px #d6d6d6; 128 } 129 130 .login-social-item--facebook { 131 padding: 4px; 132 background-color: #3C5B9B; 133 } 134 135 .login-social-item__image { 136 width: 100%; 137 } 138 139 .form__hint { 140 color: rgba(0, 0, 0, 0.5); 141 font-size: 16px; 142 text-align: center; 143 } ``` ::: Go ahead and test your new function. If you were able to sign in to Facebook and the Parse `linkWith` call was successful, you should see a success message like this. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ju89eb7Laa8HBiuWLN4ml_image.png) ## 3 - Verifying user sign in and session creation To make sure that the Facebook Login worked, you can look at your Parse dashboard and see your new `User` (if your Facebook authentication data didn’t belong to another user), containing the Facebook `authData` parameters. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Fz64NIvC6JXLdq5BEZeZe_image.png) You can also verify that a valid session was created in the dashboard, containing a pointer to that `User` object. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/OpSekb5DCXz2CI3Enp-qR_image.png) ## 4 - Linking an existing User to Facebook Sign-in Another `linkWith` possible use is to link an existing user with another auth provider, in this case, Facebook. Add this function that calls `linkWith` the same way as logging in to your `UserLogIn` component. The only difference here is that instead of calling the method from an empty `Parse.User`, you will use it from the currently logged-in user object. :::CodeblockTabs JavaScript ```javascript 1 const handleFacebookLoginLinkResponse = async function(response) { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId = response.id; 10 const userAccessToken = response.accessToken; 11 // Try to link current Parse user using linkWith and these credentials 12 // Get current user 13 const userToLink = await Parse.User.current(); 14 try { 15 let loggedInUser = await userToLink 16 .linkWith('facebook', { 17 authData: {id: userId, access_token: userAccessToken}, 18 }); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username', 23 )} has successfully linked his Facebook account!`, 24 ); 25 // Update state variable holding current user 26 getCurrentUser(); 27 return true; 28 } catch (error) { 29 // Error can be caused by wrong parameters or lack of Internet connection 30 alert(`Error! ${error.message}`); 31 return false; 32 } 33 } catch (error) { 34 console.log("Error gathering Facebook user info, please try again!") 35 return false; 36 } 37 } 38 } ``` ```typescript 1 const handleFacebookLoginLinkResponse = async function(response: any): Promise { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId: string = response.id; 10 const userAccessToken: string = response.accessToken; 11 // Try to link current Parse user using linkWith and these credentials 12 // Get current user 13 const userToLink: Parse.User = await Parse.User.current(); 14 try { 15 let loggedInUser: Parse.User = await userToLink 16 .linkWith('facebook', { 17 authData: {id: userId, access_token: userAccessToken}, 18 }); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username', 23 )} has successfully linked his Facebook account!`, 24 ); 25 // Update state variable holding current user 26 getCurrentUser(); 27 return true; 28 } catch (error: any) { 29 // Error can be caused by wrong parameters or lack of Internet connection 30 alert(`Error! ${error.message}`); 31 return false; 32 } 33 } catch (error: any) { 34 console.log("Error gathering Facebook user info, please try again!") 35 return false; 36 } 37 } 38 } ``` ::: Assign this function to another `react-facebook-login` component in your home screen, which is shown only when there is a current user logged in in your app. 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. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/6r0_4qP2ScDfW6IJyWL8E_image.png) ## Conclusion At the end of this guide, you learned how to log in, sign up or link existing Parse users on React using Facebook Login with `react-google-login`. In the next guide, we will show you how to use Apple sign-in.