Add ability to generate access tokens

supabase/migrations/20230817110845_access_token.sql

@@ -0,0 +1,196 @@
+create table app.access_tokens(
+    id uuid primary key default gen_random_uuid(),
+    user_id uuid not null references auth.users(id) on delete cascade,
+    token_hash bytea not null,
+    token_name text not null check (length(token_name) <= 64),
+    plaintext_suffix text not null check (length(plaintext_suffix) = 4),
+    created_at timestamptz not null default now()
+);
+
+grant insert
+    (id, user_id, token_hash, token_name, plaintext_suffix)
+    on app.access_tokens
+    to authenticated;
+
+grant delete
+    on app.access_tokens
+    to authenticated;
+
+alter table app.access_tokens enable row level security;
+
+create policy access_tokens_select_policy
+    on app.access_tokens
+    as permissive
+    for select
+    to public
+    using ( auth.uid() = user_id );
+
+create policy access_tokens_insert_policy
+    on app.access_tokens
+    as permissive
+    for insert
+    to authenticated
+    with check ( auth.uid() = user_id );
+
+create policy access_tokens_delete_policy
+    on app.access_tokens
+    as permissive
+    for delete
+    to authenticated
+    using ( auth.uid() = user_id );
+
+create or replace function app.base64url_encode(input bytea)
+    returns text
+    language plpgsql
+    strict
+as $$
+begin
+    return replace(replace(encode(input, 'base64'), '/', '_'), '+', '-');
+end;
+$$;
+
+create or replace function app.base64url_decode(input text)
+    returns text
+    language plpgsql
+    strict
+as $$
+begin
+    return decode(replace(replace(input, '-', '+'), '_', '/'), 'base64');
+end;
+$$;
+
+create or replace function public.new_access_token(
+    token_name text
+)
+    returns text
+    language plpgsql
+    strict
+as $$
+<<fn>>
+declare
+    account app.accounts = account from app.accounts account where id = auth.uid();
+    -- Why 21 random bytes? We are shooting for 128 bit (16 bytes) entropy. But we
+    -- also show three bytes as plaintext. That takes us to a total 19 bytes.
+    -- We add two bytes to make sure that the base64 encoded bytes don't have any
+    -- padding, which makes it a little bit nicer to look at. That makes 21.
+    token bytea = gen_random_bytes(21);
+    token_hash bytea = sha256(token);
+    -- Total length of the base64 encoded token is 21 * 8 / 6 = 28
+    token_text text = app.base64url_encode(token);
+    token_id uuid;
+    -- Last 4 base64 encoded character are shown in the suffix
+    plaintext_suffix text = substring(token_text from 25);
+begin
+    insert into app.access_tokens(user_id, token_hash, token_name, plaintext_suffix)
+    values (account.id, token_hash, token_name, fn.plaintext_suffix) returning id into token_id;
+
+    -- String returned has a length 64
+    return 'dbd_' || replace(token_id::text, '-', '') || token_text;
+end;
+$$;
+
+create type app.access_token_struct as (
+    id uuid,
+    token_name text,
+    masked_token text,
+    created_at timestamptz
+);
+
+create or replace function public.get_access_tokens()
+    returns setof app.access_token_struct
+    language plpgsql
+    strict
+as $$
+declare
+    account app.accounts = account from app.accounts account where id = auth.uid();
+begin
+    return query
+    select id, token_name,
+            'dbd_' ||
+            substring(at.id::text from 1 for 4) ||
+            repeat('•', 52) ||
+            at.plaintext_suffix as masked_token,
+        created_at
+    from app.access_tokens at
+    where at.user_id = account.id;
+end;
+$$;
+
+create or replace function public.delete_access_token(
+    token_id uuid
+)
+    returns void
+    language plpgsql
+    strict
+as $$
+declare
+    account app.accounts = account from app.accounts account where id = auth.uid();
+begin
+    delete from app.access_tokens at
+    where at.user_id = account.id and at.id = token_id;
+end;
+$$;
+
+create type app.user_id_and_token_hash as (
+    user_id uuid,
+    token_hash bytea
+);
+
+create or replace function public.redeem_access_token(
+    access_token text
+)
+    returns text
+    language plpgsql
+    security definer
+    strict
+as $$
+declare
+    token_id uuid;
+    token bytea;
+    tokens_row app.user_id_and_token_hash;
+    token_valid boolean;
+    now timestamp;
+    one_hour_from_now timestamp;
+    issued_at int;
+    expiry_at int;
+    jwt_secret text;
+begin
+    -- validate access token
+    if length(access_token) != 64 then
+        raise exception 'Invalid token';
+    end if;
+
+    if substring(access_token from 1 for 4) != 'dbd_' then
+        raise exception 'Invalid token';
+    end if;
+
+    token_id := substring(access_token from 5 for 32)::uuid;
+    token := app.base64url_decode(substring(access_token from 37));
+
+    select t.user_id, t.token_hash
+    into tokens_row
+    from app.access_tokens t
+    where t.id = token_id;
+
+    -- TODO: do a constant time comparison
+    if tokens_row.token_hash != sha256(token) then
+        raise exception 'Invalid token';
+    end if;
+
+    -- Generate JWT token
+    now := current_timestamp;
+    one_hour_from_now := now + interval '1 hour';
+    issued_at := date_part('epoch', now);
+    expiry_at := date_part('epoch', one_hour_from_now);
+    jwt_secret := current_setting('app.settings.jwt_secret', true);
+
+    return sign(json_build_object(
+        'aud', 'authenticated',
+        'role', 'authenticated',
+        'iss', 'database.dev',
+        'sub', tokens_row.user_id,
+        'iat', issued_at,
+        'exp', expiry_at
+    ), jwt_secret);
+end;
+$$;

website/components/access-tokens/AccessTokenCard.tsx

@@ -0,0 +1,46 @@
+import dayjs from 'dayjs'
+import { toast } from 'react-hot-toast'
+import { useDeleteAccessTokenMutation } from '~/data/access-tokens/delete-access-token'
+import Button from '../ui/Button'
+
+export interface ApiTokenCardProps {
+  tokenId: string
+  tokenName: string
+  maskedToken: string
+  createdAt: string
+}
+
+const AccessTokenCard = ({
+  tokenId,
+  tokenName,
+  maskedToken,
+  createdAt,
+}: ApiTokenCardProps) => {
+  const { mutate: deleteAccessToken, isLoading: isDeletingAccessToken } =
+    useDeleteAccessTokenMutation({
+      onSuccess() {
+        toast.success('Successfully revoked token!')
+      },
+    })
+
+  return (
+    <div className="rounded-lg px-6 py-5 border border-gray-200 flex justify-between">
+      <div className="flex flex-col space-y-4">
+        <div className="font-medium text-lg dark:text-white">{tokenName}</div>
+        <div className="text-gray-500">{`Token: ${maskedToken}`}</div>
+        <div className="text-gray-400 text-sm">{`Created ${dayjs(
+          createdAt
+        ).fromNow()}`}</div>
+      </div>
+      <Button
+        variant="subtle"
+        onClick={() => deleteAccessToken({ tokenId })}
+        disabled={isDeletingAccessToken}
+      >
+        Revoke
+      </Button>
+    </div>
+  )
+}
+
+export default AccessTokenCard

website/components/forms/FormInput.tsx

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef, forwardRef, PropsWithoutRef } from 'react'
 import { useField, UseFieldConfig } from 'react-final-form'
 import Input from '../ui/Input'
 import Label from '../ui/Label'
+import { cn } from '~/lib/utils'
 
 export interface FormInputProps
   extends PropsWithoutRef<JSX.IntrinsicElements['input']> {
@@ -17,7 +18,10 @@ export interface FormInputProps
 }
 
 const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
-  ({ name, label, outerProps, fieldProps, labelProps, ...props }, ref) => {
+  (
+    { name, label, className, outerProps, fieldProps, labelProps, ...props },
+    ref
+  ) => {
     const {
       input,
       meta: { touched, error, submitError, submitting },
@@ -35,7 +39,7 @@ const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       : error || submitError
 
     return (
-      <div {...outerProps} className="space-y-1">
+      <div {...outerProps} className={cn('space-y-1', className)}>
         <Label htmlFor={name} {...labelProps}>
           {label}
         </Label>

website/components/layouts/Navbar.tsx

@@ -115,8 +115,15 @@ const Navbar = () => {
                       {displayName}
                     </Link>
                   </DropdownMenuItem>
-
                   <DropdownMenuSeparator />
+                  <DropdownMenuItem asChild>
+                    <Link
+                      href={`/${user?.user_metadata.handle}/_/access-tokens`}
+                      className="flex items-center cursor-pointer"
+                    >
+                      Access Tokens
+                    </Link>
+                  </DropdownMenuItem>
 
                   {isOrganizationsSuccess && organizations.length > 0 && (
                     <DropdownMenuLabel>Organizations</DropdownMenuLabel>

website/components/ui/CopyButton.tsx

@@ -55,7 +55,11 @@ const CopyButton = ({
 
   return (
     <button
-      className={cn(copyButtonVariants({ variant }), className)}
+      className={cn(
+        copyButtonVariants({ variant }),
+        'bg-gray-50 dark:bg-gray-400 dark:hover:bg-gray-200',
+        className
+      )}
       onClick={() => {
         copyToClipboardWithMeta(getValue())
         setHasCopied(true)
@@ -66,7 +70,7 @@ const CopyButton = ({
       {hasCopied ? (
         <CheckIcon className="w-5 h-5" />
       ) : (
-        <ClipboardDocumentIcon className="w-5 h-5 dark:text-white" />
+        <ClipboardDocumentIcon className="w-5 h-5" />
       )}
     </button>
   )

website/data/access-tokens/access-tokens-query.ts

@@ -0,0 +1,68 @@
+import { PostgrestError } from '@supabase/supabase-js'
+import {
+  QueryClient,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query'
+import { useCallback } from 'react'
+import supabase from '~/lib/supabase'
+
+export type AccessToken = {
+  id: string
+  token_name: string
+  masked_token: string
+  created_at: string
+}
+
+const SELECTED_COLUMNS = [
+  'id',
+  'token_name',
+  'masked_token',
+  'created_at',
+] as const
+
+export type AccessTokensResponse = Pick<
+  AccessToken,
+  (typeof SELECTED_COLUMNS)[number]
+>[]
+
+export async function getAccessTokens() {
+  const { data, error } = await supabase.rpc('get_access_tokens', {})
+
+  if (error) {
+    throw error
+  }
+
+  return (data as AccessTokensResponse) ?? []
+}
+
+export const accessTokensQueryKey = 'access-tokens'
+
+export type AccessTokensData = Awaited<ReturnType<typeof getAccessTokens>>
+export type AccessTokensError = PostgrestError
+
+export const useAccessTokensQuery = <TData = AccessTokensData>({
+  enabled = true,
+  ...options
+}: UseQueryOptions<AccessTokensData, AccessTokensError, TData> = {}) =>
+  useQuery<AccessTokensData, AccessTokensError, TData>(
+    [accessTokensQueryKey],
+    ({}) => getAccessTokens(),
+    {
+      enabled: enabled,
+      ...options,
+    }
+  )
+
+export const prefetchAccessTokens = (client: QueryClient) => {
+  return client.prefetchQuery([accessTokensQueryKey], ({}) => getAccessTokens())
+}
+
+export const useAccessTokensPrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    prefetchAccessTokens(client)
+  }, [client])
+}