NextAuth

Authentication for Next.js

Update June 2020

The next generation version NextAuth.js was released in June 2020!

It is built for Next.js and Serverless, with simple configuration, out of the box support for a large number of authentication services and supports MySQL, Postgres, MSSQL and MongoDB (and and without a database!).

Find detailed documentation and a working example at next-auth.js.org

Original Article

This week I released NextAuth, a module specifically designed for Next.js and React, that supports email sign in and oAuth.

It comes with example configuration for Facebook, Google+, Twitter and email sign in and uses Mongo DB to store accounts, but it is easy to extend to work with other providers and other databases.

https://nextjs-starter.now.sh

It has a client for React called NextAuthClient which is an isomorphic (client and server side) library that populates session state in pages.

Populating session state in a React with NextAuth

Features

The NextAuth library uses Express and Passport to provide support for signing in with email and with services like Facebook, Google and Twitter.

NextAuth adds Cross Site Request Forgery (CSRF) tokens and HTTP Only cookies, supports univeral rendering and does not require client side JavaScript.

It adds session support without using client side accessible session tokens, providing protection against Cross Site Scripting (XSS) and session hijacking, while leveraging localStorage where available to cache non-critical session state for optimal performance in Single Page Apps.

Example

NextAuth includes its own minimal example project but the NextJS Starter Project provides a more complete example.

The code for NextAuth is based on code originally used in the NextJS Starter Project, which now uses NextAuth and NextAuthClient.

Goals

While the documentation is comprehensive and there are multiple examples of how to use it, it’s still far more cumbersome to add authentication to sites that it needs to be.

In future, I’d like to simplify the interface further so it can be configured just by setting Client ID & Client Secret values for each oAuth provider and a database URI, while still allowing for more advanced custom configuration.

Next.js

If you haven’t seen Next.js yet and you use React you should check it out.

Written by

Software for news and media and civic tech. Cat herder. Director at Glitch Digital.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store