Integrate Firebase Auth

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 a React Native Firebase project by following the prerequisites in the React Native Firebase documentation. 2. Navigate to the Firebase Console and create a new project. 3. Navigate to Authentication > Sign-in method, to enable the Email/Password provider

• 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.

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

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.

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 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.

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

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