Integrate Firebase Auth
Learn how to obtain a JSON Web Token (JWT) from Firebase using Firebase’s email provider and integrate it with Embedded Wallet.
- Firebase project
- React Native CLI installed
Create a React Native App
To skip over initialization steps, we will use the React Native TypeScript starter template. You may also integrate this functionality into an existing application by installing the React Native SDK.
Create the template from the CLI:
This command will create a React Native app with the
@thirdweb-dev/react-nativeSDK already installed.
Note that we assume this is a simple app with a single screen
Set up your Firebase project
- 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 > Embedded Wallets
To use embedded 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,
Select Save changes.
Add the Firebase auth dependencies
Firebase auth depends on the
To add the packages, run the following command in the project:
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
To handle email authentication with Firebase
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
AuthStateChangedevents 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
AuthStateChangedevent. You can add this code in your App.tsx file as well:
Pass the JWT to EmbeddedWallet
Pass the JWT to the Embedded Wallet config in your
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 connectEmbedded function returns, the ThirdwebProvider will have connected a wallet thereby granting access to all hooks and functionalities.
Access the connected wallet
To access the connected wallet, use the