Add sso

src/app/create-account/page.tsx

@@ -180,7 +180,7 @@ export default function CreateAccount() {
       setStep("enterCode")
       window.scrollTo({
         top: 0,
-        behavior: "smooth", // smooth scrolling
+        behavior: "smooth",
       })
     } catch (error) {
       console.error("Error sending OTP", error)
@@ -194,7 +194,10 @@ export default function CreateAccount() {
 
   const onSubmit = async (values: FormSchema) => {
     if (!isLoaded) return
-
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    })
     setStep("verifying")
     if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") track("created-account")
 
@@ -244,7 +247,7 @@ export default function CreateAccount() {
       toast({
         variant: "destructive",
         title: "Failed to create user",
-        description: `An error occurred while trying to create user. ${(error as { message?: string })?.message ?? ""}.`,
+        description: `An error occurred while trying to create user. ${(error as { message?: string })?.message ?? ""}`,
       })
       setStep("enterCode")
     }

src/app/join/page.tsx

@@ -1,11 +1,14 @@
 "use client"
 
 import { useSignIn } from "@clerk/nextjs"
+import { SignIn } from "@clerk/nextjs"
+import { type EmailLinkFactor } from "@clerk/types"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { track } from "@vercel/analytics/react"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
+import { siGoogle } from "simple-icons"
 import * as z from "zod"
 
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"
@@ -17,6 +20,7 @@ import { toast } from "~/components/ui/use-toast"
 import type { ClerkError } from "~/lib/types"
 import { api } from "~/trpc/react"
 
+const googleIcon = { path: siGoogle.path, title: siGoogle.title }
 const formSchema = z.object({
   email: z
     .string()
@@ -127,6 +131,25 @@ export default function Join() {
       setStep("email")
     }
   }
+  const handleGoogleSignIn = async () => {
+    if (!isLoaded) return
+
+    try {
+      // Start the Google OAuth flow
+      await signIn.authenticateWithRedirect({
+        strategy: "oauth_google",
+        redirectUrl: `${window.location.origin}/sso-callback`,
+        redirectUrlComplete: `/dashboard`, // after everything succeeds
+      })
+    } catch (error) {
+      console.error("Google sign-in failed", error)
+      toast({
+        variant: "destructive",
+        title: "Google sign-in failed",
+        description: `${(error as { message?: string })?.message ?? ""}`,
+      })
+    }
+  }
 
   return (
     <div>
@@ -156,24 +179,33 @@ export default function Join() {
           </Alert>
         )}
         {step === "initial" ? (
-          <form onSubmit={form.handleSubmit(sendOtp)} className="space-y-4 mt-4">
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-mono">Email address</FormLabel>
-                  <FormControl>
-                    <Input type="email" placeholder="hello@codersforcauses.org" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit" disabled={form.formState.isSubmitting} className="w-full">
-              Continue
+          <>
+            <form onSubmit={form.handleSubmit(sendOtp)} className="space-y-4 mt-4">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-mono">Email address</FormLabel>
+                    <FormControl>
+                      <Input type="email" placeholder="hello@codersforcauses.org" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={form.formState.isSubmitting} className="w-full">
+                Continue
+              </Button>
+            </form>
+            <Button variant="outline" className="w-full mt-4" onClick={handleGoogleSignIn}>
+              <svg role="img" viewBox="0 0 24 24" height={16} width={16} className="fill-current mr-4">
+                <title>{googleIcon.title}</title>
+                <path d={googleIcon.path} />
+              </svg>
+              Continue with Google
             </Button>
-          </form>
+          </>
         ) : (
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 mt-4">
             <FormLabel className="font-mono">Enter one-time code from your email</FormLabel>

src/app/not-found.tsx

@@ -10,7 +10,7 @@ import { Button } from "~/components/ui/button"
 
 export default function NotFound() {
   return (
-    <main className="main container flex flex-col items-center justify-center gap-y-4">
+    <main className="main container flex flex-col items-center justify-center gap-y-4 p-8">
       <title>Not Found | Coders for Causes</title>
       <div className="select-none text-6xl md:text-8xl">¯\_(ツ)_/¯</div>
       <h2 className="text-3xl font-bold">404: Not Found</h2>

src/app/profile/[id]/profile/page.tsx → src/app/profile/[id]/page-content.tsx

@@ -18,7 +18,7 @@ interface ProfilePageProps {
   currentUser: RouterOutputs["users"]["getCurrent"]
 }
 
-const ProfilePage = ({ id, currentUser }: ProfilePageProps) => {
+const ProfilePageContent = ({ id, currentUser }: ProfilePageProps) => {
   const [isEditing, setIsEditing] = useState(false)
   const { data: user, refetch } = api.users.get.useQuery(id)
 
@@ -128,4 +128,4 @@ const ProfilePage = ({ id, currentUser }: ProfilePageProps) => {
   return <ProfilePageSkeleton />
 }
 
-export default ProfilePage
+export default ProfilePageContent

src/app/profile/[id]/page.tsx

@@ -1,13 +1,13 @@
 import NotFound from "~/app/not-found"
 import { api } from "~/trpc/server"
 
-import ProfilePage from "./profile/page"
+import ProfilePageContent from "./page-content"
 
 const Profile = async ({ params: { id } }: { params: { id: string } }) => {
   const currentUser = await api.users.getCurrent.query()
 
   if (currentUser) {
-    return <ProfilePage currentUser={currentUser} id={id} />
+    return <ProfilePageContent currentUser={currentUser} id={id} />
   }
 
   return <NotFound />

src/app/sso-callback/page.tsx

@@ -0,0 +1,10 @@
+import { AuthenticateWithRedirectCallback } from "@clerk/nextjs"
+
+export default function Page() {
+  return (
+    <>
+      <div className="main container  grid place-items-center text-xl">Signing you in...</div>
+      <AuthenticateWithRedirectCallback signUpFallbackRedirectUrl="/create-account/complete-profile" />
+    </>
+  )
+}

src/middleware.ts

@@ -7,30 +7,34 @@ import { User } from "./server/db/schema"
 const adminRoles = ["admin", "committee"]
 
 const isAdminPage = createRouteMatcher(["/dashboard/admin(.*)"])
-const isProtectedPage = createRouteMatcher(["/dashboard(.*)", "/profile/settings(.*)"])
-const isAuthPage = createRouteMatcher(["/join(.*)"])
+const isProtectedPage = createRouteMatcher(["/dashboard(.*)", "/profile(.*)"])
+const isAuthPage = createRouteMatcher(["/join(.*)", "/sso-callback(.*)"])
 
 export default clerkMiddleware(async (auth, req) => {
-  const clerkId = auth().userId
+  const { userId, redirectToSignIn } = auth()
 
-  if (isAdminPage(req) && clerkId) {
-    const user = await db.query.User.findFirst({
-      where: eq(User.clerk_id, clerkId),
-    })
-
-    if (!adminRoles.includes(user?.role ?? "")) {
-      // non-existent clerk role so we go to 404 page cleanly
-      auth().protect({
-        role: "lmfaooo",
+  if (isAdminPage(req)) {
+    if (userId) {
+      const user = await db.query.User.findFirst({
+        where: eq(User.clerk_id, userId),
       })
+
+      if (!adminRoles.includes(user?.role ?? "")) {
+        // non-existent clerk role so we go to 404 page cleanly
+        auth().protect({
+          role: "lmfaooo",
+        })
+      }
+    } else {
+      return redirectToSignIn()
     }
   }
 
-  if (isProtectedPage(req)) {
-    auth().protect()
+  if (isProtectedPage(req) && !userId) {
+    return redirectToSignIn()
   }
 
-  if (isAuthPage(req) && clerkId) {
+  if (isAuthPage(req) && userId) {
     return Response.redirect(new URL("/dashboard", req.url))
   }
 })

src/server/api/routers/users/get.ts

@@ -19,3 +19,17 @@ export const get = publicRatedProcedure(Ratelimit.fixedWindow(4, "30s"))
 
     return user
   })
+
+export const getByEmail = publicRatedProcedure(Ratelimit.fixedWindow(4, "30s"))
+  .input(z.string().email())
+  .query(async ({ ctx, input }) => {
+    const user = await ctx.db.query.User.findFirst({
+      where: eq(User.email, input),
+    })
+
+    if (!user) {
+      throw new TRPCError({ code: "NOT_FOUND", message: `User with email: ${input} does not exist` })
+    }
+
+    return user
+  })

src/server/api/routers/users/index.ts

@@ -4,7 +4,7 @@ import { env } from "~/env"
 import { createTRPCRouter } from "~/server/api/trpc"
 
 import { create } from "./create"
-import { get } from "./get"
+import { get, getByEmail } from "./get"
 import { getCurrent } from "./get-current"
 import { update } from "./update"
 import { updateSocials } from "./update-socials"
@@ -15,4 +15,5 @@ export const usersRouter = createTRPCRouter({
   get,
   update,
   updateSocials,
+  getByEmail,
 })