@nixxie-cms/auth 1.0.1

package/src/pages/InitPage.tsx

@@ -0,0 +1,292 @@
+import NextHead from 'next/head'
+
+import { css } from '@keystar/ui/style'
+
+import { gql, type TypedDocumentNode, useMutation } from '@nixxie-cms/core/admin-ui/apollo'
+import { GraphQLErrorNotice } from '@nixxie-cms/core/admin-ui/components'
+import { useList } from '@nixxie-cms/core/admin-ui/context'
+import { useRouter } from '@nixxie-cms/core/admin-ui/router'
+import { Fields, useBuildItem } from '@nixxie-cms/core/admin-ui/utils'
+
+import { useRedirect } from '../lib/useFromRedirect'
+import type { AuthGqlNames } from '../types'
+
+export default (props: Parameters<typeof InitPage>[0]) => () => <InitPage {...props} />
+
+function InitPage({
+  authGqlNames,
+  listKey,
+  fieldPaths,
+}: {
+  authGqlNames: AuthGqlNames
+  listKey: string
+  fieldPaths: string[]
+}) {
+  const router = useRouter()
+  const redirect = useRedirect()
+  const list = useList(listKey)
+
+  const builder = useBuildItem(list, fieldPaths)
+  const {
+    createInitialItem,
+    CreateInitialInput,
+    ItemAuthenticationWithPasswordSuccess: successTypename,
+  } = authGqlNames
+  const [tryCreateItem, { loading, error, data }] = useMutation(
+    gql`
+    mutation NxAuthCreateFirstItem ($data: ${CreateInitialInput}!) {
+      authenticate: ${createInitialItem}(data: $data) {
+        ... on ${successTypename} {
+          item {
+            id
+          }
+        }
+      }
+    }` as TypedDocumentNode<
+      { authenticate: { __typename: string; item: { id: string } } },
+      { data: Record<string, unknown> }
+    >
+  )
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    if (e.target !== e.currentTarget) return
+    e.preventDefault()
+    const builtItem = await builder.build()
+    if (!builtItem) return
+
+    try {
+      await tryCreateItem({
+        variables: {
+          data: builtItem,
+        },
+      })
+    } catch (e) {
+      console.error(e)
+      return
+    }
+
+    router.push(redirect)
+  }
+
+  const pending = loading || data?.authenticate?.__typename === successTypename
+
+  return (
+    <>
+      <NextHead>
+        <title key="title">Welcome to Nixxie CMS</title>
+      </NextHead>
+
+      <div
+        className={css({
+          display: 'flex',
+          minHeight: '100vh',
+          fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        })}
+      >
+        {/* ── Left brand panel ── */}
+        <div
+          className={css({
+            width: 420,
+            backgroundColor: '#000000',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            padding: '48px',
+            flexShrink: 0,
+            '@media (max-width: 900px)': { display: 'none' },
+          })}
+        >
+          {/* Logo */}
+          <div className={css({ display: 'flex', alignItems: 'center', gap: 10 })}>
+            <span
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 30,
+                height: 30,
+                borderRadius: 7,
+                border: '1.5px solid rgba(255,255,255,0.18)',
+                flexShrink: 0,
+              })}
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M2.5 11V3L11.5 11V3"
+                  stroke="white"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </span>
+            <span
+              className={css({
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#ffffff',
+                letterSpacing: '-0.03em',
+                lineHeight: 1,
+              })}
+            >
+              Nixxie
+            </span>
+          </div>
+
+          {/* Tagline */}
+          <div>
+            <p
+              className={css({
+                margin: '0 0 16px',
+                fontSize: 34,
+                fontWeight: 700,
+                color: '#ffffff',
+                letterSpacing: '-0.04em',
+                lineHeight: 1.15,
+              })}
+            >
+              Welcome
+              <br />
+              aboard.
+            </p>
+            <p
+              className={css({
+                margin: 0,
+                fontSize: 13.5,
+                color: 'rgba(255,255,255,0.38)',
+                lineHeight: 1.65,
+              })}
+            >
+              Create your first admin account to
+              <br />
+              get started with Nixxie CMS.
+            </p>
+          </div>
+
+          {/* Footer */}
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 10.5,
+              color: 'rgba(255,255,255,0.18)',
+              letterSpacing: '0.06em',
+              textTransform: 'uppercase',
+            })}
+          >
+            Nixxie CMS
+          </p>
+        </div>
+
+        {/* ── Right form panel ── */}
+        <div
+          className={css({
+            flex: 1,
+            backgroundColor: '#ffffff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '48px 64px',
+            '@media (max-width: 600px)': { padding: '32px 24px' },
+          })}
+        >
+          <div className={css({ width: '100%', maxWidth: 400 })}>
+            {/* N mark */}
+            <div
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 36,
+                height: 36,
+                borderRadius: 8,
+                backgroundColor: '#000000',
+                marginBottom: 32,
+              })}
+            >
+              <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M2.5 11V3L11.5 11V3"
+                  stroke="white"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+
+            <h1
+              className={css({
+                margin: '0 0 6px',
+                fontSize: 23,
+                fontWeight: 700,
+                color: '#0a0a0a',
+                letterSpacing: '-0.03em',
+                lineHeight: 1.2,
+              })}
+            >
+              Create your first user
+            </h1>
+            <p
+              className={css({
+                margin: '0 0 28px',
+                fontSize: 13.5,
+                color: '#8a8a8a',
+                lineHeight: 1.5,
+              })}
+            >
+              Set up your admin account to start using Nixxie CMS.
+            </p>
+
+            {/* Errors */}
+            <GraphQLErrorNotice errors={[error]} />
+
+            {/* Form */}
+            <form
+              onSubmit={onSubmit}
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 16,
+              })}
+            >
+              <Fields {...builder.props} />
+
+              <button
+                type="submit"
+                disabled={pending}
+                className={css({
+                  marginTop: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingInline: 20,
+                  paddingBlock: 11,
+                  backgroundColor: '#000000',
+                  color: '#ffffff',
+                  borderRadius: 7,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  letterSpacing: '-0.01em',
+                  cursor: pending ? 'default' : 'pointer',
+                  opacity: pending ? 0.6 : 1,
+                  transition: 'opacity 150ms, background-color 150ms',
+                  width: '100%',
+                  border: 'none',
+                  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                  '&:hover:not(:disabled)': { backgroundColor: '#1a1a1a' },
+                  '&:focus-visible': {
+                    outline: '2px solid #000',
+                    outlineOffset: 3,
+                    borderRadius: 7,
+                  },
+                })}
+              >
+                {pending ? 'Setting up…' : 'Get started'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/pages/SigninPage.tsx

@@ -0,0 +1,331 @@
+import NextHead from 'next/head'
+import { useState } from 'react'
+
+import { Notice } from '@keystar/ui/notice'
+import { PasswordField } from '@keystar/ui/password-field'
+import { Content } from '@keystar/ui/slots'
+import { css } from '@keystar/ui/style'
+import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
+
+import { gql, type TypedDocumentNode, useMutation } from '@nixxie-cms/core/admin-ui/apollo'
+import { GraphQLErrorNotice } from '@nixxie-cms/core/admin-ui/components'
+import { useRouter } from '@nixxie-cms/core/admin-ui/router'
+import { useRedirect } from '../lib/useFromRedirect'
+import type { AuthGqlNames } from '../types'
+
+export default (props: Parameters<typeof SigninPage>[0]) => () => <SigninPage {...props} />
+
+function SigninPage({
+  identityField,
+  secretField,
+  authGqlNames,
+}: {
+  identityField: string
+  secretField: string
+  authGqlNames: AuthGqlNames
+}) {
+  const router = useRouter()
+  const redirect = useRedirect()
+  const [state, setState] = useState({ identity: '', secret: '' })
+  const {
+    authenticateItemWithPassword,
+    ItemAuthenticationWithPasswordSuccess: successTypename,
+    ItemAuthenticationWithPasswordFailure: failureTypename,
+  } = authGqlNames
+  const [tryAuthenticate, { error, loading, data }] = useMutation(
+    gql`
+    mutation NxAuthSignin ($identity: String!, $secret: String!) {
+      authenticate: ${authenticateItemWithPassword}(${identityField}: $identity, ${secretField}: $secret) {
+        ... on ${successTypename} {
+          item {
+            id
+          }
+        }
+        ... on ${failureTypename} {
+          message
+        }
+      }
+    }` as TypedDocumentNode<
+      { authenticate: { __typename: string; item?: { id: string }; message?: string } },
+      { identity: string; secret: string }
+    >,
+    {
+      refetchQueries: ['NxFetchAdminMeta'],
+    }
+  )
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    if (event.target !== event.currentTarget) return
+    event.preventDefault()
+
+    try {
+      const { data } = await tryAuthenticate({
+        variables: {
+          identity: state.identity,
+          secret: state.secret,
+        },
+      })
+
+      if (data?.authenticate.item) {
+        router.push(redirect)
+      }
+    } catch (e) {
+      console.error(e)
+      return
+    }
+  }
+
+  const pending = loading || data?.authenticate?.__typename === successTypename
+
+  return (
+    <>
+      <NextHead>
+        <title key="title">Nixxie — Sign in</title>
+      </NextHead>
+
+      <div
+        className={css({
+          display: 'flex',
+          minHeight: '100vh',
+          fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        })}
+      >
+        {/* ── Left brand panel ── */}
+        <div
+          className={css({
+            width: 420,
+            backgroundColor: '#000000',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            padding: '48px',
+            flexShrink: 0,
+            '@media (max-width: 900px)': { display: 'none' },
+          })}
+        >
+          {/* Logo */}
+          <div className={css({ display: 'flex', alignItems: 'center', gap: 10 })}>
+            <span
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 30,
+                height: 30,
+                borderRadius: 7,
+                border: '1.5px solid rgba(255,255,255,0.18)',
+                flexShrink: 0,
+              })}
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M2.5 11V3L11.5 11V3"
+                  stroke="white"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </span>
+            <span
+              className={css({
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#ffffff',
+                letterSpacing: '-0.03em',
+                lineHeight: 1,
+              })}
+            >
+              Nixxie
+            </span>
+          </div>
+
+          {/* Tagline */}
+          <div>
+            <p
+              className={css({
+                margin: '0 0 16px',
+                fontSize: 34,
+                fontWeight: 700,
+                color: '#ffffff',
+                letterSpacing: '-0.04em',
+                lineHeight: 1.15,
+              })}
+            >
+              Content.
+              <br />
+              Managed
+              <br />
+              Beautifully.
+            </p>
+            <p
+              className={css({
+                margin: 0,
+                fontSize: 13.5,
+                color: 'rgba(255,255,255,0.38)',
+                lineHeight: 1.65,
+              })}
+            >
+              A professional CMS built for modern
+              <br />
+              teams who care about craft.
+            </p>
+          </div>
+
+          {/* Footer */}
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 10.5,
+              color: 'rgba(255,255,255,0.18)',
+              letterSpacing: '0.06em',
+              textTransform: 'uppercase',
+            })}
+          >
+            Nixxie CMS
+          </p>
+        </div>
+
+        {/* ── Right form panel ── */}
+        <div
+          className={css({
+            flex: 1,
+            backgroundColor: '#ffffff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '48px 64px',
+            '@media (max-width: 600px)': { padding: '32px 24px' },
+          })}
+        >
+          <div className={css({ width: '100%', maxWidth: 360 })}>
+            {/* N mark */}
+            <div
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 36,
+                height: 36,
+                borderRadius: 8,
+                backgroundColor: '#000000',
+                marginBottom: 32,
+              })}
+            >
+              <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M2.5 11V3L11.5 11V3"
+                  stroke="white"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+
+            <h1
+              className={css({
+                margin: '0 0 6px',
+                fontSize: 23,
+                fontWeight: 700,
+                color: '#0a0a0a',
+                letterSpacing: '-0.03em',
+                lineHeight: 1.2,
+              })}
+            >
+              Sign in
+            </h1>
+            <p
+              className={css({
+                margin: '0 0 28px',
+                fontSize: 13.5,
+                color: '#8a8a8a',
+                lineHeight: 1.5,
+              })}
+            >
+              Welcome back. Enter your credentials to continue.
+            </p>
+
+            {/* Errors */}
+            <GraphQLErrorNotice errors={[error]} />
+            {data?.authenticate?.__typename === failureTypename && (
+              <Notice tone="critical">
+                <Content>
+                  <Text>{data?.authenticate.message}</Text>
+                </Content>
+              </Notice>
+            )}
+
+            {/* Form */}
+            <form
+              onSubmit={onSubmit}
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 16,
+              })}
+            >
+              <TextField
+                autoFocus
+                id="identity"
+                isRequired
+                label={capitalizeFirstLetter(identityField)}
+                name="identity"
+                onChange={v => setState({ ...state, identity: v })}
+                value={state.identity}
+              />
+              <PasswordField
+                id="password"
+                isRequired
+                label={capitalizeFirstLetter(secretField)}
+                // @ts-expect-error — valid prop, types need to be fixed in "@keystar/ui"
+                name="password"
+                onChange={v => setState({ ...state, secret: v })}
+                type="password"
+                value={state.secret}
+              />
+
+              <button
+                type="submit"
+                disabled={pending}
+                className={css({
+                  marginTop: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingInline: 20,
+                  paddingBlock: 11,
+                  backgroundColor: '#000000',
+                  color: '#ffffff',
+                  borderRadius: 7,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  letterSpacing: '-0.01em',
+                  cursor: pending ? 'default' : 'pointer',
+                  opacity: pending ? 0.6 : 1,
+                  transition: 'opacity 150ms, background-color 150ms',
+                  width: '100%',
+                  border: 'none',
+                  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                  '&:hover:not(:disabled)': { backgroundColor: '#1a1a1a' },
+                  '&:focus-visible': {
+                    outline: '2px solid #000',
+                    outlineOffset: 3,
+                    borderRadius: 7,
+                  },
+                })}
+              >
+                {pending ? 'Signing in…' : 'Sign in'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function capitalizeFirstLetter(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}

package/src/schema.ts

@@ -0,0 +1,84 @@
+import { assertInputObjectType, GraphQLString, GraphQLID, parse, validate } from 'graphql'
+
+import { g } from '@nixxie-cms/core'
+import type { AuthGqlNames, AuthTokenTypeConfig, InitFirstItemConfig } from './types'
+import { getBaseAuthSchema } from './gql/getBaseAuthSchema'
+import { getInitFirstItemSchema } from './gql/getInitFirstItemSchema'
+
+export const getSchemaExtension = ({
+  authGqlNames,
+  listKey,
+  identityField,
+  secretField,
+  initFirstItem,
+  sessionData,
+}: {
+  authGqlNames: AuthGqlNames
+  listKey: string
+  identityField: string
+  secretField: string
+  initFirstItem?: InitFirstItemConfig<any>
+  passwordResetLink?: AuthTokenTypeConfig
+  magicAuthLink?: AuthTokenTypeConfig
+  sessionData: string
+}) =>
+  g.extend(base => {
+    const uniqueWhereInputType = assertInputObjectType(
+      base.schema.getType(authGqlNames.whereUniqueInputName)
+    )
+    const identityFieldOnUniqueWhere = uniqueWhereInputType.getFields()[identityField]
+    if (
+      base.schema.extensions.sudo &&
+      identityFieldOnUniqueWhere?.type !== GraphQLString &&
+      identityFieldOnUniqueWhere?.type !== GraphQLID
+    ) {
+      throw new Error(
+        `createAuth was called with an identityField of ${identityField} on the list ${listKey} ` +
+          `but that field doesn't allow being searched uniquely with a String or ID. ` +
+          `You should likely add \`isIndexed: 'unique'\` ` +
+          `to the field at ${listKey}.${identityField}`
+      )
+    }
+
+    const baseSchema = getBaseAuthSchema({
+      authGqlNames: authGqlNames,
+      identityField,
+      listKey,
+      secretField,
+      base,
+    })
+
+    // technically this will incorrectly error if someone has a schema extension that adds a field to the list output type
+    // and then wants to fetch that field with `sessionData` but it's extremely unlikely someone will do that since if
+    // they want to add a GraphQL field, they'll probably use a virtual field
+    const query = `query($id: ID!) { ${authGqlNames.itemQueryName}(where: { id: $id }) { ${sessionData} } }`
+
+    let ast
+    try {
+      ast = parse(query)
+    } catch (err) {
+      throw new Error(
+        `The query to get session data has a syntax error, the sessionData option in your createAuth usage is likely incorrect\n${err}`
+      )
+    }
+
+    const errors = validate(base.schema, ast)
+    if (errors.length) {
+      throw new Error(
+        `The query to get session data has validation errors, the sessionData option in your createAuth usage is likely incorrect\n${errors.join('\n')}`
+      )
+    }
+
+    return [
+      baseSchema.extension,
+      initFirstItem &&
+        getInitFirstItemSchema({
+          authGqlNames,
+          listKey,
+          fields: initFirstItem.fields,
+          defaultItemData: initFirstItem.itemData,
+          graphQLSchema: base.schema,
+          ItemAuthenticationWithPasswordSuccess: baseSchema.ItemAuthenticationWithPasswordSuccess,
+        }),
+    ].filter((x): x is Exclude<typeof x, undefined> => x !== undefined)
+  })