IntroducingThe NextAuth Quickstart!

NextAuth is a fantastic library for handling authentication for Next.js. HazelBase is designed to work with NextAuth as an Authentication Provider. Most often to power "Sign in with Email".

Why use HazelBase?

Being able to offer OAuth authentication with options such as "Sign in with Google" is fantastic. However over 30% of users prefer using a "Sign in with Email" flow.

Enabling signing in with email for NextAuth has additional requirements over OAuth providers; such as now requiring a direct connection to a database and an email server.

Plus users now have to re-enter their email address (sometimes even incorrectly!).

HazelBase takes care of this!

You can add HazelBase like any other identity provider. No database or email server connections required!

When you add a "Sign in with Email" button that is powered by HazelBase, the user is presented with an experience that they are familiar with. HazelBase manages and optimizes this experience for you.

Plus when a user has gone through a HazelBase sign up flow anywhere else, they can sign into your app with 1-click. This is by far the most seamless "Sign in with Email" flow possible.

So far we've seen a sign up increase of 51% for apps that use HazelBase!

How to Get Started

  1. Go to your HazelBase dashboard after signing in here.
  2. Use the OAuth wizard to create an Organization and OAuth client
    • Enter whatever name you like for the organization and OAuth app
    • For your callback URL, enter
      https://YOUR-DOMAIN-HERE.com/api/auth/callback/hazelbase
    • Click create, and write down the OAuth client ID. (You can always see the OAuth client ID again on the organization page from the sidebar)
  3. Go to your NextAuth app (Can easily bootstrap a new one using the Official NextAuth Example)
  4. Add the HazelBase authentication provider by adding the snippet below to
    pages/api/auth/[...nextauth].js
    under the
    providers
    array.
    Be sure to change the clientID to your client ID from step 2!
  5. That's it! You now have a Next.js / NextAuth app with HazelBase for authentication that you can develop as you like!

Snippet for NextAuth Provider

{
  id: 'hazelbase',
  name: 'Email',
  type: 'oauth',
  version: '2.0',
  authorizationUrl: 'https://api.hazelbase.com/oidc/auth?response_type=code',
  requestTokenUrl: 'https://api.hazelbase.com/oidc/auth',
  accessTokenUrl: 'https://api.hazelbase.com/oidc/token',
  wellKnown: 'https://api.hazelbase.com/oidc/.well-known/openid-configuration',
  profileUrl: 'https://api.hazelbase.com/oidc/me',
  scope: 'openid profile name email',
  protection: 'pkce',
  clientId: '--------PUT-YOUR-ID-HERE--------',
  params: {
    grant_type: 'authorization_code',
  },
  profile(profile) {
    return {
      id: profile.sub,
      ...profile,
    };
  },
}

Need Help?

Contact us at hey@key.dev. You can also always contact Adrian on Twitter at @AdrianArtiles.

Can't wait to see what you build!