Openfort embedded wallet with third-party Auth

This is a template for integrating Openfort into a NextJS project using Firebase as for authentication. Check out the deployed app here!

This demo uses NextJS's Pages Router.

How to run locally

1. Clone and configure the sample

Copy the .env.local.example file into a file named .env.local in the folder of the server you want to use. For example:

You will need an Openfort account in order to run the demo. Once you set up your account, go to the Openfort developer dashboard to find your API keys.

To enable your embedded signer, you can follow the instructions here.

# In your terminal, create .env.local from .env.example
cp .env.example .env.local

NEXTAUTH_SHIELD_ENCRYPTION_SHARE=
NEXTAUTH_SHIELD_SECRET_KEY=

NEXT_PUBLIC_SHIELD_API_KEY=
NEXT_PUBLIC_OPENFORT_PUBLIC_KEY=

2. Create a Policy

If you want to sponsor transactions, you can add policies to your .env.local file. You can create gas sponsorship policies from your Openfort dashboard.

NEXT_PUBLIC_POLICY_ID=

3. Get your Firebase Config

First go to Firebase config: Console > Project settings > General adn create an app for your prohject if you still don't have one.

Copy the FirebaseConfig and continue

Then go to Firebase-Admin config: Console > Project settings > Service accounts and generate a "New Private Key"

Update .env

4. Set up Firebase Auth in Openfort

To set up Firebase to authenticate players with Openfort, visit your dashboard provider settings. You can follow a guide on how to set up Firebase Auth in Openfort here.

5. Follow the server instructions on how to run

Install & Run:

npm install
npm run dev

In your project directory, run npm run dev. You can now visit http://localhost:3000 to see your app and login with Openfort!

Get support

If you have questions, comments, or need help with code, we're here to help:

• on Discord
• on Twitter at @openfortxyz
• by email