[docs] Add info on using AuthSession with Firebase

[EvanBacon]

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

[EvanBacon]

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.

[EvanBacon]

Facebook

Cite https://firebase.google.com/docs/auth/web/facebook-login#expandable-2-label

import firebase from 'firebase';

// Later in functional component
const [, result, prompt] = useAuthRequest();

// Later in effect...
const credential = firebase.auth.FacebookAuthProvider.credential(result.params.access_token);
// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)

Github

Cite https://firebase.google.com/docs/auth/web/github-auth#expandable-1-label

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

FitBit

and all second-class firebase auth providers.

Cite: https://firebase.google.com/docs/auth/web/custom-auth#authenticate-with-firebase

firebase.auth().signInWithCustomToken(access_token).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

[sean-m-oleary]

Hi @EvanBacon does the useProxy work for you? I and several others have found it not working in the latest version. Several of us have posted issues in the forums with no responses yet.

[EvanBacon]

Closing as this is more-or-less implemented