Questions About AuthSession Google Credentials

Expo SDK
1

I’m trying to use the AuthSession API to set up Google OAuth for my expo managed app. However, it’s unclear to me which Google credentials to generate. I’ve been unsuccessful thus far using Android credentials to test on the Expo web client as well as my Android device (via Expo live testing/reloading).

I’ve only been able to get it to work on the Expo web client a few times via the proxy, but I’ve always had a URI redirect mismatch whenever I actually try it on my device. As such, I want to start fresh with the following questions.

  • I need to get the proper credentials from Google. Do I generate a new credentials for Android and iOS apps? Just Web? Something else?
  • For the sign in to work on my device, what package name(s) or JavaScript origins/redirect URIs do I need to fill in?
  • To be clear, if my the resulting client ID returned by Google is “test123.apps.googleusercontent.com”, would I take the prefix (“test123”) and fill it in the “MY_ID” locations in the below code? Or should I be using a different identifier?

Here is my Login.js code, which my App.js displays:

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

// Used by web
WebBrowser.maybeCompleteAuthSession();
const useProxy = Platform.select({ web: false, default: true });
const redirectUri = makeRedirectUri({
  native: 'com.googleusercontent.apps.MY_ID://redirect',
  useProxy
});

const Login = (props) => {
  // Set the state
  const [loading, setLoading] = React.useState(false);
  const [userCode, setUserCode] = React.useState(null);

  // Get the auth objects
  const discovery = useAutoDiscovery('https://accounts.google.com');
  console.log(redirectUri)
  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: 'MY_ID.apps.googleusercontent.com',  // host.exp.exponent
      redirectUri: redirectUri,
      scopes: ['openid', 'profile'],
    },
    discovery
  );

  async function logIn() {
    // Toggle loading
    setLoading(true)

    // Log in
    await promptAsync({ useProxy });

    // Stop loading
    setLoading(false)
  }

  // This is called post-render
  React.useEffect(() => {
    if (response?.type === 'success') {
      const { code } = response.params;
      // TODO: instead of setting the code, get the user's name and icon
      setUserCode(code);
      console.log(response)
    }
  }, [response]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button icon={'account'} loading={loading} disabled={loading} mode='contained' onPress={logIn}>Login</Button>
    </View>
  );
};

export default Login

Please provide the following:

  1. SDK Version: 38.0.8
  2. Platforms(Android/iOS/web/all): all
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.