feat: add clerk integration in /next branch (#364)

* feat: add clerk integration in /next branch

* feat: add signin & signup pages, add env variables to env.ts

* feat: adds env variables example

* feat: dashboard page initialisation

* fix: ci environment in pipeline

* fix: exposes clerk & upstash env vars to ci

* chore: remove forms tailwind plugin

---------

Co-authored-by: ManavJoshi <[email protected]>
Co-authored-by: Ahmed Elsakaan <[email protected]>

.env.example

@@ -0,0 +1,7 @@
+# Authentication
+CLERK_SECRET_KEY=<your-clerk-secret-key>
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
+
+# Upstash Redis
+UPSTASH_REDIS_REST_URL=<your-upstash-rest-url>
+UPSTASH_REDIS_REST_TOKEN=<your-upstash-rest-token>

.github/workflows/main.yml

@@ -6,6 +6,21 @@ jobs:
   main-ci:
     runs-on: ubuntu-latest
 
+    environment: CI
+    env:
+      # Clerk
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+      CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+
+      NEXT_PUBLIC_CLERK_SIGN_IN_URL: '/sign-in'
+      NEXT_PUBLIC_CLERK_SIGN_UP_URL: '/sign-up'
+      NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL: '/app'
+      NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL: '/app'
+
+      # Upstash
+      UPSTASH_REDIS_REST_URL: ${{ secrets.UPSTASH_REDIS_REST_URL }}
+      UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

cspell.config.yaml

@@ -29,11 +29,15 @@ words:
   - nextjs
   - packagejson
   - Posthog
+  - ratelimit
   - Registrator
   - serviceworker
   - Shadcn
+  - Signin
+  - Signup
   - tailwindcss
   - tanstack
+  - trpc
   - tsbuildinfo
   - tseslint
   - typecheck

package.json

@@ -45,10 +45,13 @@
     }
   },
   "dependencies": {
+    "@clerk/nextjs": "^5.0.12",
+    "@clerk/themes": "^2.1.6",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@upstash/redis": "^1.31.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "geist": "^1.3.0",
@@ -76,7 +79,6 @@
     "@playwright/test": "^1.44.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",

src/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,14 @@
+import { SignIn } from '@clerk/nextjs';
+
+/**
+ * The Signin page component.
+ *
+ * @returns The signin page.
+ */
+export default function Page() {
+  return (
+    <main className="container mx-auto flex min-h-screen items-center justify-center">
+      <SignIn />
+    </main>
+  );
+}

src/app/(auth)/sign-up/[[...sign-in]]/page.tsx

@@ -0,0 +1,14 @@
+import { SignUp } from '@clerk/nextjs';
+
+/**
+ * The Signup page component.
+ *
+ * @returns The signup page.
+ */
+export default function Page() {
+  return (
+    <main className="container mx-auto flex min-h-screen items-center justify-center">
+      <SignUp />
+    </main>
+  );
+}

src/app/(dashboard)/app/page.tsx

@@ -0,0 +1,15 @@
+import { SignOutButton } from '@clerk/nextjs';
+
+/**
+ * This is the main page for the dashboard.
+ *
+ * @returns A Next.js RSC page component.
+ */
+export default function DashboardHome() {
+  return (
+    <main>
+      <h1>Hello World</h1>
+      <SignOutButton />
+    </main>
+  );
+}

src/app/(marketing)/page.tsx

@@ -1,5 +1,7 @@
 import Link from 'next/link';
+import { redirect } from 'next/navigation';
 
+import { currentUser } from '@clerk/nextjs/server';
 import { ChevronRightIcon, StarIcon } from 'lucide-react';
 
 import { constants } from '@/constants';
@@ -12,7 +14,11 @@ import { HomePreview } from './_components/home-preview';
  *
  * @returns A react component representing the marketing home page.
  */
-export default function Home() {
+export default async function Home() {
+  const session = await currentUser();
+
+  if (session) redirect('/app');
+
   return (
     <main className="flex flex-col items-center justify-center gap-6 pt-24">
       <Button variant="outline" asChild className="rounded-full font-normal">

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 
+import { ClerkProvider } from '@clerk/nextjs';
+import { dark } from '@clerk/themes';
 import { GeistMono } from 'geist/font/mono';
 import { GeistSans } from 'geist/font/sans';
 
@@ -23,16 +25,20 @@ export const metadata: Metadata = constructMetadata();
  */
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
-    <html
-      lang="en"
-      suppressHydrationWarning
-      className={`${GeistSans.variable} ${GeistMono.variable}`}
+    <ClerkProvider
+      appearance={{ baseTheme: dark, variables: { colorPrimary: '#F9617B' } }}
     >
-      <body>
-        <ThemeProvider attribute="class" disableTransitionOnChange>
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
+      <html
+        lang="en"
+        suppressHydrationWarning
+        className={`${GeistSans.variable} ${GeistMono.variable}`}
+      >
+        <body>
+          <ThemeProvider attribute="class" disableTransitionOnChange>
+            {children}
+          </ThemeProvider>
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }

src/env.ts

@@ -11,11 +11,25 @@ export const env = createEnv({
   },
   server: {
     PORT: z.coerce.number().default(3000),
+
+    // upstash
+    UPSTASH_REDIS_REST_URL: z.string(),
+    UPSTASH_REDIS_REST_TOKEN: z.string(),
+
+    // Clerk
+    CLERK_SECRET_KEY: z.string(),
   },
-  client: {},
+  client: {
+    // Clerk
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
+  },
+
   experimental__runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
+      process.env['NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY'],
   },
-  emptyStringAsUndefined: true,
+
   skipValidation: !!process.env['SKIP_ENV_VALIDATION'],
+  emptyStringAsUndefined: true,
 });

src/lib/redis.ts

@@ -0,0 +1,8 @@
+import { Redis } from '@upstash/redis';
+
+import { env } from '@/env';
+
+export const redis = new Redis({
+  url: env.UPSTASH_REDIS_REST_URL,
+  token: env.UPSTASH_REDIS_REST_TOKEN,
+});

src/middleware.ts

@@ -0,0 +1,11 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+
+const isProtectedRoute = createRouteMatcher(['/app(.*)']);
+
+export default clerkMiddleware((auth, req) => {
+  if (isProtectedRoute(req)) auth().protect();
+});
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};

tailwind.config.ts

@@ -2,7 +2,6 @@ import type { Config } from 'tailwindcss';
 
 import aspectRatioPlugin from '@tailwindcss/aspect-ratio';
 import containerQueriesPlugin from '@tailwindcss/container-queries';
-import formsPlugin from '@tailwindcss/forms';
 import typographyPlugin from '@tailwindcss/typography';
 import tailwindAnimate from 'tailwindcss-animate';
 
@@ -66,7 +65,6 @@ const config: Config = {
   },
   plugins: [
     typographyPlugin,
-    formsPlugin,
     aspectRatioPlugin,
     {
       handler: containerQueriesPlugin.handler,