Docs

Integrate Firebase Auth

Learn how to obtain a JSON Web Token (JWT) from Firebase using Firebase's email provider and integrate it with In-App Wallet.

Prerequisites

  • Firebase project
  • React App
  • Create a React Native App

    Create a react native app with the tool of your choice and install the required packages:

    npm i thirdweb
    • Note that we assume this is a simple app with a single screen App.tsx.
  • Set up your Firebase project

    • Navigate to Wallets > In-App Wallets

    • To use in-app wallets, choose an existing API key or create a new one. Learn more about API keys.

    • In the configuration view, enable Custom JSON Web Token.

    • Set the JWKS URI from here

    • Set the AUD Value as the Firebase projectId. (Example, custom-auth-53169)

    • Select Save changes.

  • Add the Firebase auth dependencies

    Firebase auth depends on the firebase/app and firebase/auth packages.

    To add the packages, run the following command in the project:

    yarn add @react-native-firebase/app @react-native-firebase/auth
  • Implement Email Authentication

    Add the code snippet below to handle email authentication with Firebase. Note that you need to add UI to allow users to input the email and password fields in your App.tsx file:

    To handle email authentication with Firebase

    import auth from "@react-native-firebase/auth";
    async function signInWithEmail(email, password) {
    try {
    await auth().createUserWithEmailAndPassword(email, password);
    } catch (error) {
    console.error(error);
    }
    }
    return (
    <Button
    title="Sign In"
    onPress={() => signInWithEmail(email, password)}
    />
    );

    Note: You may add a UI to allow users to input email and password fields.

  • Obtain the JWT

    Once the user is authenticated, you can listen to AuthStateChanged events to get the signed in user. You can then get the JWT from the User object:

    To receive the signed in user, listen to the AuthStateChanged event. You can add this code in your App.tsx file as well:

    const [user, setUser] = useState();
    function onAuthStateChanged(user) {
    setUser(user);
    }
    useEffect(() => {
    // Listens to AuthStateChanged events
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
    }, [onAuthStateChanged]);
    async function getFirebaseJWT() {
    if (user) {
    return await user.getIdToken();
    } else {
    throw new Error("User is not authenticated");
    }
    }
  • Pass the JWT to InAppWallet

    Pass the JWT to the In-App Wallet config in your App.tsx file:

    import { inAppWallet } from "thirdweb/wallets";
    import { useConnect } from "thirdweb/react";
    const { connect } = useConnect();
    const connectInApp = async (jwt: string) => {
    await connect(() => {
    const wallet = inAppWallet();
    wallet.connect({
    client,
    strategy: "jwt",
    jwt: await getFirebaseJWT(),
    encryptionKey: "your-encryption-key",
    });
    return wallet;
    });
    };

    You can set your encryptionKey in either a secret env variable or ask the user to enter a password for it.

    ** Do not hardcode the encryptionKey in your code. **

    After the connectInApp function returns, the ThirdwebProvider will have connected a wallet thereby granting access to all hooks and functionalities.

  • Access the connected account

    To access the connected account, use the useActiveAccount() hook:

    import { useActiveAccount } from "thirdweb/react";
    const activeWallet = useActiveAccount();