User email verification for React Native
Introduction
Having a mobile app with unrestricted user registration can cause security issues and spam in your application server. Email verification can help you prevent this situation, requiring that any registered user on your app will have a valid email address.
In this guide, you will learn how to set up email verification in your Back4App
server, which will automatically handle this verification. You will also learn how to make sure in your application that the user is indeed verified.
At any time, you can access this project via our GitHub repositories to checkout the styles and complete code.
Goal
To set up email verification using Parse in a React Native App.
Prerequisites
To complete this tutorial, you will need:
- A React Native App created and connected to Back4App.
- Complete the previous guide so you can have a better understanding of the Parse.User class.
Step 1 - Configure Email Verification
You will now configure your Parse Server on Back4App to require user email verification. Open your Back4App dashboard and navigate to your server settings control panel. Find the Verification emails
feature and click on Settings
:
Go ahead and check the Verify User Emails
and Prevent login if email is not verified
checkboxes. Feel free to update and customize any settings in this screen, like the verification email message body and reply-to address.
After setting this up, your Parse
server instance will now handle user email verification automatically.
Note: Activating
Prevent login if email is not verified
is not required, but it is good practice to require your new users to verify before performing any action in your app.
Step 2 - Update your UserRegistration component
You need to make some changes in your UserRegistration
component to correctly sign up users with email verification. First, add a new input field for your user’s email value. Update the user registration function in the UserRegistration.js
(UserRegistration.tsx
if you are using TypeScript) file so now you are setting the email attribute on user data:
UserRegistration.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const doUserSignUp = async function () {
// Note that these values come from state variables that we've declared before
const usernameValue = username;
const passwordValue = password;
const emailValue = email;
// Since the signUp method returns a Promise, we need to call it using await
// Note that now you are setting the user email value as well
return await Parse.User.signUp(usernameValue, passwordValue, {
email: emailValue,
})
.then(async (createdUser) => {
// Parse.User.signUp returns the already created ParseUser object if successful
Alert.alert(
'Success!',
`User ${createdUser.get(
'username',
)} was successfully created! Verify your email to login`,
);
// Since email verification is now required, make sure to log out
// the new user, so any Session created is cleared and the user can
// safely log in again after verifying
await Parse.User.logOut();
// Go back to the login page
navigation.dispatch(StackActions.popToTop());
return true;
})
.catch((error) => {
// signUp can fail if any parameter is blank or failed an uniqueness check on the server
Alert.alert('Error!', error.message);
return false;
});
};
UserRegistration.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const doUserSignUp = async function (): Promise<boolean> {
// Note that these values come from state variables that we've declared before
const usernameValue: string = username;
const passwordValue: string = password;
const emailValue: string = email;
// Since the signUp method returns a Promise, we need to call it using await
// Note that now you are setting the user email value as well
return await Parse.User.signUp(usernameValue, passwordValue, {
email: emailValue,
})
.then(async (createdUser: Parse.User) => {
// Parse.User.signUp returns the already created ParseUser object if successful
Alert.alert(
'Success!',
`User ${createdUser.get(
'username',
)} was successfully created! Verify your email to login`,
);
// Since email verification is now required, make sure to log out
// the new user, so any Session created is cleared and the user can
// safely log in again after verifying
await Parse.User.logOut();
// Go back to the login page
navigation.dispatch(StackActions.popToTop());
return true;
})
.catch((error: object) => {
// signUp can fail if any parameter is blank or failed an uniqueness check on the server
Alert.alert('Error!', error.message);
return false;
});
};
Note that since your user is not supposed to login without verifying his email, you need to log him out after registration to avoid any errors in the current application Session
. Test your application and now you should see a message like this after registering a new user:
After successfully registering your new user, Parse will send an email containing a verification link, looking like this:
Step 3 - Set up your UserLogIn component
Your Parse
server is now blocking automatically login attempts that are not from verified users. However, it’s also a good practice to make sure that there is no way for your unverified user to access your application, so let’s add a new condition inside your UserLogIn
component in the UserLogIn.js
(UserLogIn.tsx
if you are using TypeScript) file:
UserLogIn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const doUserLogIn = async function () {
// Note that these values come from state variables that we've declared before
const usernameValue = username;
const passwordValue = password;
return await Parse.User.logIn(usernameValue, passwordValue)
.then(async (loggedInUser) => {
// logIn will throw an error if the user is not verified yet,
// but it's safer to check again after login
if (loggedInUser.get('emailVerified') === true) {
Alert.alert(
'Success!',
`User ${loggedInUser.get('username')} has successfully signed in!`,
);
// Verify this is in fact the current user
const currentUser = await Parse.User.currentAsync();
console.log(loggedInUser === currentUser);
// Navigation.navigate takes the user to the home screen
navigation.navigate('Home');
return true;
} else {
await Parse.User.logOut();
return false;
}
})
.catch((error) => {
// Error can be caused by wrong parameters or lack of Internet connection.
// A non-verified user will also cause an error
Alert.alert('Error!', error.message);
return false;
});
};
UserLogIn.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const doUserLogIn = async function (): Promise<boolean> {
// Note that these values come from state variables that we've declared before
const usernameValue: string = username;
const passwordValue: string = password;
return await Parse.User.logIn(usernameValue, passwordValue)
.then(async (loggedInUser: Parse.User) => {
// logIn will throw an error if the user is not verified yet,
// but it's safer to check again after login
if (loggedInUser.get('emailVerified') === true) {
Alert.alert(
'Success!',
`User ${loggedInUser.get('username')} has successfully signed in!`,
);
// Verify this is in fact the current user
const currentUser: Parse.User = await Parse.User.currentAsync();
console.log(loggedInUser === currentUser);
// Navigation.navigate takes the user to the home screen
navigation.navigate('Home');
return true;
} else {
await Parse.User.logOut();
return false;
}
})
.catch((error: object) => {
// Error can be caused by wrong parameters or lack of Internet connection.
// A non-verified user will also cause an error
Alert.alert('Error!', error.message);
return false;
});
};
Step 4 - Test the email verification
Go ahead and test your application, trying to log in using the unauthorized user created before. If you didn’t click the verification link on the email, you should get an error message like this:
After clicking on the verification link, you will be able to log in and be redirected to your home screen. You can also verify your user by opening your Users
table inside your Back4App dashboard and editing the emailVerified
column manually:
Conclusion
At the end of this guide, you learned how to set up your Parse
server to require user email verification and also to enforce this restriction inside your React Native application. In the next guide, we will show you how to perform useful user queries.