Back
NextAuth
Overview
Open Source Authentication for Next.js.
This demo authenticates a player using NextAuth. It will create a custodial account for the player and collect an asset with it. Then, it transfers the account ownership from a Openfort custodial to a self-custodial account.
Following the sample integration with NextAuth.
1. Clone and configure the sample
_10git clone https://github.com/openfort-xyz/samples_10cd ssv-social-nextjs
Copy the .env.local.example file into a file named .env.local in the folder of the server you want to use. For example:
_10cp .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.
_10NEXT_PUBLIC_OPENFORT_PUBLIC_KEY=<replace-with-your-publishable-key>_10NEXTAUTH_OPENFORT_SECRET_KEY=<replace-with-your-secret-key>
The other environment variables are configurable:
NEXTAUTH_SECRET
is a secret used for signing cookies. It can be any random string.
NEXTAUTH_URL
is the URL of the server. By default, it is set to http://localhost:3000
and does not need to be modified unless you change the port number or host name.
Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc).
2. Configure Authentication Providers
-
Review and update options in
pages/api/auth/[...nextauth].js
as needed. -
When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of
{server}/api/auth/callback/{provider}
.
e.g. For Google OAuth you would use: http://localhost:3000/api/auth/callback/google
A list of configured providers and their callback URLs is available from the endpoint /api/auth/providers
. You can find more information at https://next-auth.js.org/configuration/providers/oauth
- You can also choose to specify an SMTP server for passwordless sign in via email.
2.1. Database
A database is needed to persist user accounts and to support email sign in. However, you can still use NextAuth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, JSON Web Tokens will be enabled by default.
You can skip configuring a database and come back to it later if you want.
For more information about setting up a database, please check out the following links:
3. Create a Player, Policy and 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 your .env
.
NEXTAUTH_OPENFORT_PLAYER
is the ID of a Player for your player.
NEXTAUTH_OPENFORT_CONTRACT
is the ID of a Contract for your contract. A contract has a chainId.
If you need a test contract address, use 0x38090d1636069c0ff1Af6bc1737Fb996B7f63AC0 (NFT contract deployed in 80001 Mumbai).
NEXTAUTH_OPENFORT_POLICY
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.
4. Follow the server instructions on how to run
Install & Run:
_10npm install_10npm run dev_10# or_10yarn_10yarn dev