Hash API keys with SHA-256 and never show them again

api/resolvers/user.js

@@ -47,7 +47,7 @@ async function authMethods (user, args, { models, me }) {
     twitter: oauth.indexOf('twitter') >= 0,
     github: oauth.indexOf('github') >= 0,
     nostr: !!user.nostrAuthPubkey,
-    apiKey: user.apiKeyEnabled ? user.apiKey : null
+    apiKey: user.apiKeyEnabled ? !!user.apiKeyHash : null
   }
 }
 
@@ -541,7 +541,14 @@ export default {
         throw new GraphQLError('you are not allowed to generate api keys', { extensions: { code: 'FORBIDDEN' } })
       }
 
-      const [{ apiKey }] = await models.$queryRaw`UPDATE users SET "apiKey" = encode(gen_random_bytes(32), 'base64')::CHAR(32) WHERE id = ${me.id} RETURNING "apiKey"`
+      // I trust postgres CSPRNG more than the one from JS
+      const [{ apiKey, apiKeyHash }] = await models.$queryRaw`
+      SELECT "apiKey", encode(digest("apiKey", 'sha256'), 'hex') AS "apiKeyHash"
+      FROM (
+        SELECT encode(gen_random_bytes(32), 'base64')::CHAR(32) as "apiKey"
+      ) rng`
+      await models.user.update({ where: { id: me.id }, data: { apiKeyHash } })
+
       return apiKey
     },
     deleteApiKey: async (parent, { id }, { models, me }) => {
@@ -549,7 +556,7 @@ export default {
         throw new GraphQLError('you must be logged in', { extensions: { code: 'UNAUTHENTICATED' } })
       }
 
-      return await models.user.update({ where: { id: me.id }, data: { apiKey: null } })
+      return await models.user.update({ where: { id: me.id }, data: { apiKeyHash: null } })
     },
     unlinkAuth: async (parent, { authType }, { models, me }) => {
       if (!me) {

api/typeDefs/user.js

@@ -104,7 +104,7 @@ export default gql`
     github: Boolean!
     twitter: Boolean!
     email: String
-    apiKey: String
+    apiKey: Boolean!
   }
 
   type UserPrivates {

pages/api/graphql.js

@@ -56,8 +56,11 @@ export default startServerAndCreateNextHandler(apolloServer, {
     const apiKey = req.headers['x-api-key']
     let session
     if (apiKey) {
-      const sessionFieldSelect = { name: true, id: true, email: true }
+      const [user] = await models.$queryRaw`
-      const user = await models.user.findUnique({ where: { apiKey }, select: { ...sessionFieldSelect, apiKeyEnabled: true } })
+      SELECT id, name, email, "apiKeyEnabled"
+      FROM users
+      WHERE "apiKeyHash" = encode(digest(${apiKey}, 'sha256'), 'hex')
+      LIMIT 1`
       if (user?.apiKeyEnabled) {
         const { apiKeyEnabled, ...sessionFields } = user
         session = { user: { ...sessionFields, apiKey: true } }

pages/settings/index.js

@@ -768,6 +768,7 @@ export function EmailLinkForm ({ callbackUrl }) {
 }
 
 export function ApiKey ({ enabled, apiKey }) {
+  const showModal = useShowModal()
   const me = useMe()
   const [generateApiKey] = useMutation(
     gql`
@@ -785,7 +786,7 @@ export function ApiKey ({ enabled, apiKey }) {
                 privates: {
                   ...existing.privates,
                   apiKey: generateApiKey,
-                  authMethods: { ...existing.privates.authMethods, apiKey: generateApiKey }
+                  authMethods: { ...existing.privates.authMethods, apiKey: true }
                 }
               }
             }
@@ -811,7 +812,7 @@ export function ApiKey ({ enabled, apiKey }) {
                 ...existing,
                 privates: {
                   ...existing.privates,
-                  authMethods: { ...existing.privates.authMethods, apiKey: null }
+                  authMethods: { ...existing.privates.authMethods, apiKey: false }
                 }
               }
             }
@@ -820,6 +821,7 @@ export function ApiKey ({ enabled, apiKey }) {
       }
     }
   )
+  const toaster = useToast()
 
   const subject = '[API Key Request] <your title here>'
   const body =
@@ -850,36 +852,34 @@ I estimate that I will call the GraphQL API this many times (rough estimate is f
     <>
       <div className='form-label mt-3'>api key</div>
       <div className='mt-2 d-flex align-items-center'>
-        {apiKey &&
-          <>
-            <CopyInput
-              groupClassName='mb-0'
-              readOnly
-              noForm
-              placeholder={apiKey}
-            />
-          </>}
         <OverlayTrigger
           placement='bottom'
           overlay={disabled ? <Tooltip>request access to API keys in ~meta</Tooltip> : <></>}
           trigger={['hover', 'focus']}
         >
           <div>
-            {apiKey
+            <Button
-              ? <DeleteIcon
+              disabled={disabled}
-                  style={{ cursor: 'pointer' }} className='fill-grey mx-1' width={24} height={24}
+              variant='secondary'
-                  onClick={async () => {
+              onClick={async () => {
-                    await deleteApiKey({ variables: { id: me.id } })
+                try {
-                  }}
+                  const { data } = await generateApiKey({ variables: { id: me.id } })
-                />
+                  const { generateApiKey: apiKey } = data
-              : (
+                  showModal(() => <ApiKeyModal apiKey={apiKey} />, { keepOpen: true })
-                <Button
+                } catch (err) {
-                  disabled={disabled} className={apiKey ? 'ms-2' : ''} variant='secondary' onClick={async () => {
+                  console.error(err)
-                    await generateApiKey({ variables: { id: me.id } })
+                  toaster.danger('error generating api key')
-                  }}
+                }
-                >Generate API key
+              }}
-                </Button>
+            >Generate API key
-                )}
+            </Button>
+            {apiKey &&
+              <DeleteIcon
+                style={{ cursor: 'pointer' }} className='fill-grey mx-1' width={24} height={24}
+                onClick={async () => {
+                  await deleteApiKey({ variables: { id: me.id } })
+                }}
+              />}
           </div>
         </OverlayTrigger>
         <Info>
@@ -912,6 +912,18 @@ I estimate that I will call the GraphQL API this many times (rough estimate is f
   )
 }
 
+function ApiKeyModal ({ apiKey }) {
+  return (
+    <>
+      <p className='fw-bold'>
+        Make sure to copy your API key now.<br />
+        This is the only time we will show it to you.
+      </p>
+      <CopyInput readOnly noForm placeholder={apiKey} hint={<>use the <span className='text-monospace'>X-API-Key</span> header to include this key in your requests</>} />
+    </>
+  )
+}
+
 const ZapUndosField = () => {
   const [checkboxField] = useField({ name: 'zapUndosEnabled' })
   return (

prisma/migrations/20240326181608_api_key_sha256/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `apiKey` on the `users` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[apiKeyHash]` on the table `users` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- DropIndex
+DROP INDEX "users.apikey_unique";
+
+-- AlterTable
+ALTER TABLE "users" DROP COLUMN "apiKey",
+ADD COLUMN     "apiKeyHash" CHAR(64);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users.apikeyhash_unique" ON "users"("apiKeyHash");

prisma/schema.prisma

@@ -26,7 +26,7 @@ model User {
   checkedNotesAt            DateTime?
   foundNotesAt              DateTime?
   pubkey                    String?              @unique(map: "users.pubkey_unique")
-  apiKey                    String?              @unique(map: "users.apikey_unique") @db.Char(32)
+  apiKeyHash                String?              @unique(map: "users.apikeyhash_unique") @db.Char(64)
   apiKeyEnabled             Boolean              @default(false)
   tipDefault                Int                  @default(100)
   bioId                     Int?