An important step in app development is ensuring the secure authentication of users during registration and log in. This can be achieved through various methods but we will focus on using Firebase API authentication to create and verify users in React Native.
Step 1: Creating a New User in Firebase
When a new user registers in our app we need to ensure that we capture a valid email address and password. These credentials are then sent through a HTTP request to Firebase where they are stored securely. Here is how you can do this (further information can be found in the Firebase documentations):
async function createUser(email, password) {
const response = await axios.post(
"https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=" + API_KEY,
{
email: email,
password: password,
returnSecureToken: true,
}
);
const token = response.data.idToken;
return token;
}
In this function, a POST request is sent to Firebase’s sign-up endpoint with the user’s email and password. If successful, Firebase returns an ID token, which can be used to authenticate the user.
Another similar function can also be created for log in purposes, this sends a HTTP request to Firebase database with the registered credentials provided by user during registration, if this matches credentials that are stored in Firebase for a user, an auth token will be returned:
async function signIn(email, password) {
const response = await axios.post(
"https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=" +
API_KEY,
{
email: email,
password: password,
returnSecureToken: true,
}
);
console.log(response.data);
const token = response.data.idToken;
return token;
}
Step 2: Storing User Authentication State
Once a user has been authenticated and logged in, the auth token identifies the authenticated user. This token can be sent along with future HTTP requests to access protected information stored in Firebase or any other backend database that you choose to use. This ensures that only the user has access to their secure information.
To maintain the user’s authentication state across app sessions, we can store the auth token in the device allowing users to be logged in automatically for a certain period of time before the token expires. Different third party libraries are available for this but for this app I have chosen to use AsyncStorage, here’s an example of how to do this in your context provider:
useEffect(() => {
async function fetchToken() {
const storedToken = await AsyncStorage.getItem("token");
if (storedToken) {
setAuthToken(storedToken);
}
}
fetchToken();
}, []);
function authenticate(token: string) {
setAuthToken(token);
AsyncStorage.setItem("token", token);
}
To summarise the context provider handles:
- Fetching and storing the authentication token
- Managing the authentication state and expense
Additional Functionality- Logout
If we wanted to log the user out we can remove the token stored in the device, you can do so with the following code, thereby adding a logout functionality:
AsyncStorage.removeItem("token");Conclusion
By using Firebase API authentication, you can securely manage user credentials and maintain their authentication state in your React Native app. Storing the authentication token with AsyncStorage ensures that users remain logged in across sessions, providing a seamless experience. This setup is fundamental for any app that requires user authentication and data protection. For further details, you can refer to the Firebase documentation. Happy coding 😊!
