[docs] Add info on using AuthSession with Firebase

1 possible answer(s) on “[docs] Add info on using AuthSession with Firebase”

1. Concerns with the following approach:

   • This should work with an idToken, just not sure what that is yet
   • Seems like we should utilize the server endpoint from Firebase as well

   ---

   Just an update, I recently tested Firebase Google auth with expo-auth-session, I got it working like this:

   This applies to Expo client via auth.expo proxy and Expo web

   • In your project install expo install firebase expo-auth-session, ensure you are using expo-auth-session@^1.2.1 or greater.
   • Create a new Firebase project
   • Enable Google auth
     • Open “Web SDK configuration”
     • Save “Web client ID” you’ll need it later
     • Press Save
   • In your project use the Example code from Expo Google Auth guide
     • Use responseType: ResponseType.Token
     • Disable PKCE with usePKCE: false which is required for implicit auth

   My completed code looked like:

   import {
     makeRedirectUri,
     ResponseType,
     useAuthRequest,
     useAutoDiscovery,
   } from "expo-auth-session";
   import * as WebBrowser from "expo-web-browser";
   import firebase from "firebase";
   import React from "react";
   import { Button, Platform, StyleSheet, View } from "react-native";
   
   WebBrowser.maybeCompleteAuthSession();
   
   if (!firebase.apps.length) {
     // Your web app's Firebase configuration
     const firebaseConfig = {
       /* Config */
     };
     // Initialize Firebase
     firebase.initializeApp(firebaseConfig);
   }
   
   export default function App() {
     const useProxy = Platform.select({ web: false, default: true });
     const discovery = useAutoDiscovery("https://accounts.google.com");
     // Request
     const [request, response, promptAsync] = useAuthRequest(
       {
         clientId: Platform.select({
           web:
             "Your-Web-Client-ID.apps.googleusercontent.com",
          default: "you do not have this yet"
         }),
         redirectUri: makeRedirectUri({
           // For usage in bare and standalone
           native:
             "you do not have this yet",
           useProxy,
         }),
         usePKCE: false,
         responseType: ResponseType.Token,
         scopes: ["openid", "profile"],
       },
       discovery
     );
   
     React.useEffect(() => {
       firebase.auth().onAuthStateChanged((user) => {
         console.log("USER: ", user);
       });
     }, []);
   
     React.useEffect(() => {
       if (response && response.type === "success") {
         const credential = new firebase.auth.GoogleAuthProvider.credential(
           null, // Pass the access_token as the second property
           response.params.access_token
         );
         firebase.auth().signInWithCredential(credential);
       }
     }, [response]);
   
     return (
       <View style={styles.container}>
         <Button
           disabled={!request}
           onPress={() => promptAsync({ useProxy })}
           title="Login"
         />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: "#fff",
       alignItems: "center",
       justifyContent: "center",
     },
   });

   Pressing the button (on web first) should open the popup and give you an error:

   Authorization Error
   Error 400: redirect_uri_mismatch
   The redirect URI in the request, https://localhost:19006, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/YOUR_ID.apps.googleusercontent.com?project=YOUR_PROJECT
   

   

   • Save this link somewhere, you’ll need it to add URLs in the future.
   • Open the link
   • Under “URIs” add your hosts
     • Web dev: https://localhost:19006
     • Expo Client Proxy: https://auth.expo.io
   • Under “Authorized redirect URIs”
     • Web dev: https://localhost:19006
       • this is assuming you want to invoke WebBrowser.maybeCompleteAuthSession(); from the root URL of your app.
     • Expo Client Proxy: https://auth.expo.io/@yourname/your-app

   

   Return to your app, pressing “Login” should now work as expected.