feat: replaces next-auth with clerk & adds privacy policy (#260)

.env.example

@@ -8,10 +8,10 @@ DATABASE_URL="postgres://username:password@localhost:5432/db_name"
 UPSTASH_REDIS_REST_URL="<redis_url>"
 UPSTASH_REDIS_REST_TOKEN="<redis_token>"
 
-# Next Auth
-NEXTAUTH_URL="http://localhost:3000"
-NEXTAUTH_SECRET="secretsecret"
-
-# Github Auth
-GITHUB_CLIENT_ID="<client_id>"
-GITHUB_CLIENT_SECRET="<client_secret>"
+# Clerk authentication
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<publishable-key>
+CLERK_SECRET_KEY=<secret-key>
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/app
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/app

CONTRIBUTING.md

@@ -64,7 +64,6 @@ The actual stack:
 - [TailwindCSS](https://tailwindcss.com/)
 - [tRPC](https://trpc.io)
 - [Prisma](https://www.prisma.io/)
-- [Next-auth](https://next-auth.js.org/)
 
 Development stuff:
 

apps/web/package.json

@@ -15,8 +15,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@clerk/nextjs": "^4.23.0",
+    "@clerk/themes": "^1.7.5",
     "@noodle/api": "workspace:^",
-    "@noodle/auth": "workspace:^",
     "@noodle/db": "workspace:^",
     "@noodle/editor": "workspace:^",
     "@noodle/env": "workspace:^",
@@ -34,7 +35,6 @@
     "@vercel/analytics": "^1.0.1",
     "lucide-react": "^0.263.0",
     "next": "13.4.12",
-    "next-auth": "^4.22.3",
     "next-seo": "^6.1.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",

apps/web/src/middleware.ts

@@ -1,4 +1,5 @@
 import type { NextRequest } from 'next/server';
+import { authMiddleware } from '@clerk/nextjs';
 import { Ratelimit } from '@upstash/ratelimit';
 import { Redis } from '@upstash/redis';
 import { NextResponse } from 'next/server';
@@ -15,7 +16,7 @@ const ratelimit = new Ratelimit({
   limiter: Ratelimit.slidingWindow(5, '10 s'),
 });
 
-export default async function middleware(
+async function rateLimitMiddleware(
   request: NextRequest,
 ): Promise<Response | undefined> {
   const ip = request.ip ?? '127.0.0.1';
@@ -25,6 +26,20 @@ export default async function middleware(
     : NextResponse.redirect(new URL('/blocked', request.url));
 }
 
+export default authMiddleware({
+  beforeAuth: (req) => {
+    return rateLimitMiddleware(req);
+  },
+  publicRoutes: [
+    '/',
+    '/blocked',
+    '/waitlist',
+    '/editor',
+    '/privacy',
+    '/(api|trpc)(.*)',
+  ],
+});
+
 export const config = {
-  matcher: '/api/:path*',
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
 };

apps/web/src/pages/_app.tsx

@@ -1,9 +1,9 @@
 import '../styles/globals.css';
 
 import { Provider as WrapBalancerProvider } from 'react-wrap-balancer';
+import { ClerkProvider } from '@clerk/nextjs';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Analytics } from '@vercel/analytics/react';
-import { SessionProvider } from 'next-auth/react';
 import { DefaultSeo } from 'next-seo';
 import { ThemeProvider } from 'next-themes';
 import { Inter, JetBrains_Mono } from 'next/font/google';
@@ -32,15 +32,15 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   return (
     <div className={`${inter.variable} ${jetBrainsMono.variable} font-sans`}>
       <DefaultSeo {...seo} />
-      <SessionProvider session={pageProps.session}>
+      <ClerkProvider {...pageProps}>
         <ThemeProvider attribute="class">
           <WrapBalancerProvider>
             {getLayout(<Component {...pageProps} />)}
           </WrapBalancerProvider>
           <Analytics />
           <ReactQueryDevtools initialIsOpen={false} />
         </ThemeProvider>
-      </SessionProvider>
+      </ClerkProvider>
       <style jsx global>{`
         :root {
           --font-inter: ${inter.variable}, sans-serif;

apps/web/src/pages/app/index.tsx

@@ -0,0 +1,14 @@
+import { UserButton } from '@clerk/nextjs';
+
+import { type NextPageWithLayout } from '../../utils/NextPageWithLayout';
+
+const AppPage: NextPageWithLayout = () => {
+  return (
+    <main>
+      <h1>Welcome to Noodle&apos;s application</h1>
+      <UserButton afterSignOutUrl="/" />
+    </main>
+  );
+};
+
+export default AppPage;

apps/web/src/pages/privacy.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { type NextPage } from 'next';
+
+const PrivacyPage: NextPage = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://app.termly.io/embed-policy.min.js';
+    script.async = true;
+    document.body.appendChild(script);
+  }, []);
+
+  return (
+    <div
+      /*
+      // @ts-expect-error it needs this attribute */
+      name="termly-embed"
+      data-id="bccd9db6-3bed-4b7b-acae-35aecd4db216"
+      data-type="iframe"
+    />
+  );
+};
+
+export default PrivacyPage;

apps/web/src/pages/sign-in/[[...index]].tsx

@@ -0,0 +1,36 @@
+import { SignIn } from '@clerk/nextjs';
+import { dark } from '@clerk/themes';
+import { useTheme } from 'next-themes';
+
+import { type NextPageWithLayout } from '../../utils/NextPageWithLayout';
+
+const SignInPage: NextPageWithLayout = () => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <main className="container mx-auto flex min-h-screen items-center justify-center">
+      <SignIn
+        appearance={{
+          baseTheme:
+            resolvedTheme === 'dark' ? dark : { __type: 'prebuilt_appearance' },
+          elements: {
+            formButtonPrimary: 'hover:bg-primary-900 transition-colors',
+            formFieldInput:
+              'bg-gray-2 dark:bg-graydark-2 border-gray-6 dark:border-graydark-6',
+            card: 'bg-gray-1 dark:bg-graydark-1 border border-gray-4 dark:border-graydark-4 shadow-none',
+          },
+          layout: {
+            privacyPageUrl: '/privacy',
+            termsPageUrl: '/terms',
+            socialButtonsPlacement: 'bottom',
+          },
+          variables: {
+            colorPrimary: '#e64d67',
+          },
+        }}
+      />
+    </main>
+  );
+};
+
+export default SignInPage;

apps/web/src/pages/sign-up/[[...index]].tsx

@@ -0,0 +1,36 @@
+import { SignUp } from '@clerk/nextjs';
+import { dark } from '@clerk/themes';
+import { useTheme } from 'next-themes';
+
+import { type NextPageWithLayout } from '../../utils/NextPageWithLayout';
+
+const SignUpPage: NextPageWithLayout = () => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <main className="container mx-auto flex min-h-screen items-center justify-center">
+      <SignUp
+        appearance={{
+          baseTheme:
+            resolvedTheme === 'dark' ? dark : { __type: 'prebuilt_appearance' },
+          elements: {
+            formButtonPrimary: 'hover:bg-primary-900 transition-colors',
+            formFieldInput:
+              'bg-gray-2 dark:bg-graydark-2 border-gray-6 dark:border-graydark-6',
+            card: 'bg-gray-1 dark:bg-graydark-1 border border-gray-4 dark:border-graydark-4 shadow-none',
+          },
+          layout: {
+            privacyPageUrl: '/privacy',
+            termsPageUrl: '/terms',
+            socialButtonsPlacement: 'bottom',
+          },
+          variables: {
+            colorPrimary: '#e64d67',
+          },
+        }}
+      />
+    </main>
+  );
+};
+
+export default SignUpPage;

apps/web/src/utils/NextPageWithLayout.ts

@@ -2,15 +2,13 @@ import type { ReactElement, ReactNode } from 'react';
 import { type NextPage } from 'next';
 import { type AppProps } from 'next/app';
 
-import { type Session } from '@noodle/auth';
-
 export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
   P,
   IP
 > & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
 
-export type AppPropsWithLayout = AppProps<{ session: Session | null }> & {
+export type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };

packages/api/package.json

@@ -28,7 +28,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@noodle/auth": "workspace:^",
+    "@clerk/nextjs": "^4.23.0",
     "@noodle/db": "workspace:^",
     "@trpc/next": "^10.35.0",
     "@trpc/server": "^10.35.0",

packages/api/src/middlewares/auth.ts

@@ -3,12 +3,12 @@ import { TRPCError } from '@trpc/server';
 import { t } from '../setup/trpc';
 
 const isAuthenticated = t.middleware(({ ctx, next }) => {
-  if (!ctx.session?.user) {
+  if (!ctx.auth.userId) {
     throw new TRPCError({ code: 'UNAUTHORIZED' });
   }
   return next({
     ctx: {
-      session: { ...ctx.session, user: ctx.session.user },
+      auth: ctx.auth,
     },
   });
 });

packages/api/src/root.ts

@@ -1,11 +1,7 @@
-import { greetingRouter } from './routers/greeting';
-import { userRouter } from './routers/user';
 import { waitListRouter } from './routers/wait-list';
 import { createRouter } from './setup/trpc';
 
 export const appRouter = createRouter({
-  greeting: greetingRouter,
-  user: userRouter,
   waitlist: waitListRouter,
 });
 

packages/api/src/setup/context.ts

@@ -1,11 +1,14 @@
-import type { Session } from '@noodle/auth';
+import type {
+  SignedInAuthObject,
+  SignedOutAuthObject,
+} from '@clerk/nextjs/server';
+import { getAuth } from '@clerk/nextjs/server';
 import { type CreateNextContextOptions } from '@trpc/server/adapters/next';
 
-import { getServerSession } from '@noodle/auth';
 import { prisma } from '@noodle/db';
 
 type ContextOptions = {
-  session: Session | null;
+  auth: SignedInAuthObject | SignedOutAuthObject;
 };
 
 export const createInnerContext = (opts: ContextOptions) => {
@@ -15,10 +18,8 @@ export const createInnerContext = (opts: ContextOptions) => {
   };
 };
 
-export const createContext = async ({ req, res }: CreateNextContextOptions) => {
-  const session = await getServerSession({ req, res });
-
-  return createInnerContext({ session });
+export const createContext = ({ req }: CreateNextContextOptions) => {
+  return createInnerContext({ auth: getAuth(req) });
 };
 
 export type Context = typeof createContext;