How to authenticate user using your Google account in an app built with Expo (React Native)?

Question

I’m developing an app with PHP in the backend and React Turn on the mobile frontend. The app already has a web frontend written with jquery, and the authentication is done using Google Oauth. In the web version is working like this:

The user clicks on a button and is authenticated by the onSignIn function:

function onSignIn(googleUser) {
    var googleToken = googleUser.getAuthResponse().id_token;

    $.post('index.php', {
        url: 'login',
        googleToken: googleToken    
    });
}

The variable googleToken stores the value returned by id_token and is sent to the server, which requests the Google api:

file_get_contents('https://www.googleapis.com/oauth2/v3/tokeninfo?id_token='.$googleToken);

Being a valid token, it returns various information such as name, email and avatar, which are used in authentication, if the email already exists, is logged in, otherwise registered.

In the mobile app, I am developing with Expo and would like to authenticate in the same way, however I am not getting access to id_token as on the web, but only to a token called access_token, that does not have the necessary information (such as name, email and avatar) to properly authenticate. Here is an example:

import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, ResponseType, useAuthRequest, useAutoDiscovery } from 'expo-auth-session';

WebBrowser.maybeCompleteAuthSession();
const useProxy = Platform.select({ web:false, default:true });

export default function Home() {

  const discovery = useAutoDiscovery('https://accounts.google.com');
  const [request, response, promptAsync] = useAuthRequest(
    {
      responseType:  ResponseType.Token,
      usePKCE: false,
      clientId: 'CLIENT_ID',
      redirectUri: makeRedirectUri({
        native: 'com.googleusercontent.apps.GOOGLE_GUID://redirect',
        useProxy
      }),
      scopes: ['openid', 'profile', 'email']
    },
    discovery
  );

  useEffect(() => {
    if (response?.type === 'success') {
      const { access_token } = response.params;
    }
  }, [response]);

  return(
    ...
  );
}

• How to authenticate using Google in an Expo app?
• How to access the id_token in the Expo as in the web?
• Or, how to use the access_token to access profile information, such as name, email and avatar at the Expo?

Answer 1

Look friend, the Expo is very limited in production, I recommend you use React Native CLI for complex projects like this one of yours. Maybe the expo team doesn’t have a module or a solution for your problem yet, but expects other answers. Use expo only for simple apps or starters.

Answer 2

You can install a dependency called "expo-google-app-auth"

expo install expo-google-app-auth

After installing, you can extract the access_token as follows:

import * as Google from 'expo-google-app-auth';
const { type, accessToken, user } = await Google.logInAsync({
  iosClientId: `<YOUR_IOS_CLIENT_ID_FOR_EXPO>`,
  androidClientId: `<YOUR_ANDROID_CLIENT_ID_FOR_EXPO>`,
  iosStandaloneAppClientId: `<YOUR_IOS_CLIENT_ID>`,
  androidStandaloneAppClientId: `<YOUR_ANDROID_CLIENT_ID>`,
});

if (type === 'success') {
  let userInfoResponse = await fetch('https://www.googleapis.com/userinfo/v2/me', {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
}

More information:

https://docs.expo.io/versions/latest/sdk/google/