Openfort Embedded Signer - Browser

This sample shows you how to use Openfort's Embedded Signer.

It supports login with all regular auth providers and uses Firebase as external authentication platform.

Documentation for embedded signer.

Features

• 🚀 NextJS, FirebaseAuth & Tailwindcss with Typescript
• 📝 Written with TypeScript
• 🔒 Client-side authentication sample with Credentials/Google Signin
• 🔒 Server-side authentication with cookies sample
• 🦚 with Tailwindcss layout

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:

cp .env.local.example .env.local

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.

NEXTAUTH_SHIELD_ENCRYPTION_SHARE=
NEXTAUTH_SHIELD_SECRET_KEY=
NEXT_PUBLIC_SHIELD_API_KEY=
NEXT_PUBLIC_OPENFORT_PUBLIC_KEY=<replace-with-your-publishable-key>
NEXTAUTH_OPENFORT_SECRET_KEY=<replace-with-your-secret-key>

2. Create a Policy and add a Contract

You can create Policies and add Contracts in the Dashboard or with the API. This sample requires a Policy and a Contract to run. Once you've created them, and add its ID to CollectButton.

contract_id is the ID of a Contract for your contract. A contract has a chainId. If you need a test contract address, use 0x2522F4Fc9aF2E1954a3D13f7a5B2683A00a4543A (NFT contract deployed in 80002 Amoy).

policy_id is the ID of a Policy for your contract. A policy has a contract and chainId. For this demo to work, the policy must have both the contract and the register sessions as rules.

NEXT_PUBLIC_CHAIN_ID=
NEXT_PUBLIC_CONTRACT_ID=
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
# or
yarn
yarn dev

Get support

If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.

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

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