Password-less authentication in NextJS application with WebAuthn and NextAuth

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • Next.js

    The React Framework

  • // This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb import { MongoClient } from 'mongodb'; const uri = process.env.MONGODB_URI; const options = { //useUnifiedTopology: true, //useNewUrlParser: true, }; let client: MongoClient; let clientPromise: Promise; if (!uri) { throw new Error('Please add your Mongo URI to .env.local'); } if (process.env.NODE_ENV === 'development') { // In development mode, use a global variable so that the value // is preserved across module reloads caused by HMR (Hot Module Replacement). if (!(global as any)._mongoClientPromise) { client = new MongoClient(uri, options); (global as any)._mongoClientPromise = client.connect(); } clientPromise = (global as any)._mongoClientPromise; } else { // In production mode, it's best to not use a global variable. client = new MongoClient(uri, options); clientPromise = client.connect(); } // Export a module-scoped MongoClient promise. By doing this in a // separate module, the client can be shared across functions. export default clientPromise; export async function getDb(dbName: string) { const client = await clientPromise; return client.db(dbName); }

  • next-webauthn-demo

  • The complete source code can be found on GitHub.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • First, create a NextJS application. I'm using Typescript, but it is not required. You can use Javascript with minor changes. I'm also using yarn to manage dependencies, but you can use npm if you prefer. I will not cover npm syntax though.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts