/example-nextjs-faunadb-todomvc

Primary LanguageJavaScript

FaunaDB with Magic Authentication (featuring Next.js)

Follow along with the official tutorial to build your own FaunaDB-powered TodoMVC app with Magic passwordless login!

👉 See the live demo

Deploy your own

Deploy the example with Vercel:

Deploy with Vercel

Configuration

Login to the Magic Dashboard to get API keys for your application.

Magic Dashboard

Next, you'll create a FaunaDB database for your application here. Once you've configured your database, you'll need to prepare it for the schema expected by this example code. Execute the step-by-step queries found in init.fql from either FaunaDB's CLI or FaunaDB's Dashboard shell interface. Finally, you'll need to acquire an admin access key for your database (located in the "Security" page of FaunaDB's Dashboard sidebar).

Next, create a 32 random string as your encryption secret. You can create one in the terminal with openssl running openssl rand -base64 24

Next, copy the .env.local.example file in this directory to .env.local (this file is intentionally ignored by Git):

cp .env.local.example .env.local

Then, set each variable in .env.local:

  • NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY should look like pk_test_abc or pk_live_ABC
  • MAGIC_SECRET_KEY should look like sk_test_ABC or sk_live_ABC
  • FAUNADB_SECRET_KEY should look like fnRB4Ld...
  • ENCRYPTION_SECRET should look like a random string of 32 chars

To complete your deployment on Vercel, you'll need to configure some environment variables with the Environment Variables UI or using the Vercel CLI (Documentation).

Install Vercel CLI; log in to your account from the CLI; link your project; then run the following command to add the NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY, MAGIC_SECRET_KEY, FAUNADB_SECRET_KEY, and ENCRYPTION_SECRET environment variables.

vercel env add