How to Guide: Authenticating user email with Google Sign-in & Phone number using firebase and Twilio in react-native (Android)

We are going to sign up users with firebase google-login & verify their numbers with Twilio

Let's create a firebase project accepting the defaults

and you should see a screen similar to the below once the setup is finished

Click on the android icon as we will be making this only for Android for now

Now create a react-native project

type the below code

npx react-native init authenticateusers

I have named the project authenticateusers you can name it anything.

once the installation is complete open the project in vs code

delete the content of the App.js file and paste the below code

The screen should look like below on your emulator or device

Once you see the screen it means everything is working fine let's open the Appmanifest file in vs code and copy the package name.

go to android\app\src\main\AndroidManifest.xml

copy the package name and go to the firebase console where we left off & paste the package name

as we will be using google for auth we also need the SHA-1 key

head over to the terminal in vs code and paste the below code

keytool -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore

if it prompts for a password please type android & hit enter you should be able to view the SHA-1 key

paste the SHA-1 in the firebase console

Register the app & Download google-services.json in the next step

move the file to android > app > google-services.json(moved file)

Next, follow the process in firebase SDK and paste the google classpath

Please note unlike firebase web SDK we don't need to initialize the firebase separately hence the above lines are extremely important

One last step is to enable authentication by google in firebase

Head over to firebase console & click on Authentication > Sign-in method > Google hit enable also please add a Project support email hit save.

Now back to our VS code lets add dependencies for our project

npm i @react-native-firebase/app @react-native-firebase/auth @react-navigation/native @react-navigation/native-stack formik react-native-gesture-handler react-native-safe-area-context react-native-screens @react-native-google-signin/google-signin axios

lets configure routes with React-native-navigation

Please create a Screens folder with two screens Profile.js & Signup.js

Signup.js

Profile.js

Create another file AppRoutes.js & import both files

AppRoutes.js

Now in the Signup.js file, we will display the google signing button

paste the above code get your webClientId from google-services.json >client >oauth_client >client_id (choose the one with client_type =3)

In the above code we register an auth state listener once the user clicks on the google button we sign the user through firebase and if the user object is there we navigate the user to the profile page along with user details.

Next, we set up Twilio for OTP verification from a node server as we don't want our SIDs or tokens to be public

Signup for a trial account with Twilio

As soon as you sign up for a new account & create a phone number you are assigned an ACCOUNT SID & AUTH TOKEN

Click on Verify >Services give it a friendly name choose code length

Scroll to bottom

Deactivate channels you are not using Hit Save copy the SERVICE_SID

Next, we spin an express server with

npm i twilio express

with two routes nothing fancy

1. send-otp (For sending OTP)

2. verify (For verifying OTP)

In the Profile page, we create a simple formik form where once the user enters their Phone number the Verify Button is visible

Once the user clicks on the verify button a request is sent to the node server and OTP is sent via Twilio when the user enters the received OTP the backend verifies redirect user wherever you want to.

Please set up firebase rules & appropriate security measures for the node server to prevent unwanted access

The repo for this can be found on

https://github.com/aroirocks/Authenticate_users_number.git

Hope this helps let me know if any issues.