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".
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!).
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!
https://YOUR-DOMAIN-HERE.com/api/auth/callback/hazelbase
pages/api/auth/[...nextauth].jsunder the
providersarray.
{ 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, }; }, }
Contact us at hey@key.dev. You can also always contact Adrian on Twitter at @AdrianArtiles.