Back

NextAuth

NextAuth

nextauth_og.png

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


_10
git clone https://github.com/openfort-xyz/samples
_10
cd 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:


_10
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.


_10
NEXT_PUBLIC_OPENFORT_PUBLIC_KEY=<replace-with-your-publishable-key>
_10
NEXTAUTH_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

  1. Review and update options in pages/api/auth/[...nextauth].js as needed.

  2. 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

  1. 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:


_10
npm install
_10
npm run dev
_10
# or
_10
yarn
_10
yarn dev

Details

CategoryAuth
DocumentationLearn

Get started with NextAuth and Openfort.