Frequently Asked Questions

Product Information & Technical Details

What is Hygraph and how does it work with Next.js authentication?

Hygraph is a GraphQL-native headless CMS that enables developers to manage and deliver content efficiently. When integrating with Next.js authentication using NextAuth.js, Hygraph acts as the database for user credentials, allowing you to store and verify user email and encrypted passwords. The integration involves configuring a NextUser model in Hygraph, setting up dependencies like next-auth and bcrypt, and using GraphQL queries and mutations to manage user data. For a step-by-step guide, see this tutorial.

How do I set up authentication in Next.js using NextAuth.js and Hygraph?

To set up authentication in Next.js with NextAuth.js and Hygraph, you need to:

  1. Create a NextUser model in Hygraph with fields for email (unique, required) and password (required, API only).
  2. Install dependencies: next-auth, bcrypt, graphql-request, and graphql.
  3. Configure environment variables for your Hygraph endpoint and token.
  4. Set up the CredentialsProvider in [...nextauth].js to handle email/password authentication.
  5. Use GraphQL queries to fetch users and mutations to create new users, hashing passwords with bcrypt.
  6. Update your Next.js app to use SessionProvider and display user state.
For full details, refer to the official tutorial.

Does Hygraph provide a GraphQL API for authentication and content management?

Yes, Hygraph offers a powerful GraphQL API that allows you to fetch and manage content, including user authentication data. You can use the API to query user information and perform mutations for creating or updating users. For more details, see the Hygraph API Reference.

Where can I find technical documentation for integrating Hygraph with Next.js and NextAuth.js?

Comprehensive technical documentation for Hygraph, including integration guides for Next.js and NextAuth.js, is available at Hygraph Documentation. The documentation covers API usage, authentication flows, and best practices for building and deploying projects.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with popular platforms such as Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also provides enterprise-grade security, audit logs, SSO, and sandbox environments. For a full list of features, visit Hygraph Features.

What integrations does Hygraph support?

Hygraph supports a wide range of integrations, including hosting and deployment (Netlify, Vercel), eCommerce (Shopify, BigCommerce, commercetools), localization (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. For details, see Hygraph Integrations.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to ensure enterprise-grade security and regulatory compliance. For more details, visit Hygraph Security Features.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details and feature breakdowns, visit the Hygraph Pricing Page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale globally, improve development velocity, or re-platform from traditional solutions. Source: ICPVersion2_Hailey.pdf

What business impact can customers expect from using Hygraph?

Customers can expect significant business impacts such as time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market for digital products, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source: ICPVersion2_Hailey.pdf

What industries are represented in Hygraph's case studies?

Hygraph's case studies span industries such as food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. For more, see Hygraph Case Studies.

Can you share specific customer success stories using Hygraph?

Yes. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More success stories are available at Hygraph Customer Stories.

Pain Points & Solutions

What problems does Hygraph solve for its customers?

Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). For more details, see Hygraph Product Page.

How does Hygraph solve pain points for different personas?

For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it provides an intuitive interface for independent content updates. For business stakeholders, Hygraph lowers operational costs, accelerates speed-to-market, and supports scalability. Solutions are tailored to each persona's needs. Source: Hygraph Product Page.

Performance & Implementation

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which improves user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. For more details, visit this page.

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Customers can get started quickly by signing up for a free account and using resources like documentation and onboarding guides. Learn more at Hygraph Documentation.

Support & Training

What customer support and training does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, webinars, and a community Slack channel. For more information, visit Hygraph Contact Page.

Customer Proof & Case Studies

Who are some of Hygraph's customers?

Hygraph is trusted by leading brands such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details and case studies, visit Hygraph Case Studies.

Getting Started

How easy is it to get started with Hygraph?

Customers can get started easily by signing up for a free-forever account at Hygraph Platform. Resources such as documentation, video tutorials, and onboarding guides are available to help users navigate the platform effectively. Source: Hygraph Documentation.

Webinar Event: How to Avoid Personalization Tech Traps

Next.js Authentication with NextAuth.js and Hygraph

Learn how to integrate NextAuth.js with Hygraph to authenticate your Next.js users.
Jamie Barton

Written by Jamie 

Oct 19, 2021
NextAuth.js with hygraph

The popular React framework that has dominated developers node_modules folders over the last few years we all know of is Next.js — and rightly so, with its stellar developer experience, blazing fast compiler, and tons more.

One topic that often comes up in discussions when evaluating if Next.js is right for you is whether or not it can handle authentication. For a long time there wasn't any "documentation" around this, which led to many developers building and pitching their own solutions to handle Next.js Auth.

Let me introduce to you NextAuth.js — Authentication for Next.js. It's completely open source, and you are in control of your data. It boasts itself on being secure, flexible, and easy to use.

Note: You'll need a Hygraph account, and Next.js application if you're following along. You'll also need your Hygraph endpoint, and a Permanent Auth Token with permissions to query and mutate the NextUser model.

#1. Configure Hygraph

I'll make the assumption you already have a Hygraph account, and project. If not, you know what to do.

We'll opt to store user data from NextAuth.js, including user email and encrypted passwords.

To keep things simple for the purposes of this tutorial, create the model NextUser with two fields:

  • Email / Single line text / Required / Unique
  • Password / Single line text / Required / API Only

NextUser Model Schema

Make sure you set the Password field to API only within the advanced visibility settings.

#2. Setup dependencies

We'll be using the following dependencies to configure, and work with NextAuth.js:

  • next-auth
  • bcrypt
  • graphql-request
  • graphql
npm install next-auth@beta bcrypt graphql-request graphql

Next, create the file .env and add your Hygraph endpoint and token:

HYGRAPH_ENDPOINT=
HYGRAPH_TOKEN=

#3. Configure NextAuth.js

Within your Next.js project, add the file [...nextauth].js in pages/api/auth and invoke the CredentialsProvider.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export default NextAuth({
providers: [
CredentialsProvider({
name: "Email and Password",
credentials: {
email: {
label: "Email",
type: "email",
placeholder: "jamie@hygraph.com"
},
password: {
label: "Password",
type: "password",
placeholder: "Password"
},
},
},
]
})

Now, this code alone won't do anything other than give you an email and password form at the route /api/auth/signin.

NextAuth Credentials Form

Next you'll want to create (or update if it exists) pages/_app.[js,ts] to wrap your application with `SessionProvider, passing it the session from the component props:

import { SessionProvider } from 'next-auth/react';
export default function MyApp({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
}

#4. Integrate Hygraph

We'll be working within pages/api/auth/[...nextauth].js to handle checking Hygraph if a user exists, and if they don't, create one.

Add the following imports:

import { compare, hash } from "bcrypt";
import { GraphQLClient } from "graphql-request";

Let's now create a GraphQL client for Hygraph with our endpoint and Permanent Auth Token.

const client = new GraphQLClient(process.env.HYGRAPH_ENDPOINT, {
headers: {
Authorization: `Bearer ${process.env.HYGRAPH_TOKEN}`,
},
});

Now, we'll add a query to get a user by email and a mutation to create a user with an email and password:

const GetUserByEmail = gql`
query GetUserByEmail($email: String!) {
user: nextUser(where: { email: $email }, stage: DRAFT) {
id
password
}
}
`;
const CreateNextUserByEmail = gql`
mutation CreateNextUserByEmail($email: String!, $password: String!) {
newUser: createNextUser(data: { email: $email, password: $password }) {
id
}
}
`;

Don't worry, we won't be saving passwords as plain text, but instead using the bcrypt library we installed to hash, and verify.

Inside of the CredentialsProvider config below credentials, add the following authorize function:

authorize: async ({ email, password }) => {
const { user } = await client.request(GetUserByEmail, {
email,
});
if (!user) {
const { newUser } = await client.request(
CreateNextUserByEmail,
{
email,
password: await hash(password, 12),
}
);
return {
id: newUser.id,
username: email,
email,
};
}
const isValid = await compare(password, user.password);
if (!isValid) {
throw new Error("Wrong credentials. Try again.");
}
return {
id: user.id,
username: email,
email,
};
},

#5. Current user UI

Now, let's finish by updating creating an pages/index.js to show our current user state and links to sign in/out based on our session state.

import { useSession, signIn, signOut } from "next-auth/react";
function AuthLinks() {
const { data: session, status } = useSession();
const loading = status === "loading";
if (loading) return null;
return (
<>
{session ? (
<p>
<span>Signed in as {session?.user?.email}</span>
<button onClick={signOut}>Sign out</button>
</p>
) : (
<>
<button onClick={signIn}>Sign in</button>
</>
)}
</>
);
}
export default function IndexPage() {
return <AuthLinks />;
}

#6. Demo

You should by now have something that looks like this:

CleanShot 2021-10-15 at 09.08.51.gif

There you have it! You've now used NextAuth.js and Hygraph to authenticate your Next.js users.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.