Simple authentication app with Firebase and Expo

Authentication is well known as one of the most important part among projects, thus, with this article ill show how I made my first login app in two different ways, which is Google authentication and Email authentication.

Before get into some detail code works, I highly recommend you read more on this page: https://medium.com/techtalkers/setting-up-firebase-with-react-native-expo-b9c9eddb8c8b to know how Firebase works and how to connect your project with firebase services.

After you got everything set, lets move on into the next step.

Part 1: Log in with your email and password

To do this you need no do some settings on your Firebase authentication, here is how to do that:

1. Go into your project and do some set up.

Next, go to Firebase authentication tag.

Choose sign-in and set your Email/password enabled like this:

2. Import your config.js file and make sure your project is connected to Firebase services, you should have some console.log to get notice to that.
3. Next import signInWithEmailAndPassword from your firebase/auth. This is the method which should help you to easily create a sign in page with email and password.

The code should looks like this:

 signInWithEmailAndPassword(auth, email, password)
          .then((userCredential) => {
                    // Signed in
                    const user = userCredential.user;
                    console.log("logged in with email and password: " + user.email);})
                .catch((error) => {
                    alert("Email or pasword is not matched") });
4. Finally to catch up the auth event and push in some activities like page changing or other functions you need to import onAuthStateChanged from your Firebase/auth.

The code should looks like this:


useEffect(() => {

const unsubscribe = auth.onAuthStateChanged(
user() {
 if (user) {
navigation.navigate("Tabs")}
})

return unsubscribe
}, [])
5. Go back to your Firebase authentication and check the result. First you need to create your own account manually:

Fill up your email and password, then next you can go back to your project and try to login with it. Pretty easy stuff isn’t it.

Part 2: Login with Social account or better know as Google sign in. So technically this will help you using your Google account to access to your project.

1. First of all enable your Google authentication as we have done previously:
2. Next you need to have some config to access to do this, you need to have some critical id. ClientId for web and ios, androidClientId for android you can find it in here:

Choose web SDK configuration and click on the link below to get to Google Cloud Console in there you should find all your id on credential tag like this:

Its all there in Oauth 2.0 client id but if you cant find your Android id don’t worry follow this to create one: https://www.youtube.com/watch?v=QT0PXhH9uTg

3. When you get everything set then lets move on into code works. First, import GoogleAuthProvider then const your provider.

Next auth code should looks like this:

React.useEffect(() => {
if (response?.type === 'success') {
  const { id_token } = response.params;
  const credential = GoogleAuthProvider.credential(id_token);
  const auth = getAuth();
  signInWithCredential(auth, credential)
   .then(() => {
     })
   }
 }, [response]);
4. Why i was using signInWithCredential in here, well because in Expo, signInWithPopUp ain’t gonna works on Android and some other is not working because of deprecated. And here is the client ID that we got earlier :

const [request, response, promptAsync] = Google.useIdTokenAuthRequest({

        clientId: ‘xxxxxxxxxxx–v7to0mrvk9mj22nv8iit92t8a75toji8.apps.googleusercontent.com’,

        androidClientId: xxxxxxxxxxxx-2ajpb6qvs7ld72sjlk7cl117v7vd1sbb.apps.googleusercontent.com’

    });

promptAsync is the function call but in case that you don’t know how to write it do like this:

onPress={() => { promptAsync() }}

5. Now go back to your firebase again, then try to log in with one of your Google mail and check the result.

Thank you for reading this, hope I can help you some with this, enjoy the code.

Leave a Comment

Your email address will not be published. Required fields are marked *