/embedded-wallet-firebase-auth-sample-nextjs

Embedded Wallets with Firebase Auth

Primary LanguageTypeScript

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_OPENFORT_SECRET_KEY=
NEXTAUTH_SHIELD_SECRET_KEY=
NEXTAUTH_SHIELD_ENCRYPTION_SHARE=

NEXT_PUBLIC_SHIELD_API_KEY=
NEXT_PUBLIC_OPENFORT_PUBLIC_KEY=

2. Create a Policy

Required

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.

For this sample, create a policy in Polygon Amoy with a catch all contracts rule. Learn more

NEXT_PUBLIC_POLICY_ID=

3. Get your Firebase Config

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

image

Update .env with those values (e.g. NEXT_PUBLIC_apiKey would be apiKey).

image

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

image

Update .env firebase-admin values with the json given.

Enable auth Enable email provider in your firebase project.

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.

firebase auth

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 found a bug or want to suggest a new feature, use case or sample; please file an issue.

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