feat(auth, icons): add gitHub and google login buttons, implement user profile component, and enhance authentication flow with logout functionality

Author: tyronejosee

next.config.ts

@@ -1,7 +1,20 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        pathname: "/**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

src/actions/auth.ts

@@ -39,3 +39,8 @@ export async function signup(formData: FormData) {
   revalidatePath("/", "layout");
   redirect("/");
 }
+
+export async function logout() {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+}

src/components/auth/github-button.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { createClient } from "@/lib/supabase/client";
+import { Button } from "@heroui/react";
+import { GitHub } from "@/components/icons";
+
+export default function GitHubButton() {
+  const supabase = createClient();
+
+  const loginWithGithub = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "github",
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <Button
+      size="lg"
+      onPress={loginWithGithub}
+      startContent={
+        <GitHub className="size-4 text-white dark:text-neutral-950" />
+      }
+      className="bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 font-medium w-full"
+    >
+      Continue with GitHub
+    </Button>
+  );
+}

src/components/auth/google-button.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { createClient } from "@/lib/supabase/client";
+import { Button } from "@heroui/react";
+import { Google } from "@/components/icons";
+
+export default function GoogleButton() {
+  const supabase = createClient();
+
+  const loginWithGoogle = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+  };
+
+  return (
+    <Button
+      size="lg"
+      onPress={loginWithGoogle}
+      startContent={
+        <Google className="size-4 text-white dark:text-neutral-950" />
+      }
+      className="bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 font-medium w-full"
+    >
+      Continue with Google
+    </Button>
+  );
+}

src/components/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as GitHubButton } from "./github-button";
+export { default as GoogleButton } from "./google-button";
+export { default as UserProfile } from "./user-profile";

src/components/auth/user-profile.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { UserResponse } from "@/types";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@heroui/react";
+import { createClient } from "@/lib/supabase/client";
+
+export default function UserProfile() {
+  const router = useRouter();
+  const supabase = createClient();
+  const [user, setUser] = useState<UserResponse | null>(null);
+
+  useEffect(() => {
+    const getUser = async () => {
+      const {
+        data: { user },
+        error,
+      } = await supabase.auth.getUser();
+
+      if (user) setUser(user);
+    };
+
+    getUser();
+  }, []);
+
+  const handleLogout = async () => {
+    const supabase = await createClient();
+    await supabase.auth.signOut();
+    router.refresh();
+  };
+
+  if (!user) return <p>Loading...</p>;
+
+  return (
+    <>
+      <p className="text-xs font-medium">Hi, {user?.user_metadata.name}</p>
+      <Dropdown>
+        <DropdownTrigger>
+          <Button isIconOnly variant="bordered" size="sm">
+            <Avatar
+              size="sm"
+              radius="sm"
+              src={user?.user_metadata.avatar_url}
+              name={`${user?.user_metadata.full_name} avatar`}
+              className="bg-primary text-white text-xl"
+            />
+          </Button>
+        </DropdownTrigger>
+        <DropdownMenu
+          aria-label="Example with disabled actions"
+          disabledKeys={["profile"]}
+        >
+          <DropdownItem key="profile">
+            <span className="text-primary font-semibold">
+              {user?.user_metadata.name}
+            </span>
+            <span>{user?.email}</span>
+          </DropdownItem>
+          <DropdownItem key="logout" onPress={handleLogout}>
+            Log out
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </>
+  );
+}

src/components/icons/facebook.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string;
+};
+
+export default function Facebook({ className }: Props) {
+  return (
+    <svg
+      className={`${className}`}
+      viewBox="126.445 2.281 589 589"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="420.945" cy="296.781" r="294.5" fill="#3c5a9a" />
+      <path
+        d="M516.704 92.677h-65.239c-38.715 0-81.777 16.283-81.777 72.402.189 19.554 0 38.281 0 59.357H324.9v71.271h46.174v205.177h84.847V294.353h56.002l5.067-70.117h-62.531s.14-31.191 0-40.249c0-22.177 23.076-20.907 24.464-20.907 10.981 0 32.332.032 37.813 0V92.677h-.032z"
+        fill="#ffffff"
+      />
+    </svg>
+  );
+}

src/components/icons/github.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string;
+};
+
+export default function GitHub({ className }: Props) {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 97.707 97.707"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+      />
+    </svg>
+  );
+}

src/components/icons/google.tsx

@@ -0,0 +1,31 @@
+type Props = {
+  className: string;
+};
+
+export default function Google({ className }: Props) {
+  return (
+    <svg
+      className={`${className}`}
+      viewBox="-3 0 262 262"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+    >
+      <path
+        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+        fill="#4285F4"
+      />
+      <path
+        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+        fill="#34A853"
+      />
+      <path
+        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+        fill="#FBBC05"
+      />
+      <path
+        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+        fill="#EB4335"
+      />
+    </svg>
+  );
+}

src/components/icons/index.ts

@@ -0,0 +1,3 @@
+export { default as Facebook } from "./facebook";
+export { default as GitHub } from "./github";
+export { default as Google } from "./google";