Reading time: 5 minutes
Today, we are going to learn how to implement Google authentication in our React Native app.

Once we have our initialized React Native project, we will use the library (https://docs.expo.dev/versions/latest/sdk/auth-session/).
First of all, open app.json and add the fields “name” and “slug“:
"expo": { "name": "App_name", "slug": "App_name",
And within app.json, in the iOS section:
"ios": { "bundleIdentifier": "com.app_name",
We also need to add the package in Android:
"android": { "package": "com.app_name",
Now, we need to sign in to the Google Developer Center (https://cloud.google.com/developers?hl=en):

Click on > Get Started for Free and join.
Once inside, click on Console.
Within the console, you need to create a new project. Click on the box that appears at the top left corner, where it says Google Cloud (in my case, there is already a project):

A new window will open, and you can choose “New Project”:

Now, add the desired name and click on Create.
Once created, select your project.
Now click on the navigation menu:

Today we are going to see how we can implement Google authentication in our React Native app.

Assuming our React Native project is initialized, we’re going to use the library (https://docs.expo.dev/versions/latest/sdk/auth-session/ ).
First, open app.json and add the fields ““name” and ““slug”:
"expo": { "name": "App_Name", "slug": "App_Name",
And inside app.json in the iOS section:
"ios": { "bundleIdentifier": "com.app_name",
You also need to add the package in Android:
"android": { "package": "com.app_name",
Now, you need to sign in to the Google Developer Console (https://cloud.google.com/developers?hl=en):

Click on > Get Started for Free and join.
Once inside, click on Console.
Inside the console, you need to create a new project. Click on the drawer that appears in the top left corner of the title where it says Google Cloud (in my case, there is already a project):

A new window will open, and you can choose “New Project”:

Now add the desired name and click on Create.
Once created, select your project.
Now click on the navigation menu:

Choose APIs & Services and then Credentials.

Click on Create Credentials and choose OAuth client ID.
Choose Android or iOS, depending on your needs.
Enter the name of your app and the package name (com.app_name):

Click on Create.
You will receive your Client ID and Client Secret. Save them for later use.

Now let’s install the necessary packages:
expo install expo-google-app-auth expo-constants
Open the file where you want to implement the authentication (for example, App.js) and import the necessary packages:
import * as Google from 'expo-google-app-auth'; import Constants from 'expo-constants';
Now we will create a function for Google authentication:
const signInWithGoogleAsync = async () => { try { const config = { iosClientId: Constants.manifest.extra.iosClientId, androidClientId: Constants.manifest.extra.androidClientId, scopes: ['profile', 'email'], }; const { type, accessToken, user } = await Google.logInAsync(config); if (type === 'success') { // User successfully authenticated console.log('User authenticated!', user); // You can now do something with the user data } else { // Authentication failed console.log('Authentication failed!'); } } catch (error) { console.log('Error: ', error.message); } };
Add a button or any other UI element to trigger the authentication process:
That’s it! Now you have implemented Google authentication in your React Native app.
Remember to replace App_Name
with the actual name of your app and com.app_name
with the appropriate package name.
PIPE
