feat(users): Add public.users table and new users to it

Add public.users table because supabase auth.users is private.
Add users to it after sign up.
Handle database migrations and queries with prisma.
Add prisma (CLI) and @prisma/client dependencies.

.github/workflows/deploy.yaml

@@ -0,0 +1,25 @@
+name: deploy
+run-name: Reusable deploy workflow to deploy database changes to the target Supabase database.
+on:
+  workflow_call:
+    secrets:
+      DATABASE_URL:
+        required: true
+        type: string
+      DATABASE_DIRECT_URL:
+        required: true
+        type: string
+jobs:
+  prisma-migrate-deploy:
+    name: Run prisma migrations
+    runs-on: ubuntu-latest
+    env:
+      DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      DATABASE_DIRECT_URL: ${{ secrets.DATABASE_DIRECT_URL }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+      - run: npx prisma@5.0.0 migrate deploy

.github/workflows/preview-deploy.yaml

@@ -0,0 +1,15 @@
+name: staging-deploy
+run-name: Deploy database changes to Supabase's Staging database.
+on:
+  push:
+    branches-ignore:
+      - 'main'
+jobs:
+  call-deploy-workflow:
+    name: Call reusable deploy workflow
+    environment:
+      name: staging
+    uses: ./.github/workflows/deploy.yaml
+    secrets:
+      DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      DATABASE_DIRECT_URL: ${{ secrets.DATABASE_DIRECT_URL }}

.github/workflows/production-deploy.yaml

@@ -0,0 +1,15 @@
+name: production-deploy
+run-name: Deploy database changes to Supabase's Production database.
+on:
+  push:
+    branches-ignore:
+      - 'main'
+jobs:
+  call-deploy-workflow:
+    name: Call reusable deploy workflow
+    environment:
+      name: production
+    uses: ./.github/workflows/deploy.yaml
+    secrets:
+      DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      DATABASE_DIRECT_URL: ${{ secrets.DATABASE_DIRECT_URL }}

package.json

@@ -4,12 +4,14 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "prisma generate && next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "prisma generate"
   },
   "dependencies": {
     "@headlessui/react": "1.7.15",
+    "@prisma/client": "5.0.0",
     "@supabase/auth-helpers-nextjs": "0.7.2",
     "@supabase/supabase-js": "2.26.0",
     "@tailwindcss/forms": "0.5.3",
@@ -35,6 +37,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
+    "prisma": "5.0.0",
     "supabase": "1.77.9"
   }
 }

prisma/migrations/20230721144417_init/migration.sql

@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" UUID NOT NULL,
+    "email" VARCHAR(254) NOT NULL,
+    "name" VARCHAR(500),
+    "provider" VARCHAR(100) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3),
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_provider_key" ON "User"("provider");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,21 @@
+datasource db {
+  provider  = "postgresql"
+  url       = env("DATABASE_URL")
+  directUrl = env("DATABASE_DIRECT_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+// We use Supabase's authentication solution, which create users in a private "auth" schema.
+// So we create this User table in our "public" schema and add users to it after
+// they're created by Supabase's auth solution, using the same "id".
+model User {
+  id        String    @id @db.Uuid
+  email     String    @unique @db.VarChar(254)
+  name      String?   @db.VarChar(500)
+  provider  String    @unique @db.VarChar(100)
+  createdAt DateTime  @default(now())
+  updatedAt DateTime? @updatedAt
+}

src/app/app/shared/user/user-model.ts

@@ -0,0 +1,24 @@
+import { PrismaClient, User } from '@prisma/client';
+
+export interface CreateUserData {
+  readonly email: string;
+  readonly id: string;
+  readonly name?: string;
+  readonly provider: string;
+}
+
+export const createUser = async (data: CreateUserData) => {
+  const prisma = new PrismaClient();
+
+  const user = await prisma.user.findUnique({ where: { id: data.id } });
+
+  if (user) return user;
+
+  const newUser = await prisma.user.create({ data });
+  return newUser;
+};
+
+export const findUserById = async (id: string) => {
+  const prisma = new PrismaClient();
+  return await prisma.user.findUnique({ where: { id } });
+};

src/app/auth/callback/route.ts

@@ -4,6 +4,7 @@ import { NextResponse } from 'next/server';
 
 import type { NextRequest } from 'next/server';
 import type { Database } from '@/lib/database.types';
+import { createUser } from '@/app/app/shared/user/user-model';
 
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url);
@@ -12,6 +13,21 @@ export async function GET(request: NextRequest) {
   if (code) {
     const supabase = createRouteHandlerClient<Database>({ cookies });
     await supabase.auth.exchangeCodeForSession(code);
+
+    const {
+      data: { session },
+    } = await supabase.auth.getSession();
+
+    if (session) {
+      const { user } = session;
+
+      createUser({
+        id: user.id,
+        email: user.email as string,
+        name: user.user_metadata.full_name as string,
+        provider: user.app_metadata.provider as string,
+      });
+    }
   }
 
   // URL to redirect to after sign in process completes

src/app/auth/sign-in/check-email-link/page.tsx

@@ -13,10 +13,8 @@ export default function CheckEmailLink({ searchParams }: { searchParams: { email
       <h2 className="mt-10 text-2xl font-medium text-black md:text-3xl">Please check your email</h2>
       <div className="flex flex-col items-center sm:mx-auto sm:w-full sm:max-w-sm">
         <MailIcon width="5rem" height="5rem" className="my-6 md:my-10" />
-        <p className="mb-6 text-center">You&apos;re almost there!</p>
-        <p className="mb-6 text-center">
-          We just emailed a link to {getEmailText()}. Click the link, and you&apos;ll be signed in.
-        </p>
+        <p className="mb-2 text-center">We just emailed a link to {getEmailText()}.</p>
+        <p className="mb-6 text-center">Click on it, and you&apos;ll be signed in.</p>
         <p className="text-center">
           If you don&apos;t see it, you may need to{' '}
           <span className="font-semibold">check your spam folder</span>.

src/app/auth/sign-in/page.tsx

@@ -20,6 +20,8 @@ interface OAuthProviderButtonProps extends ChildrenProps {
 }
 
 export default function SignIn() {
+  const redirectTo = `${process.env.NEXT_PUBLIC_VERCEL_URL}/auth/callback`;
+
   const signInWithEmailHandler = async (formData: FormData) => {
     'use server';
     const email = String(formData.get('email'));
@@ -29,7 +31,7 @@ export default function SignIn() {
     const { data, error } = await supabase.auth.signInWithOtp({
       email,
       options: {
-        emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
+        emailRedirectTo: redirectTo,
       },
     });
 
@@ -50,7 +52,7 @@ export default function SignIn() {
     const { data, error } = await supabase.auth.signInWithOAuth({
       provider,
       options: {
-        redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
+        redirectTo,
       },
     });
 

src/lib/database.types.ts

@@ -34,7 +34,66 @@ export interface Database {
   }
   public: {
     Tables: {
-      [_ in never]: never
+      _prisma_migrations: {
+        Row: {
+          applied_steps_count: number
+          checksum: string
+          finished_at: string | null
+          id: string
+          logs: string | null
+          migration_name: string
+          rolled_back_at: string | null
+          started_at: string
+        }
+        Insert: {
+          applied_steps_count?: number
+          checksum: string
+          finished_at?: string | null
+          id: string
+          logs?: string | null
+          migration_name: string
+          rolled_back_at?: string | null
+          started_at?: string
+        }
+        Update: {
+          applied_steps_count?: number
+          checksum?: string
+          finished_at?: string | null
+          id?: string
+          logs?: string | null
+          migration_name?: string
+          rolled_back_at?: string | null
+          started_at?: string
+        }
+        Relationships: []
+      }
+      User: {
+        Row: {
+          createdAt: string
+          email: string
+          id: string
+          name: string | null
+          provider: string
+          updatedAt: string | null
+        }
+        Insert: {
+          createdAt?: string
+          email: string
+          id: string
+          name?: string | null
+          provider: string
+          updatedAt?: string | null
+        }
+        Update: {
+          createdAt?: string
+          email?: string
+          id?: string
+          name?: string | null
+          provider?: string
+          updatedAt?: string | null
+        }
+        Relationships: []
+      }
     }
     Views: {
       [_ in never]: never