add login

src/app/page.tsx

@@ -1,12 +1,11 @@
 /** @jsxImportSource @emotion/react */
 "use client";
-import { uploadImageAtom } from "@/atoms";
-import { generatedImageAtom } from "@/atoms/index";
-import Dropzone from "@/components/dropzone";
+import Dropzone, { uploadImageAtom } from "@/components/dropzone";
 import { css } from "@emotion/react";
 import { Button } from "antd";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, atom } from "jotai";
 
+import Header from "@/components/header";
 import {
   DownloadOutlined,
   ReloadOutlined,
@@ -14,7 +13,6 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useState } from "react";
 import StyleCard from "./style-card";
-import AuthModal, { authModalAtom } from "@/components/auth";
 
 const STYLEs = [
   {
@@ -47,12 +45,13 @@ const STYLEs = [
   },
 ];
 
+const generatedImageAtom = atom<string | null>(null);
+
 export default function Home() {
   const uploadImage = useAtomValue(uploadImageAtom);
   const [generatedImage, setGeneratedImage] = useAtom(generatedImageAtom);
   const [loading, setLoading] = useState(false);
   const [pickedStyle, setPickedStyle] = useState("anime");
-  const setModalOpen = useSetAtom(authModalAtom);
 
   useEffect(() => {
     setGeneratedImage(null);
@@ -77,12 +76,8 @@ export default function Home() {
 
   return (
     <>
-      <main className="min-h-screen container m-auto">
-        <header className="flex justify-between items-center mx-auto py-2">
-          <div />
-          <Button onClick={() => setModalOpen(true)}>Open Auth</Button>
-        </header>
-        <AuthModal />
+      <main className="min-h-screen container mx-auto pb-8">
+        <Header />
         <div className="flex flex-col items-center mx-auto px-4">
           <h1 className="text-5xl font-bold text-center mt-4 mb-8">
             AI Art Generator

src/atoms/index.ts

@@ -1,5 +0,0 @@
-import { atom } from 'jotai';
-
-export const uploadImageAtom = atom<string | null>(null);
-
-export const generatedImageAtom = atom<string | null>(null);

src/components/auth-modal.tsx

@@ -0,0 +1,61 @@
+import { createClient } from "@/utils/supabase/client";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
+import { AuthChangeEvent } from "@supabase/supabase-js";
+import { Modal } from "antd";
+import { atom, useAtom, useSetAtom } from "jotai";
+import { useEffect } from "react";
+
+export const authModalAtom = atom(false);
+export const authStateAtom = atom<AuthChangeEvent>("INITIAL_SESSION");
+
+const supabase = createClient();
+
+const AuthModal = () => {
+  const [modalOpen, setModalOpen] = useAtom(authModalAtom);
+  const setAuthState = useSetAtom(authStateAtom);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => {
+      if (data?.session) {
+        supabase.auth.setSession(data.session);
+      }
+    });
+
+    const { data: authListener } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        setAuthState(event);
+        
+        if (event === "SIGNED_IN") {
+          setModalOpen(false);
+        }
+      }
+    );
+
+    return () => {
+      authListener?.subscription?.unsubscribe();
+    };
+  }, []);
+
+  return (
+    <Modal open={modalOpen} onCancel={() => setModalOpen(false)} footer={null}>
+      <Auth
+        supabaseClient={supabase}
+        appearance={{
+          theme: ThemeSupa,
+          variables: {
+            default: {
+              colors: {
+                brand: "#1677ff",
+                brandAccent: "#4096ff",
+              },
+            },
+          },
+        }}
+        providers={[]}
+      />
+    </Modal>
+  );
+};
+
+export default AuthModal;

src/components/auth.tsx

@@ -1,25 +0,0 @@
-import { createClient } from "@/utils/supabase/client";
-import { Auth } from "@supabase/auth-ui-react";
-import { ThemeSupa } from "@supabase/auth-ui-shared";
-import { Modal } from "antd";
-import { atom, useAtom } from "jotai";
-
-export const authModalAtom = atom(false);
-
-const supabase = createClient();
-
-const AuthModal = () => {
-  const [modalOpen, setModalOpen] = useAtom(authModalAtom);
-  return (
-    <Modal
-      title="Login"
-      open={modalOpen}
-      onCancel={() => setModalOpen(false)}
-      footer={null}
-    >
-      <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />
-    </Modal>
-  );
-};
-
-export default AuthModal;

src/components/dropzone.tsx

@@ -1,16 +1,17 @@
-import { uploadImageAtom } from "@/atoms";
 import {
   CloseSquareOutlined,
   InboxOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
 import { Upload } from "antd";
-import { useAtom } from "jotai";
+import { useAtom, atom } from "jotai";
 import imageCompression from "browser-image-compression";
 import React, { useState } from "react";
 
 const { Dragger } = Upload;
 
+export const uploadImageAtom = atom<string | null>(null);
+
 const Dropzone: React.FC = () => {
   const [file, setFile] = useAtom(uploadImageAtom);
   const [compressing, setCompressing] = useState(false);

src/components/header.tsx

@@ -0,0 +1,26 @@
+import { Button } from "antd";
+import AuthModal, { authModalAtom, authStateAtom } from "@/components/auth-modal";
+import { useAtomValue, useSetAtom } from "jotai";
+import { UserOutlined } from "@ant-design/icons";
+
+const Header = () => {
+  const authState = useAtomValue(authStateAtom);
+  const setModalOpen = useSetAtom(authModalAtom);
+  const isSignedIn = authState === "SIGNED_IN";
+
+  return (
+    <>
+      <header className="flex justify-between items-center mx-auto py-2">
+        <div />
+        {isSignedIn ? (
+          <UserOutlined className="h-[32px] text-xl" />
+        ) : (
+          <Button onClick={() => setModalOpen(true)}>Open Auth</Button>
+        )}
+      </header>
+      <AuthModal />
+    </>
+  );
+};
+
+export default Header;