smarques/keystone-nextjs-auth

A package that add social auth to Keystone-6 (https://keystonejs.com/) by using next-authjs (https://next-auth.js.org/)

Keystone next auth

This package enables the addition of social auth to keystone-6.

Contents

• About
• Adding to your project
• Configuration
• Contributing

About

This uses NextAuth.js (https://next-auth.js.org/) project to add social auth to Keystone-6 (https://keystonejs.com/). Primary testing has been done with Auth0, happy for others to test other providers/give feedback or send through a PR.

Adding to your project

Add package by yarn add @opensaas/keystone-nextjs-auth then add the following to your keystone.ts:

Add import...

import { createAuth } from '@opensaas/keystone-nextjs-auth';
import Auth0 from '@opensaas/keystone-nextjs-auth/providers/auth0';

Add you Auth configuration including providers for Provider configuration see https://next-auth.js.org/providers/. For Provider configuration replace next-auth/providers/ with @opensaas/keystone-nextjs-auth/providers/

let sessionSecret = process.env.SESSION_SECRET;

if (!sessionSecret) {
  if (process.env.NODE_ENV === 'production') {
    throw new Error(
      'The SESSION_SECRET environment variable must be set in production'
    );
  } else {
    sessionSecret = '-- DEV COOKIE SECRET; CHANGE ME --';
  }
}

const auth = createAuth({
  listKey: 'User',
  identityField: 'subjectId',
  sessionData: `id name email`,
  autoCreate: true,
  resolver: async ({user, profile, account}) => {
    const username = user.name as string;
    const email = user.email as string;
    return { email, username };
  },
  keystonePath: '/admin',
  sessionSecret,
  providers: [
    Auth0({
      clientId: process.env.AUTH0_CLIENT_ID || 'Auth0ClientID',
      clientSecret: process.env.AUTH0_CLIENT_SECRET || 'Auth0ClientSecret',
      domain: process.env.AUTH0_DOMAIN || 'opensaas.au.auth0.com',
    }),
]
});

Wrap your keystone config in auth.withAuth.

export default auth.withAuth(
  config({
    server: {},
    db: {},
    ui: {},
    lists,
    ...
  });

Configuration

Provider configuration see https://next-auth.js.org/configuration/providers. For Keystone-6 Configuration see https://keystonejs.com/ for example see the example backend

• listKey - the list for authentication (generally 'User'). Make sure any required fields are set using the *Map fields, see note below.
• identityField - The field that stores the identity/subjectId in keystone (generally 'subjectId'). You will need to add this field to your list schema specified by listKey. An example can be found here.
• sessionData - Data to be stored in the session ( something like 'id name email'),
• autoCreate - boolean to autocreate a user when they log in
• userMap: key:value pairs that define what is copied from the User object returned from NextAuth in the SignIn callback (https://next-auth.js.org/configuration/callbacks#sign-in-callback) Left side is Keystone side, right is what comes from NextAuth eg: { subjectId: 'id', name: 'name' }
• accountMap - As Above but for the Account object
• profileMap - As Above but for the Profile object
• keystonePath - the path you want to access keystone from your frontend app (if required).

Note: The Keystone create-keystone-app CLI app (generally run with yarn create keystone-app/npm init keystone-app) will set a required password field on the User list. If you've used this to set up your project you will need to modify your list schema to set the field as not required, or remove it entirely if you don't plan to use the default Keystone auth system at all.

Contributing

If you want to run this package locally After cloning run yarn install and either:

• yarn dev to run both the frontend and backend or
• yarn dev:backend for just the backend

The Demo App is configured in next.config.js to proxy /api/auth to the the host setup using the environment variable BACKEND_BASE_URL in development set export BACKEND_BASE_URL=http://localhost:3000 you will also need to set your NEXTAUTH_URL environment variable see https://next-auth.js.org/configuration/options for more information.