[docs] Add info on using AuthSession with Firebase

It’s not entirely clear how to use existing auth methods with Firebase. We should document how to do it!

From my outdated Github + Firebase auth guide:

import firebase from 'firebase';

const access_token = /* auth result */

const credential = firebase.auth.GithubAuthProvider.credential(access_token);

const user = await firebase.auth().signInAndRetrieveDataWithCredential(credential);

Related: https://twitter.com/childishludino/status/1258106926333857794?s=20

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
    

    Screen Shot 2020-05-06 at 10 22 35 PM

    • 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

    Screen Shot 2020-05-06 at 10 26 58 PM

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