Get Data PhoneNumber from Google API using React OAuht

Get Data PhoneNumber from Google API using React OAuth

When working with React and OAuth, you may come across the need to retrieve a user’s phone number from the Google API. In this blog post, we will explore different solutions to achieve this goal.

Solution 1: Using the Google People API

The Google People API provides access to a user’s contacts and profile information, including their phone number. To use this API, you need to set up OAuth authentication and obtain an access token.

Here’s an example of how you can retrieve a user’s phone number using the Google People API in React:

    // Import the necessary libraries
    import { useEffect, useState } from 'react';
    import { gapi } from 'gapi-script';
  
    const App = () => {
      const [phoneNumber, setPhoneNumber] = useState('');
  
      useEffect(() => {
        const fetchPhoneNumber = async () => {
          try {
            await gapi.client.init({
              apiKey: 'YOUR_API_KEY',
              clientId: 'YOUR_CLIENT_ID',
              discoveryDocs: ['https://people.googleapis.com/$discovery/rest?version=v1'],
              scope: 'profile',
            });
  
            await gapi.client.load('https://people.googleapis.com/$discovery/rest?version=v1');
  
            const response = await gapi.client.people.people.get({
              resourceName: 'people/me',
              personFields: 'phoneNumbers',
            });
  
            if (response.result.phoneNumbers && response.result.phoneNumbers.length > 0) {
              setPhoneNumber(response.result.phoneNumbers[0].value);
            }
          } catch (error) {
            console.error('Error fetching phone number:', error);
          }
        };
  
        fetchPhoneNumber();
      }, []);
  
      return (
        

          
User's Phone Number: {phoneNumber}
        
      );
    };
  
    export default App;
  

Make sure to replace ‘YOUR_API_KEY’ and ‘YOUR_CLIENT_ID’ with your own API key and client ID obtained from the Google API Console.

Solution 2: Using the Google OAuth API

If you only need the user’s phone number and don’t require access to their contacts, you can use the Google OAuth API to retrieve the phone number directly.

Here’s an example of how you can retrieve a user’s phone number using the Google OAuth API in React:

    // Import the necessary libraries
    import { useEffect, useState } from 'react';
    import { gapi } from 'gapi-script';
  
    const App = () => {
      const [phoneNumber, setPhoneNumber] = useState('');
  
      useEffect(() => {
        const fetchPhoneNumber = async () => {
          try {
            await gapi.client.init({
              apiKey: 'YOUR_API_KEY',
              clientId: 'YOUR_CLIENT_ID',
              discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/oauth2/v2/rest'],
              scope: 'https://www.googleapis.com/auth/user.phonenumbers.read',
            });
  
            await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/oauth2/v2/rest');
  
            const response = await gapi.client.oauth2.userinfo.get();
  
            if (response.result.phoneNumber) {
              setPhoneNumber(response.result.phoneNumber);
            }
          } catch (error) {
            console.error('Error fetching phone number:', error);
          }
        };
  
        fetchPhoneNumber();
      }, []);
  
      return (
        

          
User's Phone Number: {phoneNumber}
        
      );
    };
  
    export default App;
  

Again, make sure to replace ‘YOUR_API_KEY’ and ‘YOUR_CLIENT_ID’ with your own API key and client ID obtained from the Google API Console.

Conclusion

Retrieving a user’s phone number from the Google API using React OAuth can be achieved through the Google People API or the Google OAuth API. Depending on your specific requirements, you can choose the appropriate solution.

Remember to handle errors and provide proper error messages to the user in case the phone number cannot be retrieved.